Ещё больше уроков в нашей группе Вконтакте!





сортировать посты по: Рейтингу | Посещаемости | Комментируемые

Введите свои исправления:


Имя:
Комментарий:

Подсказка

Если Вы нашли неточность в переводе, ошибку или считаете, что содержание данного шага не совсем точное – используйте функцию «Изменить», чтобы внести свои изменения.

*Ваши изменения будут отправлены администрации на модерирование.
*Поля "Имя" и "Комментарий" не обязательны.

Создайте современный веб-сайт для вашей дизайнерской студии.



Студия дизайна


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



Студия дизайна


2. Установите Заливку (Fill) слоя - 0% и примените для слоя стиль Наложение градиента
(Layer Style - Gradient Overlay).



Студия дизайна


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



Студия дизайна


3. Теперь выберите инструмент Карандаш (Pencil Tool) и создайте в новом документе (размером 63×29 px и разрешением 72 dpi) элемент, как в рисунке ниже. Цвет элемента - #03799D.



Студия дизайна


Студия дизайна


4. Затем, перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор. Создайте новый документ размером 1024×768 px и разрешением 72 dpi и примените стиль Наложение узора (Layer Style - Pattern Overlay):



Студия дизайна


5. Добавьте маску слоя, кликнув на иконку внизу палитры слоёв.



Студия дизайна


Теперь выберите кисть среднего размера и цветом #6D6D6D затемните середину рисунка:



Студия дизайна


6. Установите Заливку (Fill) слоя - 0%. При помощи инструмента Линия (Line Tool) нарисуйте горизонтальную полосу белого цвета:



Студия дизайна


7. Скопируйте созданный слой и расположите копию, как в следующем рисунке:



Студия дизайна


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



Студия дизайна


9. Используя предыдущий инструмент, создайте панель цветом #0383A8, разработанную для логотипа сайта.



Студия дизайна


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



Студия дизайна


11. Кликните правой кнопкой мыши на слой с эффектом стиля Отбрасывание тени
(Layer Style - Drop Shadow). Создайте новый слой (Create New Layer) и инструментом Ластик
(Eraser Tool) немного сотрите тень панели.



Студия дизайна


12. Теперь напишите названия кнопок меню, расположенных на заголовке сайта. Настройки указаны ниже:



Студия дизайна


Студия дизайна


13. При помощи инструмента Произвольная фигура (Custom Shape Tool) выберите элементы, обведённые красным цветом. Цвет элемента - #E68D35.



Студия дизайна


Следующий элемент сделайте цветом #4AE337.



Студия дизайна


Для нижеуказанного элемента выберите цвет #C4C733.



Студия дизайна


И ещё один элемент цветом #49454A.



Студия дизайна


14. Теперь вставьте указатели на соответствующие кнопки меню. При необходимости используйте инструмент Свободное трансформирование (Free Transform).



Студия дизайна


15. Напишите названия разделов сайта и вставьте картинки в них, соблюдая нижеуказанные настройки.



Студия дизайна


Студия дизайна


16. Примените для картинок стиль Обводка (Layer Style - Stroke).



Студия дизайна


17. Вставьте ещё одно фото в следующий раздел:



Студия дизайна


18. Примените для фото стиль Обводка (Layer Style - Stroke).



Студия дизайна


19. Заполните раздел соответствующим текстом. Настройки указаны ниже:



Студия дизайна


Студия дизайна


20. Выберите ранее используемый элемент, но теперь не для логотипа сайта.



Студия дизайна


Цвет элемента - #4FA8C2.



Студия дизайна


21. Далее вставьте название сайта. Настройки для “Design”:



Студия дизайна


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



Студия дизайна


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



Студия дизайна


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



Студия дизайна


Студия дизайна


23. Последний этап включает в себя создание авторского права. Настройки указаны ниже:



Студия дизайна


Студия дизайна







Ссылка на источник урока

Добавление комментария

Ваше Имя

Ваш E-mail

Код:Включите эту картинку для отображения кода безопасности
обновить код

Введите код: