Графический дизайн web сайта

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



Графический дизайн web сайта


1. Создайте новый документ размером 766×700 px и разрешением 72 dpi. С помощью инструмента Прямоугольник (Rectangle Tool) создайте фон рисунка:



Графический дизайн web сайта


2. Примените для фона стиль Наложение градиента (Layer Style — Gradient Overlay).



Графический дизайн web сайта


Настройки градиента:



Графический дизайн web сайта


3. Выберите инструмент Перо (Pen Tool) и нарисуйте 20 лучей треугольной формы.



Графический дизайн web сайта


Графический дизайн web сайта


4. Для всех лучей примените стиль Наложение цвета (Layer Style — Color Overlay).



Графический дизайн web сайта


5. Для нашего удобства, необходимо объединить в группу все лучи и установить для этой группы Режим наложения – Мягкий свет (Blending Mode – Soft Light).



Графический дизайн web сайта



6. Скачайте отсюда набор кистей под названием “evil_bloodsplat”. Установите их сюда: Program FilesAdobeAdobe Photoshop CS2 PresetsBrushes. Загрузите их и выберите инструмент Кисть
(Brush Tool). Кликните правой кнопкой мыши на рисунке и настройте так:



Графический дизайн web сайта


7. Загрузите кисти. Затем создайте новый слой (Create New Layer) и используйте на нём соответствующую кисть белого цвета для получения следующего результата:



Графический дизайн web сайта


8. При помощи инструмента Прямоугольник (Rectangle Tool) создайте нижний слой для панелей сайта, белого цвета.



Графический дизайн web сайта


9. Примените для слоя стиль Отбрасывание тени (Layer Style — Drop Shadow).



Графический дизайн web сайта


10. Используя тот же инструмент, создайте ещё один слой, предназначенный для разделов сайта, цветом #4A4A4A.



Графический дизайн web сайта


11. Снова выберите инструмент Прямоугольник (Rectangle Tool) и создайте слой, предназначенный для правой и левой половины сайта:



Графический дизайн web сайта


12. Примените для слоя стиль Наложение градиента (Layer Style — Gradient Overlay).



Графический дизайн web сайта


Настройки градиента:



Графический дизайн web сайта


13. Используя ранее загруженный набор кистей, нарисуйте пятна цветами: #C34713 и #BAE1FC.



Графический дизайн web сайта


14. Выберите инструмент Линия (Line Tool) и нарисуйте вертикальную разделительную полосу цветом #646464.



Графический дизайн web сайта


Графический дизайн web сайта


15. Сделайте 3 копии созданного слоя и расположите их, как показано ниже:



Графический дизайн web сайта


16. Теперь напишите названия кнопок меню сайта, соблюдая нижеуказанные настройки:



Графический дизайн web сайта


Графический дизайн web сайта


17. Далее, при помощи инструмента Произвольная фигура (Custom Shape Tool) выберите соответствующий элемент и вставьте его на наш рисунок:



Графический дизайн web сайта


Цвет элемента — #01C2EE.



Графический дизайн web сайта


Графический дизайн web сайта


18. Напишите название сайта. Настройки для “Design”:



Графический дизайн web сайта


Настройки для “Studio”:



Графический дизайн web сайта


Настройки для “imagination is our power”:



Графический дизайн web сайта


Графический дизайн web сайта


19. Примените для надписей стиль Отбрасывание тени (Layer Style — Drop Shadow).



Графический дизайн web сайта


20. Теперь вставьте названия разделов сайта. Настройки для “Latest news”:



Графический дизайн web сайта


Настройки для “About company”:



Графический дизайн web сайта


Настройки для “The software”:



Графический дизайн web сайта


Графический дизайн web сайта


21. Примените для текста стиль Отбрасывание тени (Layer Style — Drop Shadow).



Графический дизайн web сайта


22. Заполните разделы сайта соответствующим текстом. Настройки для “This is a legal agreement…”:



Графический дизайн web сайта


Настройки для “The software may be freely”:



Графический дизайн web сайта


Графический дизайн web сайта


23. При помощи инструмента Прямоугольник (Rectangle Tool) создайте 2 слоя, предназначенных для отражения даты новостей, цветом #00A1DC.



Графический дизайн web сайта


24. Вставьте дату в ранее созданные слои. Настройки для “26.03.07”:



Графический дизайн web сайта


Графический дизайн web сайта







Делаем Web-дизайн

Вас может также заинтересовать:

21 октября 2017

Байонет: KA/KAF/KAF2 Тип объектива: стандартный Фокусное расстояние: переменное

21 октября 2017

21 октября 2017