Фотошоп для чайников | Уроки фотошопа
Фотошоп для чайников - портал для любителей фотошопа!
Меню сайта
Категории раздела
Обработка фото [109]
Текстовые эффекты [87]
Анимация [32]
Спецэффекты [142]
Веб-дизайн [40]
Тюнинг [9]
Фотомонтаж [62]
Кнопки [39]
Рисование [55]
Наша группа
Опрос
Какой версией фотошопа вы пользуетесь?
Всего ответов: 647
КтО ОнЛаЙн

Онлайн всего: 1
Гостей: 1
Пользователей: 0
Главная - Уроки фотошопа CS5 на русском - Веб-дизайн - Урок Photoshop по созданию яркого шаблона для портфолио

Урок Photoshop по созданию яркого шаблона для портфолио

Урок Photoshop по созданию яркого шаблона для портфолио

Шаг 1

Сначала создайте новый документ размером 770×480 и с темно-серым (242424) фоном. Выберите rounded rectangle tool (a, i) и установите радиус на 15 пикселей (a, ii). Поставьте цвет переднего плана черный и создайте сверху закругленный прямоугольник (b)

modern-web-layout1_a.gif

modern-web-layout1_b.gif

Шаг 2

Установите цвет переднего плана на ярко-синий bright blue (4BC5E2) и создайте второй прямоугольник с закругленными углами, слегка поменьше.

modern-web-layout2.gif

Шаг 3

Установите цвет переднего плана на темно-синий (46A7B6) и выберите ellipse tool (a, i). Создайте большой эллипс (b)

modern-web-layout3_a.gif

modern-web-layout3_b.gif

Шаг 4

Создайте ещё два эллипса и в панели слоев соедините 3 фигуры. Объедините все три фигуры в один слой (layer > merge linked)

modern-web-layout4_a.gif

modern-web-layout4_b.gif

Шаг 5

Выделите область, используя ярко-синий закругленный прямоугольник (a), и используйте выделение, чтобы обрезать слой с кругом. Удалите слой с кругом с частью снаружи закругленного прямоугольника (b)

modern-web-layout5_a.gif

modern-web-layout5_b.gif

Шаг 6

Это вторая часть урока, в которой мы создадим прикольный макет с ярко-синей шапкой. Далее выберите ellipse tool, чтобы нарисовать светло-синий (68DAF7) эллипс в новой папке со слоями, назовите её “пятнышки”. Создайте нескольок эллипсов (b) различного цвета и размера внутри этой папки.

modern-web-layout6_a.gif

modern-web-layout6_b.gif

Шаг 7

Когда вы создадите все пятнышки, кликните на папке со слоями в панели слоев и объедините слои в один слой (Layer > Merge Layer set).

modern-web-layout7_a.gif

modern-web-layout7_b.gif

Шаг 8

Создайте выделение используя синий прямоугольник с закругленными углами (select > load selection) и используйте выделенную область для того,чтобы врезать её в слой с пятнышками. Далее продублируйте слой с пятнышками.

modern-web-layout8_a.jpg

modern-web-layout8_b.gif

Шаг 9

Примените gaussian blur к оригинальному слою с пятнышками так, как показано на рисунке.

modern-web-layout9.jpg

Шаг 10

Создайте белый прямоугоольник с закругленными углами (a). Выберите gradient tool (b, i), выберите далее линейный градиент (b, ii) и затем отредактируйте градиент (b, iii)

modern-web-layout10_a.gif

modern-web-layout10_b.gif

Шаг 11

Выберите прозрачный цвет переднего плана в редакторе градиентов. Создайте выделение используя белый прямоугольник, удалите прямоугольник и создайте новый слой. Потянте за верхнюю часть слоя для создания градиента (b).

modern-web-layout11_a.jpg

modern-web-layout11_b.gif

Шаг 12

Это третья часть урока, в которой мы создадим прикольный шаблон с синей шапкой. Теперь мы должны создать меню. Используя rounded rectangle tool, создайте прямоугольник внизу и справа от шапки. Создайте прямоугольник поменьше и серого цвета (272F32) на черном прямоугольнике. Кликните на фигуру правой кнопкой в палитре слоев и выберите “Rasterize Layer“. Теперь в этом слое создайте выделение.

modern-web-layout12_a.jpg

Шаг 13

Выберите gradient tool и в редакторе градиентов установите его на foreground to background. Примените градиент сверху донизу выделенной области (b).

modern-web-layout13_a.jpg

modern-web-layout13_b.jpg

Шаг 14

Продублируйте слой и поместите его вниз (a). Создайте ещё одну копию слоя и поместите его над нижней и, используя rectangular marquee tool, сотрите нижнюю округлую часть (b).

modern-web-layout14_a.jpg

modern-web-layout14_b.jpg

Шаг 15

Повторяйте этот процесс до тех пор, пока у вас не получится несколько слоев с кнопками. Расположите оригинальный слой с градиентом над всеми остальными в палитре слоев и, используя rectangular marquee tool, удалите нижнюю круглую часть.

modern-web-layout15_a.jpg

modern-web-layout15_b.gif

Шаг 16

Для текста в шапке я использовал шрифт tabun. Настройки, которые я использовал, можно увидеть здесь (a). Вы можете использовать любой другой жирный шрифт, например, Arial Black, если хотите. Добавив текст, создайте выделение с использованием созданного текста (b), а ниже создайте новый слой.

modern-web-layout16_a.jpg

modern-web-layout16_b.gif

Шаг 17

У вас должно получиться что-то вроде этого:

modern-web-layout17_a.gif

modern-web-layout17_b.jpg

И вот мы закончили наш урок.



Похожие материалы:


Просмотров: 2558 | Рейтинг: 0.0/0
Всего комментариев: 0
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]
Поиск по сайту
Форма входа
Популярные уроки
 
 
 
 
 
 
 
 
 
 

Хостинг от uCoz