Главная >> Веб графика >> Создание дизайна игрового сайта

Создание дизайна игрового сайта

Автор: Дмитрий   
13.06.2007 21:52

Создание дизайна игрового сайтаВ этом замечательном уроке мы будем учиться рисовать дизайн сайта на примере игрового портала. Урок достаточно длинный, но в тоже время легкий и понятный. По данной технологии можно создавать не только игровые сайты. Дизайнеры, берите на заметку! =)

Сегодня я вам покажу, как вы можее сделать продвинутый игровой дизайн сайта. Это мой финальный результат:


Создайте новый документ
Размер 760x770 пикселей
Фон: не играет роли

Создайте еще один документ размером 4 х 4 ( мы будем делать шаблон )
Увеличиваем на 1600%, выбираем инструмент pencil tool ( размер 1 пиксель ) и начинаем рисовать несколькими цветами, я использовал эти



Затем идем Edit > define pattern
Выбираем имя шаблона и нажимаем OK

Создадим новый слой( CTRL+SHIFT+N )
Выбираем инструмент Paint Bucket Tool. И используем тот шаблон, который мы сделали



Заролняем наш будущий дизайн странички этим видом заливки



Затем идем Filter > render > Lightning Effects, и устанавливаем следующие настройки



Затем выбираем Rounded rectangle tool , устанавливаем радиус на 5 пикселей, и создаем форму на нашем рисунке



Идем Edit > Transform > Warp Tool ( у вас есть Warp tool , только если у вас CS2 или выше )

Для warp tool используем такие настройки



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



Копируем этот слой ( CTRL+J ) и создаем такую же форму, но чуть меньше и распологаем под первым.



Затем выбираем инструмент rounded rectangle Tool, создаем простую форму белого цвета, я использовал другой для наглядности.



Затем выбирайте оба слоя



Объединяем их, путем нажатия CTRL+E



Затем загрузите выделение для большой формы ( для этого идем сюда Select > Load selection )



Будьте уверены инструмент Rectangular Marquee Tool уже выбран, затем переместите выделение так же, как и на картинке



Сейчас вы должны применить rasterize к главной форме



будьте уверены главная форма уже выбрана, затем нажмите CTRL+SHIFT+I (это обратит ваше выделение )

нажмите Delete на вашей клавиатуре

Затем CTRL+D

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



Снова загрузите выделение для большой формы.



Выбирайте rectangular Marquee Tool ( используя следующие настройки: )



Затем с помощью rectangular marquee tool создаем вот такое выделение:



Вы получите что-то вроде этого после того, как отпустите кнопку мыши.



Создайте новый слой( CTRL+SHIFT+N )
Выбираем paint bucket tool, и нажимаем один раз внутри выделения (используйте тот цвет, который хотите)



Затем нажмите CTRL+D, и идите в настройки стиля слоя









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



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



Для белой формы примините следующий стиль



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



Выбираем белый слой и маленький оранжевый слой в нашем меню слоев
и перетащите их на кнопку" create a new layer "


Это скопирует оба слоя, но при этом 2 останутся выделенными. Обедините их нажатием CTRL+E



Выделим этот слой и идем Edit > Transform > Flip Vertical
И с помощью мыши размещаем так же как и я



Затем выбираем Rounded rectangle Tool и создаем форму, как у меня



Применяем Rasterize для этой формы, затем создаем форму другого цвета и разещаем, как я.



Загружаем выделение для этой формы ( для загрузки выделения нажмите CTRL + левой кнопокй мыши по слою с нашей формой )
Вы увидите выделение вокруг формы



Выбираем слой с оранжевой формой



Нажимаем CTRL+SHIFT+I ( обращение выделения ) , и с помощью eraser tool удаляем некоторые части нашей формы (следуте за зеленым цветом)



Я использовал зеленый, чтобы вы увидели где надо удалить



Снова нажимаем CTRL+SHIFT+I, у вас уже выбран инструмент Rectangular marquee Tool, перемещаем выделение, как у меня.



Затем стираем всё внутри выделения с помощью Eraser tool



Нажимем CTRL+D, Затем создаем выделение, как у меня, с помощью Rectangular Marquee Tool



Будьте уверены, выбран оранжевый слой. Снова стираем Eraser tool. Нажимаем CTRL+D



Создаем другое выделение



Чистим с помощью eraser toll, так же, как у меня


Примините следующие стили для слоя









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



Выбираем Rounded Rectangle tool еще один раз, и создаем еще 2 две формы( цвет не важен )



Применяем Rasterize к этим слоям

Тогда с помощью Esraser tool удаляете главную часть этих 2 зеленых форм (когда Вы будете удалять держите клавишу SHIFT - Таким образом Вы удалите очень хорошо)

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



Примените следующие настройки стиля











Теперь продублируем заголовки для наших блоков с контентом и разместим как у меня


Теперь, используя Rounded rectangle Tool, создадим несколько простых форм и разместим их примерно так:


Затем добавим какие-нибудь пиксельные иконки, или что-то похожее, ну и конечно же не забудем добавить некоторый текст рядом с иконками.



Вставляем очищенную картинку и простой логотип.
Вы можете скачать много логотипов на сайте www.free-photoshop.com
Вот, в принципе, и все =)


А так же вы можете добавить формы для логина в правой части сверху. Я использовал Rounded rectangle tool для добавления этих форм.

Вот мой финальный результат.


Я надеюсь вам понравиться
Автор - http://talk-mania.com/
Перевод - http://graphic-tutorials.ru/ (Юзверь)

Комментарии (16)


Показать/скрыть комментарии
...
Спасибоsmilies/smiley.gifхороший урок
F.s. , 17-09-2010
...
Click
bla
Альт , 04-10-2010
...
Альт , 04-10-2010
...
Альт , 04-10-2010
...
Альт , 04-10-2010
...
Немного о заработке http://makeclick.ru wmz
Нету , 18-11-2010
...
отстой ничё не понятно не у всех ведб фотошоп на англ. языке команды хоть бы по русски в скобках писал чмырь
в , 06-01-2011
...
Codeigniterhttp://makeclick.ru/Codeignitersmilies/kiss.gifsmilies/cry.gif
Netu , 20-07-2011
...
Ещё 1 моё чудо

Валек , 29-08-2011
...
Хочешь денег? Заработай тут http://www.idcash.ru/?ref=37117
1 , 09-10-2011
...
(Хочешь денег?) З а р а б о т а й) тут http://www.idcash.ru/?ref=37117
1 , 09-10-2011
...
Отличный урок !!! Нечто подобное видел на www.ps.sibs.ru
bk72 , 11-10-2011
...
gggggg , 28-11-2011
...
ee , 28-11-2011
...
izvinita za vopros no mne nujno znat kakom formate saxranit fayl shtobi knopki rabotali?????
anun , 16-01-2012
...
Вот , проба пера)
http://cs308618.vk.me/v308618827/c234/1XGCvx9KIFY.jpg
Лизавета , 19-08-2013

Написать комментарий

меньше | больше

busy