Сделать стартовой Добавить в закладки Обратная связь Новости по RSS 2.0
ZEROlayer.ru » Уроки Photoshop » Web » Создаем игровой шаблон

Создаем игровой шаблон

Автор: NecRoMat | Категория: Уроки Photoshop » Web | 11-08-2007, 21:16
Создадим документ в Photoshop размером 760х770 px. Основной цвет #333333.

Измените масштаб изображения вашего документа на 50%, затем выберите Elipse tool, и начните создавать 3 формы. Я буду использовать различные цвета для форм. Вы можете использовать только один цвет.

Вот - первая форма:

Создаем игровой шаблон

это - вторая:

Создаем игровой шаблон

И вот - третья:

Создаем игровой шаблон

Теперь примените одинаковые стили слоя для всех форм, вот - настройки для стилей слоя:









Вот мой результат:

Создаем игровой шаблон

Теперь выберите Rectangle tool, и делайте простой прямоугольник. Используйте следующий цвет #f63d05.

Создаем игровой шаблон

Поместите слой с оранжевым прямоугольником над слоем фона:

Создаем игровой шаблон

Выберите Elliptical marquee tool и сделайте выделение как на скриншоте:

Создаем игровой шаблон

Далее создайте другой слой (нажмите CTRL+SHIFT+ALT+N) и залейте цветом. Я буду использовать следующий цвет: #c22d00 и уменьшите непрозрачность до 20%.

Создаем игровой шаблон

Выберите Ellipse Tool. Установите цвет переднего плана на #333333 и делайте большую форму как на скриншоте, измените масштаб изображения Вашего документа прежде, чем Вы сделаете этот шаг. 33% должны быть достаточно.

Создаем игровой шаблон

Теперь берем инструмент Rounded Rectangle tool (устанавливает радиус в 10 пикселей) и сделаете следующие формы:

Создаем игровой шаблон

Для этих 3х прямоугольников добавляем следующие стили слоя:


Результат:

Создаем игровой шаблон

Теперь загрузите выделейние верхнего левого прямоугольника (Ctrl+Click по иконке изображения слоя на палитре слоев):


Выберите Rectangular Marquee Tool. Убедитесь, что у Вас установлены следующие значения:

Тогда сделайте следующее выделение:

После того, как Вы выпускаете левую кнопку мыши, у Вас получится следующее:

Создайте новый слой (нажмите CTRL+SHIFT+ALT+N), и залейте белым цветом, потом нажмите CTRL+D, чтобы снять выделение.

Добавтье для этой белой формы следующие стили слоя:







Это - мой результат


Сделайте то же самое для двух других округленных прямоугольников:

Создаем игровой шаблон

Теперь добавьте некоторый текст:

Создаем игровой шаблон

Теперь добавьте другим шрифтом текстовое меню:

Создаем игровой шаблон

Выберите все текстовые элементы меню (Home, Games...) и идите в Layer > Type > Warp text... и использовуйте следующие назначения:


Теперь нажмите на CTRL+T, и поверните текст так, как будет лучше смотреться:

Создаем игровой шаблон

Тогда добавьте эмблему текста, или любую форму, которую Вы имеете.

Создаем игровой шаблон


Автор: talk-mania.com
Перевод: NecRoMat

Вот Мой пример :
Создаем игровой шаблон


 
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо зайти на сайт под своим именем.

Другие новости по теме:


Просмотров: 21847 | Напечатать | Комментарии (21)

#1 написал: M1ndhunter (12 августа 2007 22:49)
<---= Вот такое огромное спасибо! =---> smile
#2 написал: dmntr (14 августа 2007 02:03)
хм.. я не совсем понял, а как к такому шаблону приделать ссылки, например в dreamweaver ? как передать в html ?
#3 написал: LuLu (14 августа 2007 02:50)
Для этого шаблон "нарезается", а затем эти кусочки соединяются в HTML странице посредством тегов таблиц <table> или контейнеров <div>. И не важно в чем Вы делаете веб-страницу, в блокноте или в каком-либо другом визуальном редакторе.
#4 написал: dmntr (15 августа 2007 01:52)
спс, а то все время искал в отошопе такую функцию.. хотя вроде бы что-то , что я хотел есть в firewrks 8, давно не смотрел
#5 написал: serge (17 августа 2007 12:32)
Лучше напишите урок по верстанию страницы и внедрению хотя бы в неё ленты новостей чтоб колонка с контентом была "резиновая" fellow
#6 написал: leonel (21 августа 2007 00:41)
угу нарсовать то просто а всё это вмесе соединить в ХТМЛ !
и + чтоб работало !!!
#7 написал: Pinky (21 августа 2007 11:56)
это издевательство ? после уменьшения в процэнтах картинка как в пэинте получается !!!!
#8 написал: taboozx (9 октября 2007 18:28)
нарисовать намного сложней чем перевести в хтмл. для тех кто незнаком с хтмл может использовать дримвивер (графический едитор), там вообще ничего знать ненадо.
#9 написал: UncleKiti (9 ноября 2007 08:08)
Lulu , ты прелесть! Твой сайт лучший. нигде таких уроков не встречал. Санк Ю!
#10 написал: Teolinka (17 ноября 2007 14:34)
полезно
спасибо
#11 написал: svet_ik (26 декабря 2007 12:41)
Спасибо большое!Как раз то,что мне сейчас необходимо!
#12 написал: Мое (13 февраля 2008 17:33)
Полный отстой..
#13 написал: Павел К. (28 февраля 2008 21:50)
а как размер првильно шаблона подобрать??? no в вашем примере подобра какой то маленький как он будет смотреться когда я его импртирую в html???
#14 написал: Pikatese (15 марта 2008 19:26)
у меня вопрос, я вот в этом деле новичок... как нарезать шаблон и, после этого, как его крепить к HTML?
#15 написал: Pikatese (15 марта 2008 19:38)
Pikatese,
#16 написал: Павел К. (18 марта 2008 22:29)
по сути нада в fireworkse нарезать!я нарезал его по этому уроку но получилось уродливо(((((((((((
#17 написал: GM (19 мая 2008 15:47)
Круто молодцы пабольше таких тем )) На этом видь зарабатовать можно
продовая шаблоны для игровых порталов bully

Кто знает где книшку скачать можно про эту тнму шаблоны для двишков делать )
#18 написал: ImmortalSpirit (26 мая 2008 09:15)
Эх действительно урока по вёрстке не хватает...
#19 написал: Виталик (10 июня 2008 16:14)
а как он вообще нарезается? не могли бы вы написать мне это!! заранее спасибо
#20 написал: slako (13 июля 2008 18:14)
огромное спасибо!
#21 написал: xELFISx (4 октября 2009 04:26)
ну допустим сделать данный шаблон резиновым это будет проблематично но если не много переделать то не так и трудно сделать его резиной
конечно можно и без нарезки обойтись а просто в <area shape="poly" COORDS="27,223,177,110,162,155,70,2
23" href="index.html">
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.
Навигация по сайту

Новые уроки

Дизайн завораживающего постера для Часа Земли
Дизайн завораживающего постера для Часа Земли


На этом уроке мы научимся создавать концептуальный коллаж на тему Часа Земли. В ходе выполнения урока мы
проведем вас сквозь процесс придания изображению глубины при помощи нескольких мощных инструментов.
Вы так же научитесь накладывать изображения друг на друга настолько бесшовно, что они будут выглядеть как
одно цельное изображение.


Выделенные области в Photoshop Часть 2
Выделенные области в Photoshop Часть 2

Приветствую вас на второй части урока, посвященного выделенным областям в Photoshop. Прежде чем приступить к
ее выполнению, ознакомьтесь и выполните первую часть.

Создание вот такого сюрреалистичного представления сознания. Часть 1
Создание вот такого сюрреалистичного представления сознания. Часть 1

Создаем сюрреалистичное представление мыслей креативного, делового индивидуума. Мы покажем вам как сделать так, чтобы различные элементы были как будто встроены в голову героя композиции, а так же, как правильно расположить приборы из эпохи пара, замещая ими глаза персонажа.


Популярные статьи

Друзья
Семейный портал
Полезная информация о недвижимости
Реклама

Рейтинг блогов


Главная страница | Регистрация | Добавить новость | Новое на сайте |

При перепечатке материалов с сайта ссылка на источник обязательна (кликабельная и не шифрованая).
Запрещено вносить изменения в графический материал, например, обрезание водяного знака или перекрытие его своим знаками.