С помощью наших фото и видеоуроков по фотошопу вы станите уверенным пользователем программы Adobe Photoshop, научитесь делать различные эффекты в фотошопе. Так же на сайте вы найдете дополнения для фотошопа.
» » » Простой и изящный дизайн для блога в Фотошопе

Простой и изящный дизайн для блога в Фотошопе

В этом уроке мы покажем вам процесс создания простого дизайна для блог с использованием новейших возможностей программы Adobe Photoshop. 

 

Предварительный просмотр

 

 

Для работы Вам потребуются следующие ресурсы:

 

Free Font Sansation
26 Repeatable Pixel Pattern
Free Social Media Icons
Hand Cursor Icon
Stock photo: Harvest 1
Stock photo: New York Streets 3
Stock photo: Daisy Age
Stock photo: A tree on the horizon
Stock photo: Sales figures
Stock photo: Time is Money!

 

Подготовка холста

 

Шаг 1

 

В этом проекте мы собираемся использовать систему 960 GS. Скачайте шаблон с главной страницы  и внутри архива найдите файл 12 Column Grid. Откройте его в Фотошопе.


 

 

Нажмите на иконку глаза, чтобы скрыть содержимое слоя.

 

 

Шаг 2

 

Нынешний размер холста слишком мал. Перейдите в меню Изображение> Размер холста (Image > Canvas Size) (или нажмите комбинацию клавиш Ctrl+ Alt + C). Добавьте больший размер и убедитесь, что установили опорную точку в центре.

 

 

Шаг 3

 

Нажмите комбинацию клавиш Ctrl + R, чтобы открыть линейку. Перейдите в меню Просмотр> Новая направляющая (View> New Guide) и добавьте направляющую. Выберите вертикальную и задайте начальную позицию 185 пикселей.  

 

 


Шаг 4

 

Добавьте еще ​​вертикальных направляющих в позициях 150, 1095 и 1130 пикселей.

 

 

 

 

Вот, что должно у вас получиться.

 

 

 

 

Подготовка сочетаний цветов

 

Шаг 5

 

Для этого дизайна мы собираемся использовать хорошее сочетание цветов от Colorlouver. Нажмите на ссылку Preview, чтобы открыть цветовую комбинацию в виде файла в формате JPEG.

 

 

Сохраните сочетание цветов и поместите их в файле Photoshop. Разместите изображение непосредственно внутри холста, так вы сможете снять пробу цвета быстрее и проще.

 

 

Подготовка фона

 

Шаг 6

 

Выберите фоновый слой и нажмите значок замка в панели слоев, чтобы разблокировать его. Дважды щелкните миниатюру, чтобы изменить цвет.

 

 

Щелкните второй цвет # 948371, чтобы выбрать его.

 

 

Шаг 7

 

Нарисуйте прямоугольную форму в верхней части холста. Это будет второй фон.

 

 

Шаг 8

 

Для полученной формы выберите первый цвет.

 

 

Шаг 9

 

Создайте новый слой и создайте прямоугольное выделение. Активируйте инструмент Градиент (Gradient Tool) и залейте выделение радиальным градиентом от белого до черного. 

 

 

 

Измените Режим наложения (Blend Mode) на Экран (Screen) и понизьте непрозрачность до 37%.

 

 

Шаг 10

 

Создайте новый слой и назовите его «Тень».

 

 

Создайте прямоугольное выделение в нижней части вторичного фона, как показано на изображении ниже. Прейдите в меню Редактирование> Выполнить заливку (Edit> Fill). Выберите черный цвет и нажмите кнопку ОК, чтобы залить выделение черным цветом.

 

 

Шаг 11

 

Смягчите тень с помощью фильтра Размытие по Гауссу (Gaussian Blur). Для этого перейдите в меню Фильтр> Размытие> Размытие по Гауссу (Filter> Blur> Gaussian Blur).

 

 

Шаг 12

 

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

 

 

Шаг 13

 

Понизьте непрозрачность слоя с тенью до 50% , чтобы сделать её тоньше. 

 

 

Шаг 14

 

Поместите все эти слои в одну группу. Чтобы сделать это, выберите все слои и нажмите комбинацию клавиш Ctrl + G.

 

 

Заголовок

 

Шаг 15

 

Нарисуйте прямоугольник в верхней части холста, как показано на изображении ниже.

 

 

Шаг 16

 

На панели управления выбранным инструментом измените цвет обводки на # af9f8e.

 

 

Шаг 17

 

Для заливке выберите линейный градиент от # d0c4b9 до # a89c91.

 

 

Вот, что должно у вас получиться.

 

 

Имя сайта

 

Шаг 18

 

Добавить имя сайта на левой стороне дизайна. Соблюдайте положение, как показано ниже. Дважды щелкните по текстовому слою и добавьте стиль слоя Тень (Drop Shadow). Мы использовали шрифт Sansation.

 

 

 

Меню

 

Шаг 19

 

Нарисуйте меню на другой стороне панели меню. Используйте тот же шрифт Sansation и размер в 14 пунктов. Опять же обратите внимание на место размещения.

 

 

Шаг 20

 

Для активного меню установите шрифт жирным.

 

 

Шаг 21

 

Выберите инструмент Многоугольник (Polygon Tool) и установите количество сторон: 3. Нарисуйте форму треугольника, алейте её цветом# 3d3123. Добавить стиль слоя Тень (Drop Shadow).

 

 

 

 

Шаг 22

 

Подчеркните активное меню, добавив линию под ним. Возьмите инструмент Линия (Line Tool) и установите её толщину в 5 пикселей. Выберите цвет # f76b6a для её заливки.

 

 

Поместите линию прямо под активным меню и добавьте 1 пиксель пространства для нижней части панели меню.

 

 

Использование стилей символов

 

Шаг 23

 

Давайте сохраним настройки символов в качестве стиля. Эта функция представляет собой упрощенную версию стилей символов в InDesign. Чтобы сохранить их, активируйте текст, а затем щелкните значок «Новый стиль символа».

 

 

Дважды щелкните по новому стилю символов и используйте следующие параметры.

 

 

Шаг 24

 

Выберите другой пункт меню, а затем щелкните стиль символов, чтобы применить его. Если вы увидите знак плюс рядом со стилем, то это означает, что он имеет другое значение. Чтобы переопределить параметры, нажмите на значок стрелки.

 

 

Шаг 25

 

Повторите предыдущий шаг, чтобы сделать новый стиль символов для активного меню.

 

 

Шаг 26

 

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

 

Простой и изящный дизайн для блога в Фотошопе

 

Шаг 27

 

Создайте новый слой и поместите его под строкой меню. Удерживая клавишу Ctrl нажмите на меню, чтобы сделать выделение, основанное на его форме. Залейте его черным.

 

 

Шаг 28

 

Снимаем выделение с помощью комбинации клавиш Ctrl + D. Перейдите в меню Фильтр> Размытие> Размытие по Гауссу (Filter> Blur> Gaussian Blur).

 

 

Слайдер

 

Шаг 29

 

Добавьте прямоугольную форму шириной 10 столбцов (см. ниже).

 

Простой и изящный дизайн для блога в Фотошопе

 

Для заливки выберите цвет # dfd1c2. Для обводки выберите цвет # c8baac  и размер в 10 пунктов. 

 

 

Шаг 30

 

Вставьте изображение в рамку слайдера. Преобразуйте его в обтравочную маску, нажав комбинацию клавиш Ctrl + Alt + G. Ваше изображение автоматически переходит внутрь кадра слайдера. При необходимости, вы можете перемещать и изменять размер изображения, не затрагивая его кадр.

 

Простой и изящный дизайн для блога в Фотошопе

 

Шаг 31

 

Нарисуйте еще ​​прямоугольную форму за слайдером с теми же цветами. Убедитесь в том, что вы привязали ее к самой внешней направляющей. Добавьте стиль слоя Наложение узора (Pattern Overlay), используйте следующий пиксельный узор. Понизьте его непрозрачность, чтобы сделать его тоньше.

 

 

 

 

Шаг 32

 

Нарисуйте прямоугольную форму и алейте её цветом # b3aca5 и без обводки. Нажмите комбинацию клавиш Ctrl + T, а затем поверните ее на 45 °. Преобразуйте форму в качестве обтравочной маски.

 

 

Шаг 33

 

Дублируйте форму и измените её размер. Измените её заливку на более темный цвет. Преобразуйте форму в качестве обтравочной маски.

 

 

 

Шаг 34

 

Повторите те же шаги, чтобы сделать еще одну стрелку на другой стороне.

 

 

Шаг 35

 

Зажмите клавишу Ctrl и щелкните кадр слайдера, чтобы сделать новое выделение. Создайте новый слой и преобразуйте его в обтравочную маску. Залейте выделение черным цветом.

 

 

Шаг 36

 

Снимите выделение ( Ctrl + D ) и добавьте фильтр Размытие по Гауссу (Gaussian Blur).

 

 

Вы можете уменьшить непрозрачность тени, если это необходимо.

 

 

Шаг 37

 

Нарисуйте прямоугольник с закругленными углами в углу слайдера, используйте цвет # c8baac.

 

 

Шаг 38

 

Нарисуйте круг внутри формы. Установите черную обводку размером в 1 пункт и удалите заливку.

 

 

Шаг 39

 

Дублируйте круг и поместите его справа.

 

 

Создайте больше кругов.

 

 

Шаг 40

 

Выберите один из контуров круга. Нажмите комбинацию клавиш Ctrl + Shift + J, чтобы перенести его на новый слой.

 

 

Шаг 41

 

На панели управления выбранным инструментом удалите его обводку и измените его заливку  радиальным градиентом, используйте цвета от # e38989 до # bb5c5c . Добавьте стили слоя Внешнее свечение (Outer Glow) и Тень (Drop Shadow).

 

 

 

 

 

Шаг 42

 

Нарисуйте овальное выделение под ползунком. Создайте новый слой и залейте его черным цветом.

 

 

Шаг 43

 

Снимите выделение ( Ctrl + D ) и добавьте фильтр Размытие по Гауссу (Gaussian Blur).

 

 

Нижний фон

 

Шаг 44

 

Нарисуйте еще одну ​​прямоугольную форму для нижнего фона. Используйте те же цвета для заливки и обводки, как у слайдера.

 

 

Как всегда, будьте очень осторожными с его размещением. 

 

 

Добавьте стиль слоя Наложение узора (Pattern Overlay).

 

 

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

 

 

Шаг 45

 

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

 

 

Шаг 46

 

Создайте новый слой, поместите его за форму. Залейте выделение черным цветом. Нажмите комбинацию клавиш  Ctrl + T, щелкните правой кнопкой мыши и выберите команду Перспектива (Perspective).

 

 

Перетащите верхние углы наружу.

 

 

Щелкните правой кнопкой мыши снова и выберите Масштаб (Scale). Перетащите верхнюю опорную точку вниз.

 

 

Снова щелкните правой кнопкой мыши и выберите Деформация (Warp). Перетащите левый и правый сегмент внутрь.

 

 

Добавьте фильтр Размытие по Гауссу (Gaussian Blur).

 

 

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

 

 

Шаг 47

 

Нарисуйте белый прямоугольник внутри фона. Это будет фон для основного содержания сайта.

 

Добавить пространство в 10 пикселов слева, справа и с верхней стороны фона.  Добавьте стиль слоя Внешнее свечение (Outer Glow).

 

 

 

 

 

Шаг 48

 

Добавьте новую направляющую, отступите 25 пикселей от верхней части формы.

 

 

Название раздела

 

Шаг 49

 

Добавить новый стиль символов для титульного листа раздела и его описания.

 

Простой и изящный дизайн для блога в Фотошопе

 

 

Добавьте название раздела и его описание с помощью текстового инструмента. Примените стили, которые вы сделали раньше. Убедитесь в том, что вы добавили пространство в 25 пикселей с верхней стороны.

 

 

Шаг 50

 

Нарисуйте линию толщиной в 5 пикселей под описанием сайта, используйте следующий цвет для заливки # 938270.

 

 

 

Запись в блоге

 

Шаг 51

 

Сделайте еще один стиль символов для заголовок поста.

 

 

Шаг 52

 

Добавить заголовок поста и примените предыдущий стиль символов.

 

Шаг 53

 

Нарисуйте прямоугольник под заголовком в 4 колонки шириной. Залейте его белым цветом и выполните обводку цветом # BEBEBE. Добавьте стиль слоя Обводка (Stroke).

 

 

 

Шаг 54

 

Вставьте изображение в верхнюю часть формы. Преобразуйте его в обтравочную маску (Ctrl + Alt + G ).

 

 

Шаг 55

 

Нарисуйте прямоугольник с закругленными углами используя цвет # 8e8380 .Преобразовать его в обтравочную маску.

 

 

Шаг 56

 

Сделайте новые стили символов для метаданных блога.

 

 

Шаг 57

 

Добавить текст метаданных в верхнюю часть формы и примените стиль символов, который вы сделали ранее.

 

 

Шаг 58

 

Выберите инструмент Горизонтальный текст (Type tool)  и сделайте текстовое поле. Установите его ширину в 4 колонки. Перейдите в меню Текст> Вставить Lorem Ipsum (Type > Paste Lorem Ipsum), чтобы заполнить поле автоматически сгенерированным текстом.

 

 

 

Шаг 59

 

Создайте новый стиль символов. Нажмите на иконку нового стиля абзацев.

 

 

Дважды щелкните на стиль абзаца и используйте  это следующие параметры.

 

 

Шаг 60

 

Примените этот стиль к содержанию сообщения. Вы также можете поэкспериментировать с его отступом и расстоянием между символами.

 

 

Деактивируйте опцию Расстановка переносов.

 

 

Шаг 61

 

Нарисуйте прямоугольник с закругленными углами и залейте его цветом # 8e8380. Добавьте стиль слоя Наложение узора (Pattern Overlay). 

 

 

 

Шаг 62

 

Добавить надпись на кнопку. Мы предлагаем вам сохранить его как стиль символов. Таким образом, вы можете легко использовать его для других кнопок.

 

 

 

Шаг 63

 

Предыдущая кнопка предназначена для нормального состояния.  Дублируйте её и измените ​​цвет на # f76b6a . Кроме того измените шрифт на полужирный.

 

 

Шаг 64

 

Поместите их в группу, а затем нажмите комбинацию клавиш Ctrl + J, чтобы дублировать её. Удерживая клавишу Alt, перетащите дублированную группу.

 

Простой и изящный дизайн для блога в Фотошопе

 

Повторите те же шаги, чтобы сделать еще записи. Не забудьте изменить изображение и название для каждой статьи.

 

 

Шаг 65

 

Дублируйте кнопку и измените её текст на номер. Мы собираемся использовать её для навигации по страницам. Не забудьте установить одну из кнопку в «посещённое» состояние.

 

 

Подвал сайта

 

Шаг 66

 

Теперь сделаем нижний колонтитул. Добавьте заголовок виджета и его описание.

 

 

Шаг 67

 

Добавить ссылку и нарисуйте линию толщиной в 1 пиксель под ней. Цвет обводки # 8e8380.

 

 

Шаг 68

 

Нажмите кнопку Дополнительные параметры (More Options)  и выберите пунктирную линию.

 

 

 

Шаг 69

 

Добавить больше ссылок в виджет.

 

Простой и изящный дизайн для блога в Фотошопе

 

Шаг 70

 

Дублируйте виджет.

 

Простой и изящный дизайн для блога в Фотошопе

 

Шаг 71

 

Вам также необходимо добавить вид ссылки при наведении. Сделайте текст одной из ссылок жирным.

 

 

Под активной ссылкой добавьте линию толщиной в 5 пикселей. Измените её цвет на ​​ # f76b6a. 

 

 

Шаг 72

 

Добавить еще один прямоугольник в нижней части. Измените его цвет на # 3d3123.

 

 

Копирайты

 

Шаг 73

 

Добавьте  информацию об авторских правах. Добавьте стиль слоя Тень (Drop Shadow).

 

 

 

Социальные сети

 

Шаг 74

 

Добавьте некоторые иконки социальных сетей. Примените к ним столь слоя  Внешнее свечение (Outer Glow).

 

 

 

Шаг 75

 

Понизьте непрозрачность одного из значков до 50%. 

 

 

Шаг 76

 

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

 

 

 

 

Вот и всё. Макет для блога готов.

 

ДЕМО

 

ИСХОДНИК

 

Простой и изящный дизайн для блога в Фотошопе

 

Урок по теме – Создание красочного и оригинального слайдера в Фотошопе.

 

Источник



Если Вам понравился наш сайт, выразите свое "спасибо" нажатием на кнопочки ниже. Расскажите друзьям. Спасибо :)


  • 28.04.2014
  •   Просмотров: 4258
Комментарии Вконтакте:
Комментарии Facebook:
Комментарии:
Оставить комментарий:
Включите эту картинку для отображения кода безопасности
обновить, если не виден код
Сложите два числа
(ответ введите цифрой).
Если символов не видно, нажмите на картику для её обновления.
Полный курс по After Effects на русском!

Все о МАСКАХ

Полный курс по Cinema 4D на русском!

Создание профессиональных видеоуроков!

Помощь сайту
Если вам нравится у нас на сайте, и мы вам помогли, вы можете внесите свой вклад в его развитие, пожертвовав любую сумму на один из кошельков:

WebMoney
Z280416942189
R894500715826

Яндекс Деньги:
410012466071950

Все деньги пойдут на развитие сайта (оплату хостинга, оплату авторам уроков т.д.)

В примечании к платежу укажите Ваш e-mail или логин на нашем сайте.

С уважением администрация сайта.
http://of-law.ru/iskovye-zayavleniya/ - Of-law.ru-судебные решения, исковые заявления, образцы жалоб, судебная практика, юридическая консультация бесплатно,нет ничего проще
Популярное на сайте
Следите за нами

Кроссовки дешево!
http://mykrosovkii.ru/catalog/nike.html - Уцененные кроссовки со всего мира,кроссовки Nike, Adidas, Converse кеды, Reebok Classic,New Balance
Партнерские ссылки