Неделя сайтов-портфолио: Сайт-портфолио № 1

[web-design]

Часть 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 копии слоя с кругом и разместите их как показано на рисунке:



Часть 2.
17. Найдите 3 скриншота, которые будут размещены в окнах (ALT+click между слоем с окном и слоем со скриншотом)







Повторите то же самое для других окон:



18. Используя Ellipse Tool (U), создайте кнопку-скроллинг для переключения скриншотов. Цвет #FD9B00.



Параметры слоя:

Blending Options>Drop Shadow:




Blending Options>Stroke:




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







19. Объедините в группу слои, которые образуют кнопку-указатель. Скопируйте группу, примените свободное преобразование (CTRL-T) и поместите ее с другой стороны скриншотов.

Окончательный результат:




Автор: Adobe Software
Перевод: Nastia
Источник

@темы: Уроки, Web-дизайн