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





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

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


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

Подсказка

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

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

Этот детально описанный урок научит вас начальным методам проектирования для того, чтобы создавать веб-дизайн страниц, используя Adobe Photoshop.



Разделы в веб странице


1. Создайте новый документ размером 900×885 px и разрешением 72 dpi. Инструментом Заливка (Paint Bucket Tool) залейте фон цветом #7E7E7E.



Разделы в веб странице


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



Разделы в веб странице


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



Разделы в веб странице


Разделы в веб странице


3. Создайте другой слой (Create New Layer) 4×4 px и нарисуйте на нём следующий узор:



Разделы в веб странице


4. Перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор. Продолжайте создавать следующий слой (Create New Layer).



Разделы в веб странице


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



Разделы в веб странице


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



Разделы в веб странице


Наложение узора:



Разделы в веб странице


Разделы в веб странице


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



Разделы в веб странице


7. Установите Заливку (Fill) слоя - 30% и примените для этого слоя стиль Отбрасывание тени (Layer Style - Drop Shadow).



Разделы в веб странице


Обводка:



Разделы в веб странице


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



Разделы в веб странице


Разделы в веб странице


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



Разделы в веб странице


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



Разделы в веб странице


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



Разделы в веб странице


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



Разделы в веб странице


Разделы в веб странице


10. При помощи инструмента Прямоугольник (Rectangle Tool) создайте следующий слой на заголовке сайта.



Разделы в веб странице


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



Разделы в веб странице


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



Разделы в веб странице


Разделы в веб странице


12. Используя тот же инструмент Прямоугольник (Rectangle Tool), нарисуйте полосу чёрного цвета в зоне заголовка сайта.



Разделы в веб странице


Разделы в веб странице


Разделы в веб странице


13. Теперь необходимо создать панель бокового меню на левой части страницы. Сначало создайте первичный слой панели меню инструментом Прямоугольник (Rectangle Tool).



Разделы в веб странице


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



Разделы в веб странице


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



Разделы в веб странице


Разделы в веб странице


15. Теперь разделите панель кнопки меню, используя инструмент Карандаш (Pencil Tool) для создания разделительной полосы:



Разделы в веб странице


Разделы в веб странице


Разделы в веб странице


16. Примените для слоя с разделительной полосой стиль Наложение цвета
(Layer Style - Color Overlay).



Разделы в веб странице


Разделы в веб странице


17. Сделайте 6 копий слоя разделительной полосы и расположите их, как показано ниже:



Разделы в веб странице


18. Вставьте на заголовок логотип сайта. Настройки для “company”:



Разделы в веб странице


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



Разделы в веб странице


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



Разделы в веб странице


Разделы в веб странице


Разделы в веб странице


19. При помощи инструмента Произвольная фигура (Custom Shape Tool) вставьте возле логотипа значок авторского права:



Разделы в веб странице


Разделы в веб странице


20. Теперь напишите названия кнопок, расположенных на меню сайта. Настройки для “home”:



Разделы в веб странице


Настройки для “products, downloads, store, support, community”:



Разделы в веб странице


Разделы в веб странице


21. При помощи инструмента Эллипс (Ellipse Tool) создайте круг на правой части кнопки меню:



Разделы в веб странице


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



Разделы в веб странице


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



Разделы в веб странице


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



Разделы в веб странице


Разделы в веб странице


23. Сделайте 5 копий последнего слоя и расположите копии, как показано на рисунке ниже:



Разделы в веб странице


24. Теперь необходимо внести некоторые исправления в правый угол панели кнопок меню. Для начала выделите все слои с маленькими кругами и объедините их в один слой (Ctrl+E). Затем выберите инструмент Прямоугольная область (Rectangular Marquee Tool) и выделите показанную ниже зону. Нажмите клавишу Delete.



Разделы в веб странице


Разделы в веб странице







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

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

Ваше Имя

Ваш E-mail

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

Введите код: