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





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

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


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

Подсказка

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

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

В итоге мы должны получить вот такой симпотичный шаблон для сайта.


Портфолио для фотографий


1. Создайте новый документ размером 800×800 px и разрешением 72 dpi. При помощи инструмента Заливка (Paint Bucket Tool) залейте фон цветом #111111.



Портфолио для фотографий


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



Портфолио для фотографий


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



Портфолио для фотографий


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



Портфолио для фотографий


Обводка:



Портфолио для фотографий


Портфолио для фотографий


Портфолио для фотографий


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



Портфолио для фотографий


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



Портфолио для фотографий


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



Портфолио для фотографий


Портфолио для фотографий


Портфолио для фотографий


6. Используя тот же инструмент Прямоугольник с закругленными краями
(Rounded Rectangle Tool) (радиус 7 рх), создайте зону для указателя кнопок белого цвета. Затем, удерживая Alt, инструментом Прямоугольник (Rectangle Tool) сотрите ненужные элементы:



Портфолио для фотографий


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



Портфолио для фотографий


Портфолио для фотографий


8. Объедините в группу все слои, содержащие кнопку меню. Скопируйте группу и в режиме Свободного трансформирования (Free Transform) расположите копию, как на рисунке ниже. Примените для первичного слоя копии стиль Наложение градиента
(Layer Style - Gradient Overlay).



Портфолио для фотографий


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



Портфолио для фотографий


Обводка:



Портфолио для фотографий


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



Портфолио для фотографий


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



Портфолио для фотографий


Для зоны указателя кнопки установите Заливку (Fill) - 10%.



Портфолио для фотографий


Портфолио для фотографий


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



Портфолио для фотографий


Портфолио для фотографий


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



Портфолио для фотографий


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



Портфолио для фотографий


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



Портфолио для фотографий


Обводка:



Портфолио для фотографий


Портфолио для фотографий


12. При помощи инструмента Карандаш (Pencil Tool) (1 рх) нарисуйте символы белого цвета на кнопках, расположенных на заголовке сайта.



Портфолио для фотографий


Портфолио для фотографий


Портфолио для фотографий


13. Вставьте названия кнопок меню. Настройки указаны ниже:



Портфолио для фотографий


Портфолио для фотографий


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



Портфолио для фотографий


Для надписей “About me, Services, Gallery, Contact me” настройки стиля Обводка
(Layer Style - Stroke).



Портфолио для фотографий


Портфолио для фотографий


15. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиус 7 рх) создайте первичный слой логотипа. Удерживая Alt, инструментом Прямоугольник (Rectangle Tool) сотрите ненужные элементы, как в рисунке ниже:



Портфолио для фотографий


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



Портфолио для фотографий


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



Портфолио для фотографий


Обводка:



Портфолио для фотографий


Портфолио для фотографий


17. Вставьте название сайта. Настройки для “PHOTO”:



Портфолио для фотографий


Для “PORTFOLIO”:



Портфолио для фотографий


Портфолио для фотографий


18. Создайте свечение на логотипе на новом слое (Create New Layer). Сначало с помощью инструмента Прямоугольная область (Rectangular Marquee Tool) выделите зону, показанную ниже. Затем выберите инструмент Кисть (Brush Tool) (Непрозрачность (Opacity) - 50%) и обрисуйте выделенную зону белым цветом.



Портфолио для фотографий


Портфолио для фотографий


Портфолио для фотографий


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



Портфолио для фотографий


Портфолио для фотографий


20. Снова используя инструмент Прямоугольник с закругленными краями
(Rounded Rectangle Tool) (радиус 7 рх), создайте первичный слой меню поиска, расположенного на заголовке сайта. Удерживая Alt, инструментом Прямоугольник (Rectangle Tool) сотрите ненужный фрагмент на правой стороне.



Портфолио для фотографий


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



Портфолио для фотографий


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



Портфолио для фотографий


Обводка:



Портфолио для фотографий


Портфолио для фотографий


22. Теперь создайте кнопки меню поиска. Настройки указаны ниже:



Портфолио для фотографий


Портфолио для фотографий


23. Используя инструмент Карандаш (Pencil Tool) (1 рх) и цвет - #FF9E00, нарисуйте указатели возле кнопок:



Портфолио для фотографий


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



Портфолио для фотографий


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



Портфолио для фотографий


Портфолио для фотографий


26. Вставьте в поисковое окно слово “Search”, соблюдая нижеуказанные требования:



Портфолио для фотографий


Портфолио для фотографий


27. При помощи инструмента Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиус 3 рх) создайте кнопку цветом #CC6600 для запуска поиска.



Портфолио для фотографий


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



Портфолио для фотографий


Портфолио для фотографий


29. Вставьте название кнопки. Настройки указаны ниже:



Портфолио для фотографий


Портфолио для фотографий


Портфолио для фотографий


30. Используя инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиус 7 рх), создайте первичный слой для картинок портфолио цветом #111111.



Портфолио для фотографий


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



Портфолио для фотографий


Обводка:



Портфолио для фотографий


Портфолио для фотографий


32. Создайте следующий слой портфолио, используя тот же инструмент и цвет.



Портфолио для фотографий


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



Портфолио для фотографий


Обводка:



Портфолио для фотографий


Портфолио для фотографий


34. Сделайте 4 копии последнего слоя и в режиме Свободного трансформирования
(Free Transform) расположите копии, как показано ниже:



Портфолио для фотографий


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



Портфолио для фотографий


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



Портфолио для фотографий


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



Портфолио для фотографий


38. Вставьте текст на созданный слой:



Портфолио для фотографий


Портфолио для фотографий


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



Портфолио для фотографий


Портфолио для фотографий


40. Снова выберите инструмент Прямоугольник с закругленными краями
(Rounded Rectangle Tool) (радиус 7 рх) и создайте специальный раздел для автора портфолио. Удерживая Alt, тем же инструментом вырежьте ненужные элементы. Цвет раздела - #333333.



Портфолио для фотографий


Портфолио для фотографий


41. Тот же инструмент Прямоугольник с закругленными краями (Rounded Rectangle Tool) (радиус 7 рх) поможет создать слой для фото автора портфолио. Цвет слоя - #939393.



Портфолио для фотографий


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



Портфолио для фотографий


Обводка:



Портфолио для фотографий


Портфолио для фотографий


43. Расположите фото автора над слоем для фото. Удерживая Alt, кликните между слоем для фото и слоем, содержащим фото автора.



Портфолио для фотографий


44. Вставьте текст в раздел автора, соблюдая настройки ниже. Настройки для “WELCOME”:



Портфолио для фотографий


Для “TO MY WEB SITE”:



Портфолио для фотографий


Для выделенного текста:



Портфолио для фотографий


Для обычного текста:



Портфолио для фотографий


Портфолио для фотографий


45. Вставьте дополнительные ссылки в раздел автора:



Портфолио для фотографий


Портфолио для фотографий


46. Создайте новый слой (Create New Layer) и выберите инструмент Карандаш (Pencil Tool) (1 рх) для создания указателей белого цвета возле ссылок.



Портфолио для фотографий


47. Найдите в Интернете изображение фотоаппарата, вырежьте его и вставьте в рисунок:



Портфолио для фотографий


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



Портфолио для фотографий


49. Добавьте маску слоя, кликнув на иконку внизу палитры слоёв, и выберите инструмент Градиент (Gradient Tool) чёрного цвета:



Портфолио для фотографий


50. Теперь создайте меню сайта, расположенного на основании:



Портфолио для фотографий


Портфолио для фотографий


51. При помощи инструмента Карандаш (Pencil Tool) (1 рх) создайте вертикальные разделительные линии белого цвета:



Портфолио для фотографий


Портфолио для фотографий







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

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

Ваше Имя

Ваш E-mail

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

Введите код: