Главная » Уроки » Уроки по веб-дизайну:
Перевод основных меню в Adobe Photoshop

дезайн саита
Часть 1.



1. Создайте новый файл размера 800x720 px 72 dpi.

Создайте новый слой и залейте градиентом

Присоединённое изображение

Параметры градиента:

Присоединённое изображение

Присоединённое изображение


2. Используя Rounded Rectangle Tool (U), создайте на новом слое основную панель сайта, как показано на рисунке:

Присоединённое изображение

Установите следующие параметры слоя:

Blending Options>Gradient Overlay:

Присоединённое изображение


Параметры градиента:

Присоединённое изображение

Blending Options>Stroke:

Присоединённое изображение


3. Используя Rounded Rectangle Tool (U), на новом слое нарисуйте кнопку панели меню в заголовке сайта и поверните ее (Ctrl+t). Цвет кнопки #C92130.

Присоединённое изображение

Установите следующие параметры слоя:

Blending Options>Stroke:

Присоединённое изображение

Сделайте 4 копии слоя с кнопкой и установите цвета кнопок, как показано на рисунке:

Присоединённое изображение


4. Используя Ellipse Tool (U ), нарисуйте круг снизу меню:

Присоединённое изображение

Установите следующие параметры слоя:

Fill 0%

Blending Options>Gradient Overlay:

Присоединённое изображение

Параметры градиента:

Присоединённое изображение

Blending Options>Stroke:

Присоединённое изображение

5. Используя Ellipse Tool (U), нарисуйте маленький круг снизу сайта:

Присоединённое изображение

Установите следующие параметры слоя

Blending Options>Drop Shadow:

Присоединённое изображение

Blending Options>Inner Glow:

Присоединённое изображение

Blending Options>Stroke:

Присоединённое изображение

6. Используя Ellipse Tool (U), нарисуйте еще один круг, как показано на рисунке:

Присоединённое изображение

Установите параметры слоя с кружком:

Blending Options>Gradient Overlay:

Присоединённое изображение

Параметры градиента:

Присоединённое изображение

Blending Options>Stroke:

Присоединённое изображение

7. Сделайте несколько копий слоев с кругом, трансформируйте (CTRL+T) и разместите как показано на рисунке:

Присоединённое изображение


8. Нарисуйте еще три круга для того, чтобы отделить участок сайта:

Присоединённое изображение

Все три слоя должны иметь одинаковые параметры:

Цвет: #FF627A

Blending Options>Drop Shadow:

Присоединённое изображение

Blending Options>Stroke:

Присоединённое изображение


9. Нарисуйте еще один маленький круг:

Присоединённое изображение

Установки слоя с кругом:

Blending Options>Drop Shadow:

Присоединённое изображение

Blending Options>Stroke:

Присоединённое изображение


10. Теперь подпишите названия пунктов меню сайта, применяя свободную трансформацию (CTRL+T) слоев с текстом. Установки для текста представлены ниже:

Присоединённое изображение

Присоединённое изображение


11. Добавьте название сайта. Параметры текста для названия:

WEBSITE:

Присоединённое изображение

NAME:

Присоединённое изображение

Присоединённое изображение

Установите следующие параметры слоя с названием сайта:

Blending Options>Stroke:

Присоединённое изображение


12. Добавьте названия подразделов сайта.

Параметры текста:

Присоединённое изображение

Присоединённое изображение

Установите следующие параметры слоев с названиями подразделов:

Blending Options>Gradient Overlay:

Присоединённое изображение

Параметры градиента:

Присоединённое изображение


Blending Options>Stroke:

Присоединённое изображение


13. Используя Pencil Tool, белым цветом нарисуйте иконку на кнопке:

Присоединённое изображение

Присоединённое изображение


14. Пронумеруйте подразделы сайта. Используйте шрифт с параметрами:

Присоединённое изображение


Присоединённое изображение


15. Заполните подразделы текстом с параметрами:

Текст оранжевого цвета:

Присоединённое изображение

Основной текст:

Присоединённое изображение


Утолщенный текст:

Присоединённое изображение

Присоединённое изображение


Найдите в интернете логотипы и разместите их в подразделе сайта:

Присоединённое изображение

Присоединённое изображение


16. Используя Ellipse Tool (U), нарисуйте окно для представления скриншота сайта:

Присоединённое изображение

Установите следующие параметры слоя:

Blending Options>Drop Shadow:

Присоединённое изображение

Blending Options>Stroke:

Присоединённое изображение


Сделайте 3 копии слоя с кругом и разместите их как показано на рисунке:

часть 2http://photoshopto4ka.moy.su/index/0-21

Присоединённое изображение
Перевод основных меню в Adobe Photoshop

Сообщить о проблемном уроке

Категория: Уроки по веб-дизайну: | Добавил: To4kA (07.08.2007)
Просмотров: 4010 | Рейтинг: 3.0/2
Всего комментариев: 0
dth="100%" cellspacing="1" cellpadding="2" class="commTable">
Имя *: Email:
Код *: