Дизайн игрового сайта

  • 1 апреля 2010
  • 2
  • 6347

редистория попросили помочь с созданием сайта. Сайт делается для клана игры LineAGE Русского оффсервера. В примерах попались интересные сайты, которые мягко говоря - чистая халтура. Картинка и фон. При чем все видимо делаются с одного украденного шаблона.
Так возвращаемся к цели. В этом уроке я хочу показать например как можно создать стильный игровой сайт.

1. Создаем изобржение размером 900 на 600 пикселей. Заливаем его цветом - #131313
2. Теперь на этом же слое выделяем инструментом прямоугольного выделения - область нашей будущей шапки. Заливаем выделенное цветом - #222222. Не снимая выделения переходим в Edit > Stroke - ставим 1 пиксель черный цвет.
Дизайн игрового сайта


3. Теперь нам необходимо создать штриховку. Для этого создаем новое изображение 4 на 4 пикселя. Карандашом толщиной в один пиксель и цветом - #494747.
Дизайн игрового сайта
4. В этом 4-4 изображении Edit > Define Pattern, пишем Штриховка и жмемь ОК. Это изображение нам больше не нужно, закрываем его. Возвращаемся к нашей аватарке.
5. Выделяем контур основной части сайта жмем Edit > Fill измените Fill на 50%. И выбераем нашу текстуру - Штриховка.
Дизайн игрового сайта
6. Теперь создаем стильное меню в шапке сайта для этого прямоугольным выделением. Задав Feather -15. Заливаем светлосерым цветом.
Дизайн игрового сайта
7. Применяем свойства BlendingOptions
Дизайн игрового сайта
Дизайн игрового сайта
Градиент создаем сами цвета последовательно на скриншоте ниже - FFFFFF; 8F8F8F; F7F6F6; E1E9EA; FFFFFF.
Дизайн игрового сайта
Дизайн игрового сайта
8. Я продублировал слои и за счет этого создал свечение. Просто скопировав свойства слоя на новый. И получил это:
Дизайн игрового сайта
9. Следующий этап создание текста. На этом этапе я применил Градиентную заливку свойства смешивание как было показано выше. Немного модифицировав и добавив выделение текста. Также добавил голубенькое свечение менюшке. Здесь все на ваш вкус и предпочтения. Осложнений думаю не будет.
Дизайн игрового сайта
10. Теперь создаем новый слой и рисуем прямоугольное выделение в месте перехода шапки в основную часть. И применяем настройки смешивания как и выше для меню.
Дизайн игрового сайта
11. На этом этапе я взял логотип LineAge и вставил в середину шапки. Добавив мистического свечения.
а. OuterGlow - Opacity-60%; Цвет ставим - #74b2f7; Size- 16;
б. InnerGlow - Opacity-83%; Цвет ставим - #74b2f7; Size- 7;
Дизайн игрового сайта
12. На следующем этапе я поискал графику в тему игры. Обработал края расставил по шапке. Применил эффекты свечения как выше к части изображение. По тексту названия клана применил урок - Создание мистического текста в Photoshop
Дизайн игрового сайта
13. Теперь создаем блоки левой колонки. Меню. Опросы и прочее. Я рисовал овалом применяя стиль как в шапке. дальше рисуем фон создержания блока, подбираем фон через CTRL отсекаем лишнее придаем прозрачности на свой вкус. Тут я также применил смешивание как и в шапке на свечение мистическое.
Дизайн игрового сайта
14. Остался финальный этап это создание части центральной где будут новости клана, игры, и всего что только можно. то есть сам контент. я создавал по анлогии как и с меню. но без стальной верхней части. Для примера вставил первый попавшийся текст в обзорах.
Дизайн игрового сайта
На выходе мы получаем свой собственный дизайн, сделанный на свой вкус и предпочтения. Остается его только сверстать, как это сделать тема не этого урока.
После этого я решил немного модифицировать, верхнюю часть. убрав текст, так как он же будет дублироваться в блоке меню. Получилось у меня так:
Дизайн игрового сайта




Так же вы можете зайти на уроки фотошопа для начинающих.




Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
  • Написал: Сергей, 2 апреля 2010 11:24
  • Группа: Гости
Не плохой урок)
  • Написал: Анонимус, 15 января 2013 00:12
  • Группа: Гости
Плохой урок! Если сами не умеете, зачем кого-то учить?!
Ужастный макет, один из худших.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.