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





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

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


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

Подсказка

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

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

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



Дизайн сайта для портфолио


2. При помощи инструмента Эллипс (Ellipse Tool) создайте маленький круг белого цвета:



Дизайн сайта для портфолио


3. Установите Заливку (Fill) слоя - 20% и примените для круга стиль Обводка
(Layer Style - Stroke).



Дизайн сайта для портфолио


Дизайн сайта для портфолио


4. Скопируйте слой круга и в режиме Свободного трансформирования (Free Transform) немного увеличьте копию и расположите её, как на рисунке ниже. Для копии установите Заливку (Fill) слоя - 10%.



Дизайн сайта для портфолио


5. Сделайте другие копии круга и в режиме Свободного трансформирования (Free Transform) измените размер каждой копии. Примените для копий стиль Обводка (Layer Style - Stroke):



Дизайн сайта для портфолио


Также для копий установите Непрозрачность (Opacity) - 100% и Заливку (Fill) слоя - 10%.



Дизайн сайта для портфолио


Дизайн сайта для портфолио


6. Создайте новый слой (Create New Layer), выберите стандартную кисть и нарисуйте несколько цветных пятен на фоне рисунка. Каждое пятно создайте на отдельном слое.



Дизайн сайта для портфолио


Цвет пятен - #F900C1:



Дизайн сайта для портфолио


Установите Заливку (Fill) слоя - 69%.



Дизайн сайта для портфолио


Следующее пятно сделайте цветом #C2D373.



Дизайн сайта для портфолио


Установите Заливку (Fill) слоя - 63% и Режим наложения – Линейный свет
(Blending Mode – Linear Light).



Дизайн сайта для портфолио


Теперь создайте пятно цветом #6DB0F5.



Дизайн сайта для портфолио


Установите Заливку (Fill) слоя - 60%.



Дизайн сайта для портфолио


7. На следующем слое (Create New Layer) также используйте стандартную кисть, но измените Непрозрачность (Opacity) - 10 % и выберите чёрный цвет.



Дизайн сайта для портфолио


8. Напишите название сайта, соблюдая требования ниже (используйте шрифт):



Дизайн сайта для портфолио


Дизайн сайта для портфолио


Дизайн сайта для портфолио


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



Дизайн сайта для портфолио


Внешнее свечение:



Дизайн сайта для портфолио


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



Дизайн сайта для портфолио


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



Дизайн сайта для портфолио


Дизайн сайта для портфолио


10. Под названием сайта вставьте некоторый рисунок:



Дизайн сайта для портфолио


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



Дизайн сайта для портфолио


Дизайн сайта для портфолио


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



Дизайн сайта для портфолио


13. Установите Заливку (Fill) слоя - 40% и примените для слоя стиль Обводка
(Layer Style - Stroke).



Дизайн сайта для портфолио


Дизайн сайта для портфолио


14. При помощи инструмента Линия (Line Tool) (ширина - 1 рх) создайте указатель белого цвета.



Дизайн сайта для портфолио


Дизайн сайта для портфолио


15. Объедините в группу все слои, содержащие кнопку и её указатель. Скопируйте эту группу и в режиме Свободного трансформирования (Free Transform) поверните копию и расположите её, как показано на рисунке:



Дизайн сайта для портфолио


16. Вставьте название раздела под рисунком:



Дизайн сайта для портфолио


Дизайн сайта для портфолио


17. Примените для надписи стиль Внешнее свечение (Layer Style - Outer Glow).



Дизайн сайта для портфолио


Дизайн сайта для портфолио


18. Создайте новый документ размером 2×1 px и разрешением 72 dpi. Выберите инструмент Карандаш (Pencil Tool) (кисть - 1 рх) и нарисуйте узор белого цвета.



Дизайн сайта для портфолио


19. Перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор. Используя тот же инструмент Карандаш (Pencil Tool) (ширина - 1 рх), вставьте горизонтальную линию под названием раздела.



Дизайн сайта для портфолио


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



Дизайн сайта для портфолио


Дизайн сайта для портфолио


21. Теперь вставьте в раздел “About me” соответствующий текст, соблюдая нижеуказанные настройки:



Дизайн сайта для портфолио


Дизайн сайта для портфолио



Дизайн сайта для портфолио







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

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

Ваше Имя

Ваш E-mail

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

Введите код: