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





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

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


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

Подсказка

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

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

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

Профессиональный блог Web 2.0


Шаг 1
Создайте новый документ размером 750х900 пикселей с прозрачным фоном. Установите цвет заливки - #6b3724, цвет фона - #361b12. Выберите инструмент Градиент (Gradient Tool), стиль – радиальный, от заливки к фону. Сделайте заливку градиентом от центральной верхней части к краю, как показано ниже.

Профессиональный блог Web 2.0

Профессиональный блог Web 2.0


Шаг 2
Сделайте копию слоя с градиентом и установите её Режим наложения – Мягкий свет (Blending Mode – Soft Light), понизьте Непрозрачность до 20% и объедините с оригиналом (Ctrl+E). Установите цвет заливки - #31170f, выберите градиент, стиль – линейный, от заливки к прозрачному. Создайте новый слой (Create New Layer), установите его Режим наложения – Умножение (Blending Mode – Multiply) и понизьте Непрозрачность до 35-40%. От нижней части холста сделайте градиентную заливку вверх на 300 пикселей.

Профессиональный блог Web 2.0


Объедините оба градиентных слоя (Ctrl+E) и назовите слой “Background”.

Шаг 3
Выберите инструмент Прямоугольная область (Rectangular Marquee Tool) и в настройках сверху установите значение Заданный размер (Fixed Size).

Профессиональный блог Web 2.0


Установите значение высоты – 35 пикселей и ширины – 750 пикселей. Кликните на холсте, чтобы создать выделение. Потом убедитесь, что в настройках сверху активна эта кнопка:

Профессиональный блог Web 2.0


Расположите выделение по центру на расстоянии 10 пикселей от верхней границы.

Профессиональный блог Web 2.0


Шаг 4
Создайте новый слой. Установите цвет заливки - #e7b905, цвет фона - #d87a00. Выберите инструмент Градиент (Gradient Tool), стиль – линейный, от заливки к фону. На новом слое сделайте заливку внутри выделения сверху вниз. Снимите выделение (Ctrl+D) и получите такой результат:

Профессиональный блог Web 2.0


Назовите этот слой “Top Orange Bar”.
Создайте новый слой поверх остальных и добавьте слой-маску (Layer Mask). Установите цвет заливки - #e7a204. Выберите градиент, стиль – линейный, от заливки к прозрачному. Сделайте заливку от нижней границы вверх, как показано ниже.

Профессиональный блог Web 2.0


Понизьте Непрозрачность до 75%.

Профессиональный блог Web 2.0


Шаг 5
Объедините это слой со слоем оранжевой панели (Ctrl+E). Установите цвета по умолчанию (D), создайте новый слой над остальными и выберите инструмент Линия (Line Tool) толщиной 1 пиксель. Создайте прямую линию чёрного цвета прямо под оранжевой полосой от левого до правого края, как показано ниже. Нажмите X и создайте белую линию прямо под чёрной.

Профессиональный блог Web 2.0


Установите Режим наложения слоя с линиям – Мягкий свет (Blending Mode – Soft Light):

Профессиональный блог Web 2.0


Назовите этот слой “Inset Orange Bar”.

Шаг 6
Создайте новый слой над фоновым. Установите цвет заливки - #602e1e, выберите инструмент Градиент (Gradient Tool), стиль – линейный, от заливки к прозрачному. Сделайте заливку с верхней части холста вниз на 30 пикселей.

Профессиональный блог Web 2.0


Объедините это слой с фоновым (Ctrl+E).

Шаг 7
Установите цвет заливки - #a57e4a. Выберите инструмент Прямоугольник с закруглёнными углами (Rounded Rectangle Tool) со значением радиуса 10 пикселей. Создайте фигуру над остальными слоями.

Профессиональный блог Web 2.0


К слою с прямоугольником примените следующие стили в меню Стилей слоя (Layer Style - Blending Options):

Отбрасывание тени: Режим – Умножение.

Профессиональный блог Web 2.0


Тиснение: Стиль – Внутренний скос, Метод – Плавный, Режим подсветки – Осветление, Режим тени – Затемнение основы.

Профессиональный блог Web 2.0


Наложение цвета: Режим – Умножение.

Профессиональный блог Web 2.0


Наложение градиента: Режим – Нормальный, Стиль – Линейный.

Профессиональный блог Web 2.0

Профессиональный блог Web 2.0

Профессиональный блог Web 2.0


Шаг 8
Назовите слой с прямоугольником -“Notepad-BG”. Сделайте выделение этого слоя (Ctrl+Click). Установите цвет заливки - #ffd286, цвет фона - #fcba68.
Создайте новый слой поверх остальных, выберите инструмент Градиент (Gradient Tool), стиль – зеркальный, от заливки к фону. Сделайте заливку из середины выделение к верхней границе.

Профессиональный блог Web 2.0


Снимите выделение (Ctrl+D) и перейдите в режим Свободного трансформирования (Free Transform). Уменьшите фигуру по бокам и снизу, потом немного поднимите.

Профессиональный блог Web 2.0


Шаг 9
Примените стиль Отбрасывание тени (Layer Style - Drop Shadow): Режим – Умножение.

Профессиональный блог Web 2.0


Сделайте две копии слоя, и у Вас будет три слоя с фигурой. Самый нижний слой назовите ”Page 1″. Средний - ”Page 2″ и верхний - ”Page 3″. Немного уменьшите правый нижний угол второго слоя.

Профессиональный блог Web 2.0


Потом уменьшите самый верхний слой.

Профессиональный блог Web 2.0


Шаг 10
Поработаем с верхней страницей. Инструментами Перо (Pen Tool) и Стрелка (Direct Selection Tool) нарисуйте фигуру, показанную ниже.

Профессиональный блог Web 2.0


Сделайте выделение слоя с этой фигурой (Ctrl+Click), выберите инструмент Ластик (Eraser Tool) с жёсткими краями. Инвертируйте выделение (Select – Inverse). Слой “Page 3” должен быть активен. Ластиком аккуратно подотрите правый нижний угол. Чтобы было удобнее работать , я скрыл нижние два слоя с листами бумаги.

Профессиональный блог Web 2.0


Установите цвет заливки - #ffd286, цвет фона - #cc924a. Создайте новый слой над верхней страницей, кликните правой кнопкой и выберите Создать обтравочную маску (Create Clipping Mask). Сделайте выделение слоя со сгибом (Ctrl+Click), выберите инструмент Градиент (Gradient Tool), стиль – зеркальный, от заливки к фону. Сделайте заливку, как показано ниже.

Профессиональный блог Web 2.0

Профессиональный блог Web 2.0


Шаг 11
Создайте новый слой поверх всех остальных, создайте обтравочную маску (Ctrl+Alt+G).

Профессиональный блог Web 2.0


Установите цвет заливки - #795130. Выберите инструмент Кисть (Brush Tool) с жёсткими краями. Обрисуйте сгиб так:

Профессиональный блог Web 2.0


Установите Режим наложения слоя – Линейный затемнитель (Blending Mode – Linear Burn) и понизьте Непрозрачность до 65%. Выберите инструмент Палец (Smudge Tool) и размажьте тень, как показано ниже.

Профессиональный блог Web 2.0


Шаг 12
Создайте новый слой поверх остальных, создайте обтравочную маску. Установите цвет заливки - #e5b16d и выберите инструмент Кисть (Brush Tool). Обрисуйте нижнюю часть сгиба:

Профессиональный блог Web 2.0


Понизьте Непрозрачность слоя до 65% и инструментом Палец (Smudge Tool) размажьте обрисованную часть.

Профессиональный блог Web 2.0


Создайте новый слой и расположите поверх слоя “Page 3”. Создайте обтравочную маску и установите Режим наложения – Умножение (Blending Mode – Multiply), понизьте Непрозрачность до 80%. Сделайте выделение слоя со сгибом (Ctrl+Click), установите цвет заливки - #7e573a и залейте им выделение. Тень нужно немного изменить, как показано ниже.

Профессиональный блог Web 2.0


Примените фильтр Размытие по гауссу (Gaussian Blur Filter) со значением 3 пикселя.

Профессиональный блог Web 2.0


Назовите этот слой ”Shadow Page 3″. Создайте новый слой и расположите над слоем “Page 2”. Создайте обтравочную маску. Установите Режим наложения – Умножение (Blending Mode – Multiply) и понизьте Заливку (Fill) слоя до 90%. Установите цвет заливки - #7e573a. Кисть обрисуйте область под сгибом, как показано ниже.

Профессиональный блог Web 2.0


Повторите предыдущий фильтр размытия (Ctrl+F).

Профессиональный блог Web 2.0


Шаг 13
Выберите инструмент Осветлитель (Dodge Tool) с мягкими краями размером 70 пикселей. В настройках инструмента сверху установите Диапазон – Средние тона, Экспозиция – 9%. Кликните на слое “Page 2” и немного обрисуйте правый нижний угол.

Профессиональный блог Web 2.0


Потом сделайте то же самое со слоем “Page 3” и со всеми углами блокнота.

Шаг 14
Займёмся переплётом. Установите цвет заливки - #1c0f07. Инструментом Прямоугольник с закруглёнными краями (Rounded Rectangle Tool) с радиусом 4 пикселя создайте фигуру, как показано ниже.

Профессиональный блог Web 2.0


Примените к ней эти стили слоя:

Отбрасывание тени: Режим – Умножение.

Профессиональный блог Web 2.0


Тиснение: Стиль – Внутренний скос, Метод – Плавный, Режим подсветки – Осветление, Режим тени – Умножение.

Профессиональный блог Web 2.0


Наложение градиента: Режим – Нормальный, Стиль – Линейный.

Профессиональный блог Web 2.0

Профессиональный блог Web 2.0


Сделайте копии этого слоя, чтобы заполнить весь блокнот. Должно получиться 11 элементов спирали.

Профессиональный блог Web 2.0


Шаг 15
Объедините все слои спирали в один. Сделайте выделение полученного слоя (Ctrl+Click) и создайте слой Фотофильтр (Layer - Photo Filter): Тёплый фильтр 85 (Warming Filter 85), Плотность (Density) – 65, Сохранить свечение (Preserve Luminosity) – да.
Понизьте Непрозрачность слоя до 75%. Сделайте выделение слоя спирали ещё раз (Ctrl+Click)и создайте слой Тон/Насыщенность (Levels - Hue/Saturation): Насыщенность +54. Непрозрачность – 70%.
Объедините два корректирующих слоя и слой со спиралью (Ctrl+E). Назовите полученный слой “Spiral Binding”.

Профессиональный блог Web 2.0


Шаг 16
Займёмся дырками. Перейдите на слой “Page 3”. Выберите инструмент Ластик (Eraser Tool) с жёсткими краями размером 10 пикселей. Сотрите нижнюю часть элементов спирали.

Профессиональный блог Web 2.0


Выберите инструмент Резкость (Sharpen Tool) с мягкими краями размером 30 пикселей и интенсивностью 25%. Поработайте над краями дырок, которые мы создали.
Выберите инструмент Осветлитель (Dodge Tool) размером 20 пикселей в диапазоне – Света (Highlights) и экспозицией 9%. Осветлите правую нижнюю часть каждой дырки.

Профессиональный блог Web 2.0

Профессиональный блог Web 2.0


Шаг 17
Переходим к добавлению заголовков, ссылок и другого текста. Используйте любое слово в качестве заголовка. Я написал “YourBlog.com”, используя шрифт "Vila Morena"

Профессиональный блог Web 2.0

Текстовым инструментом выделите слово “Your”.

Профессиональный блог Web 2.0

Измените цвет на #fbf6ee и примените эти стили слоя:

Отбрасывание тени: Режим – Умножение.

Профессиональный блог Web 2.0

Наложение градиента: Режим – Мягкий свет.

Профессиональный блог Web 2.0
Профессиональный блог Web 2.0

Шаг 18
Установите цвет заливки - #e9bb68, сделайте выделение текстового слоя (Ctrl+Click), создайте новый слой (Create New Layer) и перейдите в меню Редактирование»Обводка (Edit > Stroke): 1 пиксель, По центру. Инструментом Прямоугольная область (Rectangular Marquee Tool) выделите и удалите обводку, которая окружает белый текст. Установите Режим наложения – Линейный осветлитель (Blending Mode – Linear Dodge), Непрозрачность – 60% и Заливку (Fill) – 40%.

Профессиональный блог Web 2.0

Шаг 19
Добавим подзаголовок. Тем же шрифтом размером 8 пикселей цветом #fbf6ee напишите подзаголовок. В настройках шрифта установите значение расстояния между буквами, как показано ниже.

Профессиональный блог Web 2.0

Потом тем же шрифтом на оранжевой панели напишите ”Login”, ”Register”, ”Next Blog”. Примените стиль Отбрасывание тени: Режим – Умножение.

Профессиональный блог Web 2.0
Профессиональный блог Web 2.0

Шаг 20
Добавим кнопки. Создайте новый слой (Create New Layer) и расположите его между слоями “Page 2” и “Page 3”. Создайте обтравочную маску (Ctrl+Alt+G). Инструментом Прямоугольник (Rectangle Tool) создайте фигуру цветом #8cb02a.

Профессиональный блог Web 2.0

Инструментом Свободное трансформирование (Free Transform) поверните фигуру:

Профессиональный блог Web 2.0

Примените эти стили слоя:

Отбрасывание тени: Режим – Умножение.

Профессиональный блог Web 2.0

Наложение градиента: Режим – Нормальный, Стиль – Линейный.

Профессиональный блог Web 2.0
Профессиональный блог Web 2.0

Обводка: Положение – Внутри, Режим – Нормальный, Тип обводки – Цвет.

Профессиональный блог Web 2.0
Профессиональный блог Web 2.0

Шаг 21
Назовите слой, с которым только что работали “Bookmark Green”. Создайте новый слой над ним и создайте ещё один прямоугольник цветом #e09508. Поверните его немного против часовой стрелки.

Профессиональный блог Web 2.0

Примените эти стили: Отбрасывание тени: Режим – Умножение.

Профессиональный блог Web 2.0

Наложение градиента: Режим – Нормальный, Стиль – Линейный.

Профессиональный блог Web 2.0
Профессиональный блог Web 2.0

Обводка: Положение – Внутри, Режим – Нормальный, Тип обводки – Цвет.

Профессиональный блог Web 2.0

Назовите этот слой “Bookmark Orange”. Создайте ещё один прямоугольник цветом #2890a6.

Профессиональный блог Web 2.0

Шаг 22
Назовите последний слой “Bookmark Blue” и примените эти стили:Отбрасывание тени: Режим – Умножение.

Профессиональный блог Web 2.0

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

Профессиональный блог Web 2.0
Профессиональный блог Web 2.0

Обводка:

Профессиональный блог Web 2.0

Понизьте Непрозрачность всех цветных прямоугольников до 93%.

Профессиональный блог Web 2.0

Шаг 23
Выберите слой с синим прямоугольником и в режиме Деформации (Transform – Warp) измените её, как показано ниже.

Профессиональный блог Web 2.0

Нужно избавиться от стилей слоя, но оставить эффект от них. Для этого создайте новый слой над синим прямоугольником и выберите оба слоя:

Профессиональный блог Web 2.0

Нажмите Ctrl+E, чтобы объединить их. Выберите инструмент Осветлитель (Dodge Tool) с мягкими краями размером 40 пикселей: диапазон – света, экспозиция – 9%. Обрисуйте нижний правый угол.

Профессиональный блог Web 2.0

Проделайте то же самое с двумя другими прямоугольниками.

Профессиональный блог Web 2.0

Установите цвет заливки - #fbf6ed и текстовым инструментом напишите названия ссылок: ”About”, “Contact” и ”Sketches”. Я использовал шрифт “Jellyka – Estrya’s Handwriting". Настройки шрифта:

Профессиональный блог Web 2.0

Профессиональный блог Web 2.0


Понизьте Непрозрачность трёх текстовых слоёв до 85%.

Шаг 24
Установите цвет заливки - #61331b, выберите шрифт “Vrinda”. Можно также использовать доступные браузеру шрифты “Arial”, “Verdana”, “Times New Roman” и т.д. Нельзя использовать шрифт “Vila Morena”, т.к. пользователь, у которого нет этого шрифта не сможет прочесть ничего из того, что Вы напишите.
Напишите заголовок поста в области блокнота и настройте текст так:

Профессиональный блог Web 2.0


Измените цвет на #67861e и напишите подзаголовок:

Профессиональный блог Web 2.0

Профессиональный блог Web 2.0


Установите цвет заливки - #abc034 и инструментом Прямоугольник (Rectangle Tool) создайте квадрат (область под картинку) под заголовком слева. Примените к нему эти стили:

Отбрасывание тени: Режим – Умножение.

Профессиональный блог Web 2.0


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

Профессиональный блог Web 2.0

Профессиональный блог Web 2.0


Обводка:

Профессиональный блог Web 2.0


Шаг 25
Установите цвет заливки - #61331b и напишите текст поста.

Профессиональный блог Web 2.0


В конце текста напишите “Read more” цветом #31a0b6. Добавьте информацию о авторе, дате и т.д. Используйте цвета: #62871d и #31a0b6.

Профессиональный блог Web 2.0


Под основным постом добавьте старые посты. Напишите их таким же способом. Объедините их в один слой и избавьтесь от стилей уже известным способом. Создайте обтравочную маску на этом слое (не выходить за пределы слоя “Page 3”). Над слоем “Page 3” должны быть старые посты, а выше – слой “Shadow Page 3”.

Профессиональный блог Web 2.0


Шаг 26
В начале урока мы создавали двойную линию. Сделайте её копию и уменьшите по горизонтали, чтобы она не выходила за пределы блокнота. Примените фильтр Размытие в движении (Motion Blur Filter) со значением угла 0 и смещения 29 пикселей. Измените размер ещё раз. Установите Режим наложения – Перекрытие (Blending Mode – Overlay) и Заливку (Fill) – 90%.

Профессиональный блог Web 2.0


Шаг 27
Сделайте копию фонового слоя и примените фильтр Добавить шум (Add Noise Filter):

Профессиональный блог Web 2.0


Примените фильтр Резкость (Sharpen Filter). Повторите его пару раз (Ctrl+F – повтор последнего фильтра). Объедините копию с оригиналом (Ctrl+E).
В нижней части холста напишите текст о правах цветом #d97f00.

Профессиональный блог Web 2.0


Примените эти стили к тексту:

Отбрасывание тени:

Профессиональный блог Web 2.0


Наложение градиента: Режим – Мягкий свет, Стиль – Линейный.

Профессиональный блог Web 2.0


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

Профессиональный блог Web 2.0




Обсудить данный урок на форуме




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