Рубрика: Photoshop Уроки | Урок прочитали: 962
 (голосов: 3)

Элегантный дизайн шаблона сайта в Фотошоп

В этом уроке Вы узнаете, как создать элегантный дизайн шаблона для блога на WordPress.

  1. Французские узоры
  2. Лупа
  3. Rss
  4. Круглое отверстие

 Создайте новый документ в Photoshop  Width (Ширина) 1150px, Hight(Высота) 1280px,  Resolution(Разрешение) 72 px/дюйм.

Создайте выделение на новом слое 128*128px. Заполните выделение  узором Gold Vellum из базового набора Photoshop  Color Paper (Цветная бумага). Трансформируйте созданное выделение, сделайте  его размером 116 *116px и создайте новый узор Edit->Define Pattern (Редактирование -> Определить узор).

Примечание переводчика: Возможно, кому-то будет легче создать узор не на новом слое, а в новом документе с заданными размерами 128*128, заполнить узором, изменить размер изображения Image->ImageSize (Изображение ->Размер Изображения) до 116*116 и потом уже определить узор.

Заполните фоновый слой полученным узором, и выполните следующую коррекцию слоя.
Image->Correction->Selective Color (Изображение-> Коррекция-> Выборочная коррекция цвета). Назовите этот слой Цветная бумага.

Цвета: Red(Красный)
Cyan(Голубой): 10% 
Magenta(Пурпурный): -9% 
Yellow(Желтый): 52% 
Black(Черный): 50% 
Цвета: Neutrals(Нейтральные )
Cyan(Голубой):  3% 
Magenta(Пурпурный):  8% 
Yellow(Желтый):  10% 
Black(Черный):  11%

Создайте новый слой, назовите его Винтажный орнамент, заполните его любым цветом, укажите Fill (Заливка)  0%. Примените  параметр наложения  Overlay Pattern (Наложение узора) к этому слою.

Создайте новый слой, назовите его Точки. Залейте его светло-желтым цветом #ff6b6.

Примените режим наложения Dissolve (Затухание) c Opacity (Непрозрачность) 16%.

Слейте слой Точки с новым пустым слоем, укажите Opacity (Непрозрачность) 76%.

Примените параметры наложения  Drop Shadow (Тень), Bevel and Emboss (Тиснение).

Дублируйте и объедините все три фоновых слоя - Цветная бумага, Винтажный орнамент и слой Точки. Теперь у нас есть фон для нашей темы. Создайте новый слой и нарисуйте прямоугольник с закругленными углами 850*850px, Radius (Радиус) 6px.

Примените следующие параметры наложения для созданного слоя.

Создайте и объедините эллипс с прямоугольником, размер объединенной  фигуры должен быть
около 892 * 189px. Сделайте оборванные края с помощью Eraser Tool (Ластик) небольшого размера круглой формы. Добавьте для объединенной фигуры параметр наложения Color Overlay (Наложение цвета) с цветом # f5eed8.

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

Теперь загрузите выделение внутренней области, создайте новый слой и залейте его любым цветом. Укажите Fill (Заливка) 0% и примените параметр наложения Inner Shadow (Внутренняя тень).

Вы должны получить что-то вроде этого

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

С помощью Pen Tool ( Перо) создайте следующую фигуру размером 78*177px. Воспользуйтесь  небольшим  Eraser Tool (Ластик), чтобы верхний и нижний края фигуры казались немного порванными.

Примените линейный градиент к этой форме, используйте следующие цвета: #ddca97, #d6c094, #eadebb, #f9f7e2, #fbf6e0, #ede2bf, #fff9dc.

Вернитесь к оригинальным не объединенным фоновым слоям. Выберите слои Цветная бумага и Точки, слейте их (не используйте в объединении слой Винтажный орнамент), назовите полученный слой Блестящая бумага. Загрузите выделение формы с градиентом, сделайте активным только что созданный слой Блестящая бумага, скопируйте выделенную область и вставьте ее на новый слой выше формы с градиентом. Сделайте слой Блестящая бумага невидимым.

Примените режим наложения Multiply (Умножение) Opacity (Непрозрачность) 25%.

Загрузите снова  выделение формы с градиентом. Создайте новый пустой слой. Перейдите Edit->Stroke (Редактирование->Обводка) 1px, Color (Цвет) #ffffff, Outside (снаружи).

Сотрите левый и правый края с помощью кисти с мягкими краями.

Примените режим наложения Soft Light (Мягкий свет)

Создайте новую форму, применяя предыдущие действия. Поместите эту форму ниже созданных слоев.

Примените параметр наложения Gradient Overlay (Наложение градиента), используйте следующие цвета: #c3aa75, #bfa977, #f0e5b6, #fefbe5, #e1cead.

Для того чтобы создать эффект тени, загрузите выделение новой формы. Заполните его коричневым цветом  в новом слое. Примените режим наложения Multiply (Умножение) с Opacity (Непрозрачность) 40%. Сотрите выделенную область с помощью Eraser Tool (Ластик) с мягкими краями.

Нарисуйте небольшую форму, как на изображении ниже

Примените  параметр наложения Gradient Overlay (Наложение градиента)

Создайте еще одну форму. Для градиента используйте цвета: #c3aa75, #bfa977, #f0e5b6, #fefbe5, #e1cead.

Создайте  небольшую тень так же, как и на предыдущей форме.

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

Примените режим наложения Multiply (Умножение) Opacity (Непрозрачность) 30%.

Создайте еще одну небольшую форму наверху

Примените параметр наложения Gradient Overlay (Наложение градиента):

Теперь у нас есть хороший эффект оборванной бумаги.

Создайте темную тень. Загрузите выделение всей формы оборванной бумаги и залейте его на новом нижнем слое  любым цветом.

Примените  фильтр Filter-> Blur-> Gaussian Blur(Фильтр->Размытие->Размытие по Гауссу) (1%) и примените параметр наложения Gradient Overlay (Наложение градиента). Переместите созданную форму немного вниз и влево.

Дублируйте  слой с тенью и примените еще раз фильтр Gaussian Blur(Размытие по Гауссу) (2,5%). Переместить новую тень на 3-4 пикселей вниз и влево.

Для формы поиска создайте прямоугольник с закругленными углами 138px *23px, Radius (Радиус) 4px.

Примените следующие параметры наложения

Создайте окружность 34*34px. Сделайте выделение внутри окружности на 31 * 31 точек, вырежьте его.

Примените следующие параметры наложения к созданной форме.

Чтобы создать эффект стекла, из рисунка Лупа скопируйте область стекла. Вставьте стекло в новый слой и  примените к нему фотофильтр Image-> Adjustments -> photo Filter (Изображение-> Коррекция-> Фотофильтр) с настройками Warming Filter
(85) (Теплый фильтр (85)), Density (Плотность) 60%. Примените к этому же слою режим наложения Multiply (Умножение) Opacity (Непрозрачность) 35%.

Дублируйте слой  со стеклом, сделайте его черно-белым Image -> Adjustments -> Black & White  (Изображение-> Коррекция-> Черно-белое). Перейдите  Image-> Adjustments-> Levels (Изображение->Коррекция->Уровни), сдвиньте черный и белый маркер к центру.

Примените на этом слое  режим наложения Screen (Экран).

Создайте следующую форму для ручки, установите Fill (Заливка) 0%.

Примените параметры наложения Bevel and Emboss (Тиснение) и  Gradient Overlay (наложение градиента).

Нарисуйте  коричневую линию в 1px, со следующими настройками: режим наложения Multiply (Умножение) Opacity (Непрозрачность) 50%.

И линию в 1px белого цвета с настройками: режим наложения Overlay (Перекрытие).

Загрузите выделение всех форм, кроме стекла. Залейте выделенную область в новом нижнем слое темно-коричневым цветом. Применить фильтр Gaussian Blur Filter (Размытие по Гауссу) (1%).

Переместите полученную тень на 1px вниз и влево.

Добавьте заголовки страниц, используйте цвет  #84724a, примените для текста параметр наложения Drop Shadow (Тень). 

Вы можете добавить несколько иконок, например Twitter, Facebook, email, или другие. Используйте для них следующие параметры наложения.

Создайте оригинальную RSS иконку, выполняя такие же действия, как и над фоном заголовка с  оборванной бумагой. Ширина и высота около 135 * 82 px.

Создайте форму для загнутого бумажного угла.

Примените параметры наложения Inner Shadow (Внутрення тень) и Color Overlay (Наложение цвета), используйте такие же параметры настройки, как для формы в заголовке выше.

Загрузите выделение этой формы. Перейдите Select-> Inverse (Выделение->Инверсия). Создайте новый слой и обработайте форму небольшой круглой белой кистью, чтобы создать эффект оборванной бумаги.

Сделайте следующую форму под загнутый угол.

Примените  линейный градиент для загнутого угла, используйте цвета: #ddca97, #bea87c, #eadebb, #ffffff, #fbf6e0, #ede2bf, #fff9dc .

Загрузите выделение созданной формы. Перейдите на слой Блестящая бумага, скопируйте выделенную область и вставьте ее на новый слой выше слоя с загнутым углом. Примените режим наложения Multiply (Умножение)  Opacity (Непрозрачность) 27%.

Вставьте RSS иконку ниже слоя с загнутым углом. Примените некоторые параметры наложения к нему.

Добавьте название блога и описание.

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

Нарисуйте  инструментом Line Tool (Линия) линию в 1px, цвет  #d0c397.

Нарисуйте еще линию в 1px более светлого цвета #fffbec чуть ниже.

Введите какое-нибудь название для первого поста.

Добавьте какую-нибудь информацию

Добавьте боковую панель с несколькими статьями.

Вы можете здесь создать разделяющие декоративные линии, как в предыдущих шагах.

Напишите в копирайт информацию.

           

Похожие файлы и публикации:

Элегантный дизайн шаблона сайта в Фотошоп
В этом уроке Вы узнаете, как создать винтажный дизайн для шаблона Wordpress в Фотошоп.
Элегантный дизайн шаблона сайта в Фотошоп
Этот урок по Фотошопу покажет вам, как сделать дизайн сайта или портфолио.
Элегантный дизайн шаблона сайта в Фотошоп
В этом уроке мы создадим фантастическую сцену: наша картина оживёт
Элегантный дизайн шаблона сайта в Фотошоп
Сегодня мы поработаем над созданием интересного эффекта – лицо, распадающееся на кусочки.
Элегантный дизайн шаблона сайта в Фотошоп
Используемые изображения: - Сердце - Капли - Капля - Брызги воды 1 - Брызги воды 2 - Боке
Элегантный дизайн шаблона сайта в Фотошоп
Что может быть лучше подарка, сделанного своими руками?!
Элегантный дизайн шаблона сайта в Фотошоп
Нам понадобятся для урока такие материалы: Пальмовый лист Шрифт
Элегантный дизайн шаблона сайта в Фотошоп
В этом уроке будем учиться создавать креативный дизайн для блога.
Элегантный дизайн шаблона сайта в Фотошоп
Сегодня мы с помощью программы Фотошоп создадим волшебное дерево с золотыми яблоками.
Элегантный дизайн шаблона сайта в Фотошоп
Шаг 2. Создайте новый слой и назовите его “camera2”. Выделите содержимое слоя “camera1” (CTRL + клик по миниатюре слоя). Выполните команду “Select > Modify > Contract” (Выделение > Модификация > Сжать). Установите сжатие в 7 пикселей. Залейте выделение цветом.
Элегантный дизайн шаблона сайта в Фотошоп
Изображение - существенный элемент в наборе любого дизайнера. Независимо от того - простой Ваш проект или что-то эксклюзивное, хорошее изображение будет всегда кстати. В этом уроке продемонстрированы способы того, чтобы помочь Вам создать своё собственное глянцевое изображение.
Элегантный дизайн шаблона сайта в Фотошоп
Здравствуйте  и добро пожаловать!
Элегантный дизайн шаблона сайта в Фотошоп
Вот такой домик получится после данного урока
Элегантный дизайн шаблона сайта в Фотошоп
В этом уроке вы узнаете, как создать сюрреалистическую сцену улицы с 3D моделями, отражениями на воде, подводными текстурами, а также узнаете, как создать эффект волн с нуля.
Элегантный дизайн шаблона сайта в Фотошоп
В этом уроке мы нарисуем иллюстрацию  с бокалом холодного пива, используя программу Photoshop. Вот такой:
Элегантный дизайн шаблона сайта в Фотошоп
Используемые изображения: Облака Пейзаж Луна Небо Ветка Дерево Звезды
Элегантный дизайн шаблона сайта в Фотошоп
В этом уроке  Вы научитесь создавать интересный огненный эффект с помощью программы  Фотошоп  и  использовать  его  для художественного оформления своих  работ.
Элегантный дизайн шаблона сайта в Фотошоп
Сегодня я вам покажу, как сделать эффект запотевшего окна с помощью кистей, использования фото и стилей слоя. У вас займет всего 30 минут, чтобы достичь такого же результата.
Элегантный дизайн шаблона сайта в Фотошоп
В этом уроке мы создадим голографическое изображение девушки, похожей на персонаж фильма Звёздные войны, принцессу Лею.
Элегантный дизайн шаблона сайта в Фотошоп
В данном уроке мы будем учиться создавать информационный блок для сайта.