Дизайн игрового сайта
редистория попросили помочь с созданием сайта. Сайт делается для клана игры 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. Остался финальный этап это создание части центральной где будут новости клана, игры, и всего что только можно. то есть сам контент. я создавал по анлогии как и с меню. но без стальной верхней части. Для примера вставил первый попавшийся текст в обзорах.
На выходе мы получаем свой собственный дизайн, сделанный на свой вкус и предпочтения. Остается его только сверстать, как это сделать тема не этого урока.
После этого я решил немного модифицировать, верхнюю часть. убрав текст, так как он же будет дублироваться в блоке меню. Получилось у меня так:
Так же вы можете зайти на уроки фотошопа для начинающих.
Так возвращаемся к цели. В этом уроке я хочу показать например как можно создать стильный игровой сайт.
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. Остался финальный этап это создание части центральной где будут новости клана, игры, и всего что только можно. то есть сам контент. я создавал по анлогии как и с меню. но без стальной верхней части. Для примера вставил первый попавшийся текст в обзорах.
На выходе мы получаем свой собственный дизайн, сделанный на свой вкус и предпочтения. Остается его только сверстать, как это сделать тема не этого урока.
После этого я решил немного модифицировать, верхнюю часть. убрав текст, так как он же будет дублироваться в блоке меню. Получилось у меня так:
Так же вы можете зайти на уроки фотошопа для начинающих.
