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





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

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


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

Подсказка

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

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

Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


4. Примените для слоя стиль Внутреннее свечение (Layer Style - Inner Glow).



Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


7. Создайте новый корректирующий слой Фотофильтр (Photo Filter) и настройте его, как показано ниже:



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


8. Загрузите с Интернета набор кистей для Adobe Photoshop, называемый Bush Pack v1. После этого создайте новый слой (Create New Layer) и используйте на нём кисти из вышеупомянутого набора. Расположите слой кистей ниже, чем фото автора. Цвет кистей - белый и Непрозрачность (Opacity) слоя - 10%.



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


9. На следующем слое (Create New Layer) снова используйте те же кисти из загруженного набора. Кисти белого цвета (Непрозрачность (Opacity) слоя - 20%). Этот слой также расположите ниже слоя, содержащего фото автора сайта.



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


10. Загрузите с Интернета другой набор кистей для Adobe Photoshop, называемый Vector_brushes. Создайте новый слой (Create New Layer) для их использования. Кисти также имеют белый цвет. В режиме Свободного трансформирования (Free Transform) поверните кисти и расположите этот слой ниже фото автора.



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


11. На следующем слое (Create New Layer) используйте стандартную кисть белого цвета:



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


12. Создайте ещё один слой (Create New Layer) и используйте на нём кисти Vector_brushes. Кисти имеют белый цвет (Установите Заливку (Fill) слоя - 20%). Этот слой должен быть расположен ниже, чем слой с фото автора.



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


16. Выберите инструмент Прямоугольник (Rectangle Tool) и нарисуйте кнопку, предназначенную для меню сайта.



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


Обводка:



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


Обводка:



Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


22. Вставьте названия кнопок меню сайта. Настройки для “home page”:



Собственная веб-страница для портфолио


Настройки для названий остальных кнопок:



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


23. Примените для слоя кнопки “home page” стиль Обводка (Layer Style - Stroke).



Собственная веб-страница для портфолио


24. Примените для остальных слоёв названий кнопок стиль Обводка (Layer Style - Stroke).



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


25. Создайте новый слой (Create New Layer) и нарисуйте на нём указатель, расположенный на левой стороне названий кнопок меню. Для этого потребуется инструмент Карандаш (Pencil Tool) белого цвета (кисть - 1 рх). Указатель возле кнопки с названием “home page” должен быть создан на отдельном слое, а остальные - на одном слое, возле остальных кнопок.



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


26. Примените для указателей те же настройки, что и для названий кнопок:



Собственная веб-страница для портфолио


27. Используя инструмент Прямоугольник (Rectangle Tool), создайте зону для дополнительных кнопок цветом #36322D.



Собственная веб-страница для портфолио


28. Создайте новый слой (Create New Layer) и используйте на нём инструмент Карандаш
(Pencil Tool) (кисть - 1 рх) для создания значков дополнительных кнопок. Цвет значков - #998D7B.



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


29. Скопируйте слой, содержащий фото автора сайта и в режиме Свободного трансформирования (Free Transform) расположите копию, как на рисунке ниже. Измените цвет копии на #2A251F.



Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


32. Вставьте названия разделов и боковых меню. Названия состоят из двух слов, каждое из которых следует создать на отдельном слое.



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


33. Примените для первых слов названий стиль Наложение градиента
(Layer Style - Gradient Overlay).



Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


34. Теперь напишите лозунг приветствия на нашу персональную страницу. Слова “welcome to” и “my page” должны быть написаны на отдельных слоях.



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


35. Для последних слоёв примените те же настройки, что и для названия сайта.



Собственная веб-страница для портфолио


36. При помощи инструмента Прямоугольник (Rectangle Tool) создайте слои, которые будут содержать фотографии автора сайта.



Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


38. Теперь вставьте соответствующие фотографии. Каждое фото должно быть размещено выше, чем сам слой, предназначенный для них. Удерживая Alt, кликните между слоями фотографий и самим слоем для фотографий:



Собственная веб-страница для портфолио


39. Скопируйте слой фильтра, применяемого 5 раз для фото автора. Расположите копии слоёв над каждой фотографией. Удерживая Alt, кликните между слоями фильтра и слоями фото:



Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


41. Перейдите в меню Редактировать>Определить узор (Edit>Define Pattern) и сохраните узор. При помощи инструмента Линия (Line Tool) создайте ползунок цветом #38322C.



Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


43. Инструментом Прямоугольник (Rectangle Tool) изобразите передвигающийся элемент ползунка цветом #67584A.



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


44. Теперь вставьте текст сайта. Настройки для надписей в разделе “useful links”:



Собственная веб-страница для портфолио


Настройки для ссылок:



Собственная веб-страница для портфолио


Настройки для даты:



Собственная веб-страница для портфолио


Настройки для текста белого цвета:



Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


45. Примените для надписей в разделе “useful links” стиль Обводка (Layer Style - Stroke).



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


46. Снова создайте новый слой (Create New Layer) и вставьте указатели возле ссылок, используя инструмент, применяемый для рисования элементов кнопок меню. Цвет указателей - белый.



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


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



Собственная веб-страница для портфолио


Собственная веб-страница для портфолио


Собственная веб-страница для портфолио






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

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

Ваше Имя

Ваш E-mail

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

Введите код: