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





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

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


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

Подсказка

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

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

По окончанию урока мы получим вот такой дизайн сайта:


Дизайн веб-сайта студии


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



Дизайн веб-сайта студии


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



Дизайн веб-сайта студии


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



Дизайн веб-сайта студии


Дизайн веб-сайта студии


3. Используя инструмент Прямоугольник (Rectangle Tool), нарисуйте маленькую полосу цветом #1B1B1B на верхней части страницы.



Дизайн веб-сайта студии


4. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиусом 10 рх) создайте заголовок сайта. Сначало создайте основной слой, затем, удерживая Alt, тем же инструментом вырежьте зону для кнопок меню.



Дизайн веб-сайта студии


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



Дизайн веб-сайта студии


Тиснение:



Дизайн веб-сайта студии


Наложение градиента:



Дизайн веб-сайта студии


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



Дизайн веб-сайта студии


Обводка:



Дизайн веб-сайта студии


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



Дизайн веб-сайта студии


Дизайн веб-сайта студии


6. Создайте новый документ размером 4×4 px и разрешением 72 dpi. При помощи инструмента Карандаш (Pencil Tool) нарисуйте чёрный узор, как показано ниже:



Дизайн веб-сайта студии


7. Перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор. Вернитесь к странице сайта. Выберите инструмент Прямоугольник (Rectangle Tool) и создайте специальный слой для кнопок меню. Этот слой расположите ниже слоя, содержащего заголовок сайта.



Дизайн веб-сайта студии


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



Дизайн веб-сайта студии


Дизайн веб-сайта студии


9. Скопируйте слой заголовка сайта:



Дизайн веб-сайта студии


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



Дизайн веб-сайта студии


Дизайн веб-сайта студии


Дизайн веб-сайта студии


11. Выберите инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиус - 5 рх) и вставьте кнопку в зону меню на заголовке сайта.



Дизайн веб-сайта студии


12. Примените для кнопки стиль Внутренняя тень (Layer Style - Inner Shadow).



Дизайн веб-сайта студии


Наложение градиента:



Дизайн веб-сайта студии


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



Дизайн веб-сайта студии


Обводка:



Дизайн веб-сайта студии


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



Дизайн веб-сайта студии


Дизайн веб-сайта студии


13. Скопируйте слой кнопки и в режиме Свободного трансформирования (Free Transform) расположите копию, как на рисунке ниже.



Дизайн веб-сайта студии


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



Дизайн веб-сайта студии


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



Дизайн веб-сайта студии


15. Сделайте 2 копии созданного слоя копии и инструментом Свободное трансформирование (Free Transform) расположите новые копии, как показано ниже:



Дизайн веб-сайта студии


16. Вставьте название сайта. Настройки для “DESIGN”:



Дизайн веб-сайта студии


Для “studio”:



Дизайн веб-сайта студии


Дизайн веб-сайта студии


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



Дизайн веб-сайта студии


Наложение градиента:



Дизайн веб-сайта студии


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



Дизайн веб-сайта студии


Дизайн веб-сайта студии


18. Вставьте названия кнопок меню, расположенных на заголовке сайта:



Дизайн веб-сайта студии


Дизайн веб-сайта студии


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



Дизайн веб-сайта студии


Дизайн веб-сайта студии


20. Теперь перейдите к работе с местами для рисунков. Для этого потребуется инструмент Прямоугольник (Rectangle Tool) и белый цвет.



Дизайн веб-сайта студии


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



Дизайн веб-сайта студии


Дизайн веб-сайта студии


22. На установленные места для рисунков вставьте сами картинки (предварительно вырежьте их).



Дизайн веб-сайта студии


23. Вставьте соответствующий текст в разделы сайта. Настройки для выделенного текста:



Дизайн веб-сайта студии


Для главного текста раздела:



Дизайн веб-сайта студии


Для ссылок внутри текста:



Дизайн веб-сайта студии


Для ссылок синего цвета:



Дизайн веб-сайта студии


Дизайн веб-сайта студии


24. При помощи инструмента Линия (Line Tool) создайте несколько разделительных линий цветом #555555.



Дизайн веб-сайта студии


25. Создайте новый слой (Create New Layer) и выберите инструмент Карандаш (Pencil Tool) (кисть - 2 рх) и нарисуйте возле ссылок несколько указателей цветом #27D1F4.



Дизайн веб-сайта студии


Дизайн веб-сайта студии


26. При помощи инструмента Прямоугольник (Rectangle Tool) создайте ползунок цветом #3E3E3E на правой стороне рисунка:



Дизайн веб-сайта студии


27. Используя тот же инструмент, создайте передвигающийся элемент ползунка:



Дизайн веб-сайта студии


28. Примените для элемента стиль Внутренняя тень (Layer Style - Inner Shadow).



Дизайн веб-сайта студии


Наложение градиента:



Дизайн веб-сайта студии


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



Дизайн веб-сайта студии


Дизайн веб-сайта студии


Дизайн веб-сайта студии


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



Дизайн веб-сайта студии


Дизайн веб-сайта студии


Дизайн веб-сайта студии





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

написал : nervig

Простите чайника, вот сделал все как указано в уроке. Красиво! А как к сайту прикручивать не пойму. Ведь это же только картинка

---------------


написал : positive11

Нужно резать и хтмлом прикручивать. в фотошопе есть Slice Tool
почитай в нэте про этот инструмент

---------------


написал : SenDen

В 1-ом пункте полоса сверху не отображается, когда я её нарисовал, а в 4ом пункте не могу вырезать зону для кнопок меню...

---------------


написал : positive11

Какая полоса в 1 пункте??? там просто создание фона при помощи прямоугольника.

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

---------------


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

Ваше Имя

Ваш E-mail

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

Введите код: