Макет страницы для бизнес-сайта в Фотошоп. Макет в фотошопе


Элегантный макет для блога в Фотошоп

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

Ресурсы урока:

  1. Кафе
  2. Шрифт PT Serif
  3. Шрифт Bentham

Архив

Создаем новый документ

Шаг 1

Создайте новый документ, используя настройки, которые показаны ниже (Файл - Новый) (File > New). Вы можете создать документ любого размера. Разрешение документа- 72 пиксела.

Шаг 2

Разметим документ при помощи направляющих. Добавьте новую направляющую: (Просмотр - Новая направляющая) (View > New Guide). Обычно выбираю 1000 пикселов и добавляю несколько направляющих по краям, чтобы до краев документа осталось небольшое пространство. При создании этого макета я установил направляющие по вертикали: 100px, 285px, 445px, 600px, 605px, 765px, 925px и 1100px.

Примечание: Вы можете использовать плагин GuideGuide, чтобы сделать процесс добавления направляющих быстрее.

Шаг 3

Сервис  Photoshop etiquette позволит легко организовать дизайн и легко его редактировать. Создайте четыре группы и назовите их  Header, Content, Sharing и Footer (Слой - Новый - Группа) (Layer > New > Group). Для быстрого создания группы нажмите вот на эту иконку:

Создаем область для шапки сайта

Шапка сайта играет очень важную роль в привлечении пользователей. Для макета этого блога я буду использовать  изображение одного из кафе Лондона.

Шаг 1

Для начала, создадим фон для блога. Внутри группы "Header" нарисуйте прямоугольную фигуру любого цвета, используя инструмент Прямоугольник (Rectangle Tool) (U). Я нарисовал прямоугольник размером 1200x600 пикселов и поместил его в верхней части документа.Перенесите изображение с кафе в документ и поместите его над слоем с прямоугольником. Я переименовал слой с изображением кафе в IMG. Теперь удерживая клавишу Alt, кликните под слоем с фото, чтобы создать обтравочную маску.

Таким образом, фото будет идеально помещено внутрь прямоугольника. Подгоните размер фото под размер прямоугольника (Ctrl + T).

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

Шаг 2

Нужно сделать фон блога темнее и нейтральнее. Размойте изображение кафе при помощи фильтра Размытие по Гауссу (Фильтр - Размытие - Размытие по Гауссу) (Filter > Blur > Gaussian Blur). Установите радиус размытия 3 пиксела.  Использование небольшого размытия позволит устранить резкие детали изображения - благодаря этому, посетители блога будут концентрировать внимание  на содержании блога.

Создайте новый слой (Shift + Ctrl + N) над слоем с фотографией и добавьте к нему обтравочную маску. Залейте новый слой черным цветом и уменьшите его непрозрачность до 50%. За счет этого, фотография станет немного темнее.

Шаг 3

Теперь добавим логотип. Создайте новую группу внутри группы " Header" и назовите ее "Logo". Для этого урока я использовал простой, типографический логотип. Выберите инструмент Текст (Horizontal Type Too) (T) и шрифтом Bentham, размером в 30 пикселов, напишите заголовок для блога. Расстояние между буквами установите немного больше, чем обычно, чтобы получить элегантный вид. Также, текст напишите заглавными буквами., т.к., их легче читать.

Примените к слою с прямоугольником  стиль слоя Обводка (stroke).

Уменьшите параметр Заливка (Fill) для слоя с прямоугольником до 0%. Таким образом, заливка прямоугольника не будет видна, а будет видна только белая обводка вокруг логотипа.

Шаг 4

Теперь напишем информацию о блоге. Инструментом Текст (Horizontal Type) (T) и шрифтом Bentham напишите небольшой текст. Для написания амперсанда я использовал шрифт  Baskerville (Italic), а ниже написал короткую фразу шрифтом  PT Serif (Italic) с размером 20 пикселов. Убедитесь в том, что тест расположен вертикально по центру изображения на шапке.

Создаем область под контент

Шаг 1

Начнем создавать область под текст блога. Выберите инструмент Текст (Horizontal Type Tool) (T) и напишите текст, используя темный цвет и заглавные буквы. Старайтесь не использовать черный цвет для текста, а выберите темно-серый цвет. Для этого урока я использовал темно-серый цвет (#444444) и шрифт Bentham размером 42 пиксела. Поместите этот текст по центру документа.

Шаг 2

Уменьшите размер шрифта до 14 пикселов и напишите дату сообщения блога, имя автора, название категории, теги и другую информацию о публикации.

Шаг 3

При помощи инструмента Текст (Horizontal Type Tool) (T) создайте текстовый фрейм (удерживая нажатой левую кнопку мыши, проведите слева направо, чтобы создать контейнер для текста). Текстовый фрейм должен располагаться между направляющими шириной в 640 пикселов. Высота этого текстового контейнера зависит от длины текста.

Выберите светло-серый фоновый цвет (#6f6f6f) и шрифт  PT Serif  размером 18 пикселов, а высоту линии установите в 34 пиксела. Высота линии обычно составляет около 1.5 - 1.9 в зависимости от стиля шрифта. Можно вычислить высоту строки по вот такой формуле. Я использую размер шрифта 18 пикселов: 18*1.8=34.2.

Шаг 4

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

Создаем кнопки для соцсетей

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

Шаг 1

Создайте новую группу для кнопок и назовите ее "Sharing". Инструментом Прямоугольник (Rectangle Tool) (U) нарисуйте прямоугольник между направляющими, в моем случае это направляющие, которые установлены размером в 640х54 пиксела. Кликните правой кнопкой мыши по слою и выберите пункт Параметры наложения (Blending Options) и выберите стиль слоя Обводка (Stroke).

Уменьшите параметр Заливка (Fill) до 0%. Благодаря этому, заливка фигуры станет невидимой, а видимым будет только контур.

Выберите инструмент Линия (Line Tool) (U) и установите ширину линии 1 пиксел. нарисуйте три вертикальные линии, которые послужат контейнером для кнопок. Направляющие помогут правильно расположить кнопки на макете.

Примечание: удерживая клавишу Shift, Вы сможете нарисовать ровные вертикальные линии.

Шаг 3

Выберите инструмент Текст (Horizontal Type Tool) (T) и напишите слово  SHARE, после него, в остальных контейнерах напишите названия соцсетей. Названия соцсетей поместите в центре контейнеров.

Шаг 4

Социальные кнопки нарисованы, теперь нужно создать добавить цвет на одну из кнопок - этим цветом будут подсвечиваться все кнопки при наведении на них курсора мыши. Инструментом Прямоугольник (Rectangle Tool) (U) нарисуйте прямоугольную фигуру под кнопкой , используя цвет, которым выделяли строки с текстом для создания гиперссылок.

Создаем футер

Создайте группу с названием " Footer" и внутри нее нарисуйте прямоугольник в нижней части документа. Для прямоугольника используйте цвет #555555 и оставил пустое пространство над фигурой в 110 пикселов.

Шаг 2

Инструментом Текст (Horizontal Type Tool) (T) напишите копирайт. Для его создания я использовал шрифт  PT Serif размером 14 пикселов и с цветом #FFFFFF. Поместите текст с копирайтом по центру футера.

Финальное изображение:

Автор: Tomas Laurinavicius

photoshop-master.ru

Макет страницы для бизнес-сайта в Фотошоп

В этом уроке я покажу, как создать макет для бизнес-сайта.

Финальный результат:

Шаг  1

Создайте новый документ (Файл – Новый) (File > New) размером 780×700 px и с разрешением 72 dpi.

Создайте новый слой (Shift + Ctrl + N). Инструментом Прямоугольная область выделения (Rectangular Marquee Tool) (M) выделите необходимые области и залейте их черным цветом при помощи инструмента Заливка (Paint Bucket Tool) (G).

На этом же слое инструментом Овальная область выделения (Elliptical Marquee Tool) (M) создайте пять круглых выделений и нажмите клавишу Delete, чтобы вырезать их из черного фона (каждое выделение рисуйте отдельно, после чего нажимайте клавишу Delete).

Шаг 2

Дублируйте недавно созданный слой (Ctrl + J) и поместите его под слой с черным фоном. Инструментом Свободное трансформирование (Free Transform) (Ctrl + T) сдвиньте слой в правую сторону, изменив его цвет. Для этого, примените стиль слоя Наложение цвета (Color Overlay) и выберите цвет #AEAEAE.

Шаг 3

Выберите инструмент Кисть (Brush Tool) (B) такого типа, как показано на скриншоте (это одна из стандартных кистей).

Выбранной кистью сделайте несколько кликов рядом с отверстиями на фоне:

Теперь выберите инструмент Осветлитель (Dodge Tool) (O) с кистью, которая показана на скриншоте, и пройдитесь инструментом по черному фону:

Шаг 4

Найдите в Интернете гранжевые кисти, создайте новый слой (Shift + Ctrl + N) и выбранной ранее кистью нарисуйте потертые области на черном фоне. Уменьшите непрозрачность (Opacity) этого слоя до 40%.

Шаг 5

Дублируйте последний созданный слой (Ctrl + J) и поверните его на 180 градусов (Ctrl + T). Расположите дубликат, как показано на скриншоте:

Инструментом Прямоугольник (Rectangle Tool) (U) нарисуйте вертикальную линию серого цвета (#ACACAC).

Теперь инструментом Эллипс (Ellipse Tool) (U) нарисуйте маленький круг такого же серого цвета (#ACACAC), что и линия.

Также, инструментом Эллипс (Ellipse Tool) (U) нарисуйте круг меньшего размера. Этот круг должен быть белого цвета.

Шаг 6

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

Поместите только что созданные слои в группу (Ctrl + G).

Шаг 7

Дублируйте группу четыре раза (Ctrl + J) и расположите копии, как показано ниже:

Шаг 8

Теперь на хедере нужно нарисовать кнопку. Для этого воспользуйтесь инструментом Овальная область выделения (Ellipse Tool) (U).

Уменьшите параметр Заливка (Fill) слоя с кнопкой до 0% и примените к нему стиль слоя Внешнее свечение (Outer Glow):

Также, примените стиль слоя Наложение градиента (Gradient Overlay):

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

Также, добавьте стиль Обводка (Stroke). В открывшемся окне для обводки выберите градиент:

Параметры градиента для обводки:

Результат:

Для удобства, поместите все слои  с кнопками меню в группу (Ctrl + G). Дублируйте четыре раза получившуюся группу и передвиньте дубликаты:

Шаг 8

Теперь пронумеруйте кнопки меню. Выберите инструмент Текст (Т), откройте палитру Символы (Окно – Символы) и выберите в ней шрифт и его размер. Остальные атрибуты либо оставьте по умолчанию, либо выберите на свой вкус.

Шаг 9

Теперь над кнопками меню напишите названия:

Шаг 10

Теперь создадим узор. Создайте новый слой (Shift + Ctrl + N) размером 1×4 px и с разрешением 72 dpi, выберите инструмент Карандаш (Pencil Tool) (B) с цветом #4C4C4C и нарисуйте текстуру:

Из созданного узора создайте текстуру (Редактирование – Определить узор) (Edit > Define Pattern).

Шаг 11

Инструментом Прямоугольник (Rectangle Tool) (U) нарисуйте вертикальную линию.

Уменьшите параметр Заливка (Fill) для слоя с вертикальной линией до 0% и примените к ней текстуру, которую только что создали. Для этого, добавьте  стиль слоя Перекрытие узора (Pattern Overlay).

Шаг 12

Создайте новый слой (Shift + Ctrl + N) размером 4×4 px и с разрешением 72 dpi и инструментом (Карандаш) (Pencil Tool) (B) с цветом #25B0C3, нарисуйте еще один узор.

Из созданного узора создайте текстуру (Редактирование – Определить узор) (Edit > Define Pattern).

Шаг 13

Инструментом Прямоугольник со скругленными углами ( Rounded Rectangle Tool) (U) нарисуйте овальную фигуру. Поместите ее под слой с пунктирной линией:

К слою с овальной фигурой примените стиль слоя Наложение градиента (Gradient Overlay):

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

Примените также стиль Перекрытие узора (Pattern Overlay) с текстурой, которую создали в шаге 12.

Также, добавьте стиль слоя Обводка (Stroke) с градиентной заливкой:

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

Результат:

Шаг 14

Инструментом Эллипс (Ellipse Tool) (U) нарисуйте кнопку play:

К слою с этой кнопкой примените стиль Наложение градиента (Gradient Overlay) с такими параметрами:

Также, добавьте стиль Обводка с градиентной заливкой (Stroke):

Результат:

Шаг 15

Инструментом Карандаш (Pencil Tool) (B) нарисуйте стрелку на кнопке. Для этого, создайте новый слой (Shift + Ctrl + N) и используйте цвет #124E58.

Все слои, относящиеся к кнопке play, поместите в группу (Ctrl + G), дублируйте группу (Ctrl + J), отразите по вертикали (Ctrl + T) и опустите дубликат вниз:

Шаг 16

Под меню добавьте две области под контент:

В две области под контент добавьте текст:

Финальный результат:

Автор: adobetutorialz

photoshop-master.ru

Макет сайта в Фотошоп

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

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

Материалы для урока:

960 Grid

Набор иконок Aquaticus Social

Архив

Создание нового документа

Мы будем использовать систему 960 Grid. Качаем, открываем файл 960_grid_12_col.psd.

Работа над фоном

Давайте начнем работу с фона. Жмем G, в открывшемся редакторе градиента устанавливаем цвета – с #dcdcdc до #ffffff:

Теперь проводим линию градиента снизу вверх, как показано на рисунке:

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

Работа над шапкой

Прежде чем мы начнем работу над фоном, мы должны определить верхнюю границу нашего макета. Жмём View > New Guide (Просмотр > Новая направляющая) и выставляем настройки, как показано ниже:

Теперь перейдем к лого; нам нужно создать выделение 280 на 40 пикселей, как показано ниже. Я использовал Polygonal Lasso Tool (Прямолинейное Лассо).

Теперь жмём Shift+Backspace, чтобы залить выделение белым цветом.

Наложим на наш прямоугольник стиль слоя Наложение градиента. Установите цвета, как показано ниже:

Теперь напишите ваше имя со следующими настройками:Шрифт: RockwellРазмер: 46pxТип: ОбычныйЦвет: #1e1e1c

Создаем еще одно выделение 270 на 40, должно получиться как-то так:

Залейте выделение, наложите сверху такой же градиент, а также создайте тень, используя следующие настройки:

Используя те же настройки текста, только изменив размер на 33 пикселя, создадим подзаголовок:

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

Работа над навигацией

Мы начнём с создания небольшого прямоугольника – создадим его, используя Rounded Rectangle Tool (Прямоугольник со скругленными углами) радиусом 5 пикселей. Прямоугольник должен быть размером 65 на 30 пикселей.

Далее установим для слоя стили Обводка, Наложение градиента, Внутренняя тень:

Не забудьте добавить самое главное – текст. Я использовал цвета #ffffff и #1e1e1c.

Выделяем слой с текстом и слой с прямоугольником в списке слоёв.

И прежде чем двигаться далее, сгруппируйте их (Ctrl+G).

Добавление текста

Создаём две новые линеечки на расстоянии 50 пикселей, как показано на рисунке:

Для текста используем следующие настройки:Шрифт: RockwellРазмер: 30pxТип: ОбычныйЦвет:  #e8204e – #676666

Добавляем ещё линейку:

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

Создаём выделение 250 на 150 пикселей и размещаем так, как показано на рисунке, ориентируясь на вертикальную и горизонтальную разметки:

Залейте выделение любым цветом, назовите новый слой удобным для вас именем и примените стиль Обводка для нового слоя:

Давайте добавим изображение. Для этого используйте File > Place (Файл > Поместить).

Убедитесь, что слой с добавленным вами изображением находится поверх слоя с рамочкой в списке слоёв.

Теперь кликаем по слою правой кнопкой мыши и жмём  Create Clipping Mask (Создать слой-маску).

Самое время создать тень! С помощью Elliptical Marquee Tool (Овальная область) создаем выделение овала, как показано ниже, и заливаем выделение цветом #1e1e1c.

Теперь применяем фильтр Filter > Blur > Gaussian Blur (Фильтр > Размытие > Размытие по Гауссу) с радиусом 2 пикселя.

Копируем слои и создаем такую же иллюстрацию в правой части макета.

Центральное изображение сделаем больше – 340 на 200 пикселей, и размещаем так:

Повторяем предыдущие шаги. Должно получиться что-то вроде этого:

Не забывайте группировать слои!

Добавление стрелок для слайдера

Используя Custom Shape Tool (Произвольная фигура), создаём стрелку цветом #e8204e.

Устанавливаем стили Внутренняя тень, Обводка:

Размещаем в точности так, как на рисунке:

Дублируем стрелку и размещаем дубликат в правой части макета:

Добавление контента

Снова добавляем пару линеек, отступая по 50 пикселей:

Добавляем нужный текст, используя показанные ниже настройки:

Добавляем ещё две линейки:

Добавляем текст:

И ещё одну линейку, ориентируясь на картинку ниже:

Используя RoundedRectangleTool (Прямоугольник со скругленными углами), создаём фигуру радиусом 5 пикселей и размером 100 на 30. Применяем стили Внутренняя тень, Тиснение/Скос, Глянец, Наложение градиента:

Внутри кружочек со стрелкой:

Цветом #3e3e3e пишем необходимый текст внутри и применяем к нему стиль Тень:

Рисуем разделитель - две полоски, как показано ниже:

Размещаем так:

Пишем заголовок.

С помощью Ellipse Tool (Эллипс) создаем кружок 20 на 20 и применяем к нему стили Внутренняя тень, Обводка:

С помощью CustomShapeTool(Произвольная фигура) размещаем галочку внутри:

Добавим тень! Создаем овальное выделение ниже, заливаем его чёрным цветом и применяем Filter > Blur > Gaussian Blur (Фильтр > Размытие > Размытие по Гауссу)с радиусом 2 пикселя.

Добавляем текст:

И копируем пару раз наши пункты:

Организовываем все слои по группам – слои каждого пункта в отдельную:

Работа над нижней частью контента

Начинаем, как всегда, с новой линейки, отступая 50 пикселей:

Создаем ещё один заголовок, и снова линеечки:

Ещё одну линейку, как показано ниже:

Пишем следующий текст со следующими настройками:

Дублируем:

Создадим разделитель – 2 горизонтальные полоски:

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

Смотрите, как это работает! :)

Повторяем предыдущие шаги, чтобы получить что-то вроде этого:

Добавление иконок

Теперь добавим иконки социальных сетей и подписи к ним. Вы можете скачать набор иконок Aquaticus Social, сделанный Junwei.

Поместите иконку и текст относительно разметки так, как показано ниже:

Продублируйте:

Работа над футером

Создаём последнюю линейку в разметке:

Снова делаем разделитель:

Размещаем разделитель так, как показано ниже:

Добавляем текст, используя следующие настройки:

И последний штрих – копирайты:

И готово!

Вы можете скачать .PSDздесь.

Автор: Mkhaled

photoshop-master.ru

Красивый макет сайта в Фотошоп

В данном уроке я покажу вам, как создать подобный аккуратненький и красивый макет. Автором этого макета является kuntiz – спасибо ему за разрешение на этот урок.

Материалы для урока:

Листья

Фон

Архив

Шаг 1. Создаём документ

Создаем новый документ размером 1200 на 750 пикселей. Используя GradientTool (Градиент), создаем градиент от #792700 до #000000, сверху вниз.

Шаг 2. Добавляем в фон новые цвета

Добавляем новый слой. Используя мягкую кисть размером в 300 пикселей, добавляем цвета в фон. Я использовал  красный, оранжевый и синий. Назовем слой «color».

Шаг 3. Добавляем вфон текстуру

Теперь мы добавим текстуру на фон. Открываем картинку с листьями, которую мы скачали в самом начале, и перемещаем её в наш проект. Тыкаем по слою правой кнопкой и жмем ConverttoSmartObject (Преобразовать в смарт-объект). Идем в Filter > Artistic > FilmGrain (Фильтр > Имитация художественных эффектов > Зернистость фотопленки), применяем с настройками, указанными на иллюстрации выше. То же самое с Filter > Pixelate > Mosaic (Фильтр > Оформление > Мозайка). Меняем режим наложения на Difference (Разница) и ставим непрозрачность на 30%.

Шаг 4. Темная область для контента

Создаем новый слой и с помощью инструмента Rounded Rectangle Tool (Прямоугольник со скругленными углами) радиусом 3 пикселя создаем прямоугольник, как показано на рисунке. Назовем слой «black shape». Применяем к слою стили, как показано выше. Ставим значение непрозрачности на 70%.

Шаг 5. Используем группы для организации слоев

Выделив все слои, над которыми мы работали до этого, объединим их в одну группу, зажав Ctrl + G. Назовем её «background».

Шаг 6. Создаем ещё группы

Создаем ещё одну группу и назовем её «home». Внутри неё создадим группу «logo».

Шаг 7. Добавляем логотип и слоган

Внутрь группы «logo» добавляем текстовый слой. Цветом #f4f4f4 пишем название макета. Применяем к слою стили, как показано выше. Теперь используя цвет #eeeeee, добавляем текст слогана под лого.

Шаг 8. Кнопки входа и регистрации

Мы собираемся добавить кнопки входа и регистрации в правый верхний угол. Создаем слой «Sign up | Login». Создаем прямоугольник как у меня, используя Rounded Rectangle Tool ( Прямоугольник со скругленными углами). Применяем к новоиспеченному слою стили, указанные на рисунке выше. Теперь на кнопке белым цветом пишем «Sign up | Login». Опускаем значение непрозрачности до 75%.

Шаг 9. Готовим место для навигации

Добавим новую группу «Navigation». Создаем новый слой, выбираем SingleRowMarqueeTool (Выделить строку) и кликаем на документе, чтобы создать выделение полоски высотой в 1 пиксель. Заливаем выделение цветом #406f94 и удаляем ту часть линии, которая выходит за пределы области контента. Назовем слой «Line» и ставим непрозрачность на 40%.

Шаг 10. Добавляем градиент в блок навигации

Добавим слой «gradient» и создадим выделение, как показано на рисунке (не забудьте использовать разметку, чтобы облегчить себе жизнь). Заливаем выделение градиентом от #35423e к прозрачному. Деактивируем выделение. Идем в Filter > Noise > Add Noise (Фильтр > Шум > Добавить шум) и настраиваем, как показано выше. Расстояние между линией и слоем с градиентом должно быть 1 пиксель.

Шаг 11. Добавляем ссылки в навигацию

Добавим текст со стилями, как показано выше. Я использовал шрифт Greyscale Basic.

Шаг 12. Разделители между ссылками

На новом слое, используя SingleColumnMarqueeTool (Выделить столбец), кликаем по документу и создаем выделение. Удалим лишнюю часть выделения (ту, что выходит за пределы навигации). Заливаем выделение белым.

Шаг 13. Продолжаем работу над разделителями

Применяем к слою стили, показанные выше. Называем слой «line 1».

Шаг 14. Продолжаем работу над разделителями

Дублируем слой, называем дубликат «line 2», перемещаем его на пиксель вправо. Применяем стили, как показано выше.

Шаг 15. Объединяем слои

Выделяем оба слоя и жмем ConverttoSmartObject (Преобразовать в смарт-объект). Называем слой «separator».

Шаг 16. Голубая подсветка

Создаем слой «highlight» под слоем «separator». Создаем выделение, как показано выше, и заливаем его цветом #35423e. Жмем ConverttoSmartObject(Преобразовать в смарт-объект). Применяем фильтры Filter > Blur > GaussianBlur (Фильтр > Размытие > Размытие по Гауссу) и Filter > Noise > AddNoise(Фильтр > Шум > Добавить шум) с настройками, показанными выше. Значение непрозрачности опускаем до 60%.

Шаг 17. Создадим маску для разделителя

Выделяем слой «separator» и жмем Layer > LayerMask > RevealAll (Слой > Слой-маска > Показать всё). Заливаем маску градиентом от черного к прозрачному сверху вниз.

Шаг 18. Дублируем разделитель

Дублируем слои «separator» и «hightlight» столько, сколько будет нужно. Размещаем дубликаты.

Шаг 19. Группируем разделители

Выделяем слои «separator» и «hightlight» и их дубликаты, объединяем их в одну группу «separators».

Шаг 20. Кнопка для активной ссылки

Нам нужно как-то выделить ссылку на страницу, на которой мы находимся. Создадим слой под слоем с текстом и нарисуем на нем прямоугольник, как показано выше. Добавляем такие же стили к этому слою. Назовем слой «active menu» и опустим значение непрозрачности до 50%.

Шаг 21. Строка поиска

В группе «navigation» создаем группу «search». Добавляем прямоугольник со скругленными углами радиусом 3 пикселя и цветом #104f59, как показано выше. Называем слой «text field» и опускаем значение непрозрачности до 50%.

Шаг 22. Создание кнопки поиска

Создадим прямоугольник, как это сделал я, поместим его в правую часть строки поиска. Применяем к слою стили, показанные выше. Клацаем правой кнопкой и жмем CreateClippingMask (Создать обтравочную маску).

Шаг 23. Добавляем на кнопку текст

Пишем белым цветом «search» и помещаем текст в центре кнопки. Непрозрачность 75%.

Шаг 24. Разделитель для блока поиска

С помощью LineTool (Линия) создаем вертикальную линию цветом #123036. Называем его «line» и помещаем слева от кнопки.

Шаг 25. Готовим место для слайдера

Создаем новую группу «Showcase», а внутри неё еще одну «background». В центре основного блока создаем прямоугольник, как показано выше, цветом #219aad и размерами 983 на 273 пикселя (воспользуйтесь Window > Info (Окна > Инфо), чтобы выбрать оптимальный размер). Назовем слой «bg4», непрозрачность – 55%.

Шаг 26. Добавление текстуры

Импортируем в программу вторую картинку, которую мы скачали в самом начале, и накладываем её сверху. Называем слой «bg3» и ставим значение непрозрачности на 55%.

Шаг 27. Добавление градиента

Кликаем по слою «bg4», чтобы выделить его, создаем новый слой, заливаем область ещё одним градиентом от #56b8e5 до прозрачного снизу вверх.

Шаг 28. Добавляем прямоугольник поменьше

Выделяем область внизу слайдера, как это сделано у меня. Заливаем область градиентом от #0f2b42 до #2a607f. Называем слой «bg1».

Шаг 29. Кнопка входа

Создаем новую группу «sign up button». На новом слое создаем прямоугольник со скругленными углами радиусом 2 пикселя, как показано выше. Применяем стили слоя, какие применял я. Белым цветом добавляем надпись «sign up» поверх слоя с кнопкой.

Шаг 30. Кнопка “Learn more”

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

Шаг 31. Кнопка в левой части слайдера

Создаем новую группу «left arrow». Рисуем кружок, заливаем его #406f94. Применяем к слою стили, показанные выше.

Шаг 32. Добавляем стрелку

Используя стандартные формы Photoshop, добавляем белую стрелку. Стили приведены выше. Непрозрачность – 50%.

Шаг 33. Кнопка в правой части слайдера

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

Шаг 34. Добавляем картинку

Создаем группу «image». Добавляем туда нужную картинку и называем слой с ней снова «image». Необходимые стили слоя приведены выше.

Шаг 35. Продолжаем работу над разделителями

Жмем Layer > Layer Style > Create Layer (Слои > Стильслоя > Образовать слой). Эта опция создаст под оригинальным слоем новый слой с теми же стилями. Жмем Layer > LayerMask > RevealAll(Слой > Слой-маска > Показать всё), заливаем область градиентом от черного к прозрачному от низа до середины картинки. Называем слой «shadow».

Шаг 36. Добавление текста

Создадим новую группу «text» и добавим туда какой-нибудь текст.

Шаг 37. Место для основного контента

Создаем группу «content», в ней ещё одну «shadows». Рисуем белый прямоугольник как у меня, называем его «white shape». Непрозрачность – 90%.

Шаг 38. Верхняя тень

Удерживая Ctrl, кликаем по векторной маске слоя «white shape», чтобы выделить её. Создаем новый слой, заливаем его градиентом от #8f8f8f до прозрачного. Называем слой «top shadow», непрозрачность – 50%. Перемещаем слой на пару пикселей вниз.

Шаг 39. Вертикальные тени

Создаем квадратное выделение, как показано выше и заливаем его градиентом от #8f8f8f до прозрачного. Добавляем маску слоя и с помощью большой черной мягкой кисти маскируем центр тени. Ставим значение непрозрачности на 30%, называем слой «vertical shadow 1». Дублируем слой, перемещаем его и называем «vertical shadow 2».

Шаг 40. Добавляем горизонтальную линию

Рисуем однопиксельную горизонтальную линию цветом #aebcc7. Называем слой «line».

Шаг 41. Заполняем контентом

Заполняем блок текстом. Если нужно, добавьте изображения.

Шаг 42. Градиент для футера

Создаем новую группу «footer». На новом слое создаем выделение, как показано на рисунке выше. Ставим основным цветом #555555 и большой мягкой кистью жмем на верхнем краю выделения, как показано выше. Называем новый слой «gradient», непрозрачность – 50%.

Шаг 43. Линия

На новом слой рисуем горизонтальную белую линию. ЖмемLayer > LayerMask > RevealAll(Слой > Слой-маска > Показать всё), выбираем большую мягкую кисть и закрашиваем линию с боков, как показано выше. Называем слой «line», непрозрачность – 50%.

Шаг 44. Текст

Добавляем в футер текст.

Готово!

Автор: Ciursă Ionuţ

photoshop-master.ru

Создаём в Фотошоп макет для сайта в бизнес-стиле

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

Ресурсы, используемые в этом уроке

Абстрактные обои

Кисти «Облака»

Элегантные социальные иконки

Архив

Шаг 1 - Создание фонаСоздайте новый документ (Ctrl + N) 1200 х 1140px с белым фоном. Выберите инструмент Прямоугольная область "Rectangular Marquee Tool" (M) и сделайте выделение верхней части холста. Затем залейте выделение (G) черным цветом #000000.

После заливки добавьте Наложение градиента "Gradient Overlay", как показано ниже.

Далее, снова выберите инструмент Прямоугольная областьRectangular Marquee Tool" (M), только на этот раз выделите прямоугольник в два раза меньше первого. Залейте выделение (G) черным цветом #000000. После этого перейдите в меню Фильтр>Рендеринг>Блик "Filter> Render> Lens Flare", разместите блик в левом верхнем углу нового прямоугольника.

После добавления блика установите режим смешивания на Экран "Screen". У Вас должно получиться примерно так:

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

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

Шаг 2 - Создание области заголовка

Выберите инструмент Прямоугольник со скругленными углами"Rounded Rectangle Tool" (U) с радиусом около 20px.

Растяните прямоугольник, оставляя достаточно места для заголовка сайта.

Теперь нужно изменить прямоугольник. Для этого повторно выберите инструмент Прямоугольник со скругленными углами "Rounded Rectangle Tool" (U) и растяните два новых прямоугольника, один вверху и один внизу. Сделайте прямоугольник в нижней части немного меньше, чем в верхней. Чтобы убедиться, что прямоугольник прилегает к слою с формой, удерживайте нажатой клавишу Shift перед рисованием двух новых прямоугольников.

На двух новых прямоугольниках нужно отрезать углы. Выберите инструмент Перо "Pen Tool" и измените параметр в верхней части на Вычесть из области фигуры «Subtract From Shape Area".

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

Теперь, когда углы были обрезаны, скачайте и откройте синие абстрактные обои (см. ресурсы к уроку).Скопируйте обои в буфер обмена, а затем загрузите выделение вокруг прямоугольника, который вы только что изменяли. Чтобы загрузить выделение выберите слой с фигурой, затем перейдите в меню Выделение>Загрузить выделенную область "Select> Load Selection". После загрузки выделения перейдите в меню Редактирование>Специальная вставка>Вставить "Edit> Paste Special> Paste Into".

Обои должны вставиться в форму с прямоугольником и должны быть в состоянии перемещаться и преобразовываться внутри прямоугольника. Если все получилось, то теперь вы можете скрыть старый слой с прямоугольником. Разместите обои так, чтобы узор находился в верхнем левом углу формы, затем добавьте следующие стили слоя:

Тень:

Внутренняя тень:

Обводка:

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

Шаг 3 - Добавление текста в область заголовка

В верхней части макета поверх бликов добавьте название сайта. Я использовал шрифт Verdana, а синий цвет выбрал из обоев с помощью инструмента Пипетка "Eye Dropper Tool" (I).

Далее добавьте текст справа от названия. Это подходящее место для рекламы Вашей компании, номера телефона, если он у вас есть. Затем добавить какой-нибудь текст внутри подготовленной области.

Шаг 4 - Создание навигацииВыберите инструмент Прямоугольник со скругленными углами "Rounded Rectangle Tool" (U), создайте слой позади формы с синими обоями и нарисуйте прямоугольник в верхней правой части. Прямоугольник должен стройно выравниваться с указанными областями.

Затем добавьте следующие стили слоя:

Внутренняя тень:

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

Обводка:

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

Шаг 5 - Завершение создания области заголовка

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

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

Тень:

Внутренняя тень:

Обводка:

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

Наконец на правой стороне области заголовка добавьте 4 маленьких кружка с помощью инструмента Эллипс "Ellipse Tool" (U).

Эти 4 круга будут имитировать, что показывается некоторый слайд, что это JQuery слайдер.

Шаг 6 - Создание области контента

Область контента будет состоять из 3 блоков с содержанием и небольшой галереи. Начните с фона областей, выберите инструмент Прямоугольник со скругленными углами "Rounded Rectangle Tool" (U)

Для каждого из 3 прямоугольников добавьте следующие стили слоя.

Внутренняя тень:

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

Обводка:

Должно получиться, примерно, следующее:

Заполните блоки содержимым, каким хотите. Я сделал окно «Добро пожаловать», «Услуги» и «Некоторые отзывы клиентов». В названиях каждого блока используйте оттенки серого и синего, как в названии сайта. Это хороший способ использовать несколько цветов, вместо одного тусклого, обычно серого или черного.

Шаг 7 - Создание галереи

Создайте 4 прямоугольника с помощью инструмента Прямоугольник "Rectangle Tool" (U), залейте (G) каждый прямоугольник с серым цветом #f1f1f1.

Загрузите выделение вокруг первого прямоугольника Выделение>Загрузить выделенную область "Layer> Load Selection", затем перейдите в меню Выделение>Модификация>Сжать "Select> Modify> Contract" границу выберите около 5-10 пикселей. Скопируйте и вставьте одно из изображений галереи в прямоугольник, перейдя в Редактирование>Специальная вставка>Вставить "Edit>Paste Special>Paste".

Повторите эти действия для следующих 3 прямоугольников. У вас должно получиться примерно так:

Шаг 8 - Создание футера (нижней области)

Продублируйте слой с формой области заголовка, затем переместите форму в нижнюю часть холста. Перейдите в меню Редактирование>Трансформация>Отразить по горизонтали "Edit> Transform> Flip Horizontal", чтобы перевернуть форму по горизонтали.

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

Заключение

Спасибо за участие в этом уроке! Выкладывайте ваши работы.

Автор: photoshop-plus

photoshop-master.ru

Красивый макет сайта в Фотошоп

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

Введение

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

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

Одна из главных вещей, о которых не стоит забывать, это то, что ваш макет когда-то будет переведен в код, то есть сверстан. По этой причине я покажу вам, как делать свои текстуры вместо копирования «тяжелых» текстур из других источников. Иметь базовые знания об html и css обязательно для хорошего веб-дизайнера.

Наш итоговый макет получится не таким уж легким (мы будем использовать достаточно большое количество разных текстур), но Интернет становится все более быстрым, что позволяет нам меньше заботиться о «весе» сайта.

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

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

Итак, мы можем начать!

Шаг 1. Работа с фоном

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

Заливаем документ темно-бежевым цветом #d9cfc0.

Добавим текстуру бумаги. Я выбрал текстуру paper15 из этого набора. Немного уменьшите текстуру и увеличьте резкость с помощью фильтра. Зажмите Ctrl+Shift+U, чтобы обесцветить текстуру, поменяйте режим наложения слоя с текстурой на Multiply (Затемнение) и установите значение непрозрачности на 20%. Получится что-то такое:

Теперь жмем Edit – DefinePattern (Редактирование – Определить узор), чтобы сделать этот документ текстурой.

Теперь сразу разберемся с разметкой. Я для этого скачал специальный шаблон 960 Grid System site

Основная задача разметки помочь дизайнеру визуально представлять, как лучше организовать контент, по ходу дела, чтобы ему не приходилось постоянно держать это в голове. Откройте шаблон с 16-ю колонками и удалите из списка слоев группу “layer1”. Группа с вертикальными линиями должна быть всегда сверху. Иногда вы можете делать её невидимой, но вы должны включать её всякий раз, работая над структурой и организацией контента. Также я увеличил высоту шаблона до 1470 пикселей. Вот скриншот итогового результата с разметкой:

Жмем Edit – Fill (Редактирование - Заливка) и заливаем нашей текстурой фон макета.

На новом слое с помощью большой мягкой белой кисти рисуем блик, как показано ниже. Устанавливаем значение непрозрачности на 30%. Этим мы выделим область для шапки и логотипа. Создадим ещё один слой и порисуем на нем кистями WGGrungeBrushes. Это ещё больше украсит верхнюю часть макета. Выделим все слои, относящиеся к фону, и сгруппируем их в отдельную группу “background”.

Шаг 2. Работа над шапкой

Когда работа над фоном закончена, мы можем поработать над шапкой. Нам нужна красивая текстура, и мы снова сделаем её сами. Создадим документ 20 на 60 и зальем его белым. Добавим горизонтальную линию разметки с отступом от нижнего края в 10 пикселей.

Выделим область, как показано ниже:

Удерживая Alt, жмем кнопку добавления маски для слоя. 

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

Помещаем окружность в самый низ документа. Теперь жмем Edit – DefinePattern (Редактирование – Определить узор), чтобы сделать этот документ текстурой.

В верхней части основного документа создаем прямоугольное выделение высотой в 60 пикселей.

Заливаем выделенную область новоиспеченной текстурой, устанавливаем непрозрачность на 50%.

Добавим прямоугольник высотой 5 пикселей цветом #506271 и поместим его в самый верх шаблона.

Шаг 3. Добавляем логотип и меню

Поработаем над меню. Я буду использовать шрифт Arialв 13 пикселей. Цвет - #506271.

В качестве лого я создал эллипс со следующими стилями:

 

Создаем новый слой; удерживая Ctrl, кликаем по эллипсу, чтобы создать выделение вокруг него. Жмем Select – Modify – Contrast (Выделение – Модификация - Сжать) и вводим значение 4 пикселя. Заливаем выделение градиентом от белого к прозрачному сверху вниз. Непрозрачность – 40%.

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

Шаг 4. Добавляем слоган

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

Я использовал комбинацию из трех шрифтов: Chunk для верхнего текста, Aniverse для нижнего, Gabrielle для запятой и амперсанда. Не забывайте использовать разметку, это значительно вам поможет.

Для запятой и амперсанда я использовал всё тот же синий #506271. Для стилей используем настройки, указанные ниже:

 

 

Дублируем все слои с текстами. Размещаем дубликаты под оригиналами, обнуляем все стили для них, меняем цвет на белый. Перетаскиваем на пиксель вправо и на пиксель вниз. Растеризуем дубликаты. Удерживая Ctrl, кликаем по оригинальному тексту, чтобы создать выделение вокруг него, жмем Delete (должен быть выделен слой с дубликатами). 

Шаг 5. Блок «Последние работы»

Первое, что нам нужно сделать, это разделить слоган и блок с примерами работ. Для этого мы добавим текст и две горизонтальные полоски. В качестве шрифта используем 18ptArial. Чтобы полоски становились бледнее к краям, я воспользовался маской. Создайте маску для слоя с линиями и воспользуйтесь градиентом от черного к белому. 

Еще раз воспользуемся техникой «гравировки». Дублируем слои с текстом и полосками, располагаем дубликаты за оригиналами, меняем цвет на белый, уровень непрозрачности на 70%, и перемещаем дубликаты на пиксель вниз и на пиксель вправо.

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

Применим следующие стили для прямоугольника:

Дублируем прямоугольник и располагаем дубликат под оригиналом. Сбросьте все стили для дубликата и сделайте его полностью черным. Как вы поняли, мы будем делать тень. Итак, растеризуем дубликат. Далее жмем Edit – Transform – Distort (Редактирование – Трансформирование – Искажение). Поведите левый верхний угол немного влево и вниз, как показано на картинке ниже.

Применяем Filter – Blur – GaussianBlur (Фильтры – Размытие – Размытие по Гауссу) с радиусом в 4 пикселя.

Теперь возьмите ластик и подотрите ненужные части тени. Также не помешает немного понизить параметр непрозрачности.

Создадим новый слой поверх слоя с контейнером. Удерживая Ctrl, нажмем на слой с контейнером, чтобы создать выделение соответствующей формы. Заливаем выделение цветом #64594d. Пока выделение еще активно, жмем Select – Modify – Contract (Выделение – Модификация – Сжать) и вводим значение 1 пиксель. Жмем Delete. Мы создали эффект однопиксельной внутренней обводки.

Теперь размножьте необходимое количество контейнеров и заполните их изображениями. Сгруппируйте все слои с контейнерами и картинками, назовите группу «gallery».

Шаг 5. Работа над футером.

Вот мы и подходим к концу. Все, что осталось, это футер или «подвал». Для того, чтобы сделать фон для футера, мы просто скопируем фон с шапки и отразим его по вертикали, переместив в самый низ шаблона. Поменяем цвет на синий #506271 и установим значение непрозрачности на 100%. Также я создал прямоугольник того же цвета и поместил его поверх.

Чтобы футер лучше вписывался в общую концепцию, мы добавим гранжовую текстуру. Я использовал grunge-кисть с низкой непрозрачностью.

Я поделил футер на три раздела: обратная связь, мои контакты и блок для твиттера. Шрифт – 18pt Arial.

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

Используем следующие стили для слоя:

Теперь используем ту же технику, что мы использовали при создании текста девиза, чтобы создать белую обводку слева и снизу. Размножьте поля и озаглавьте каждое поле, а также не забудьте про кнопку (попробуйте использовать для неё гранжевые кисти, как это сделал я).

В центральную колонку я просто добавлю ссылки на несколько социальных сетей. Я использовал вот эти иконки.

В правой части создадим форму с помощью стандартных инструментов, как показано ниже. Используем для слоя с формой те же стили, что мы использовали для полей в блоке обратной связи. Также добавим иконку Twitter’а – я использовал иконку отсюда.

Почти готово. Теперь самое главное – добавим копирайты. А также не забудьте сгруппировать все слои, относящиеся к подвалу, в группу «footer».

Заключение

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

Всего наилучшего!

Автор: wegraphics

photoshop-master.ru

Создаём макет сайта в Фотошоп

Итоговый результат:

Исходники к уроку:

  1. 960 Grid System
  2. Набор иконок
  3. Иконка 1
  4. Иконка 2
  5. Иконка 3

Архив

Шаг 1. Работа со структурой сайта

Для начала скачайте шаблон 960 Grid System. Откройте 960_download\templates\photoshop\960_grid_12_col.psd Нажмите Ctrl+Shift+C чтобы изменить размер холста.

Используя инструмент Заливка (Paint Bucket Tool) залейте фон цветом #151515. Теперь Вам нужно создать папку для каждой части макета.

Шаг 2. Создание шапки сайта

Создайте новую направляющую (Просмотр > Новая направляющая (View > New Guide)), Положение (Position) установите на 150px, Ориентация (Orientation) - горизонтальная. Повторите этот шаг и создайте ещё две направляющие с положением в 5 и 100 пикселей.

Внутри папки Header создайте новый слой и назовите его "header_top".С помощью инструмента Прямоугольная область (Rectangular Marquee Tool) создайте выделение 5px в высоту, залейте чёрным цветом и добавьте к слою 1 пиксельную светлую тень.

Создайте новый слой и назовите его "header_bg". Возьмите инструмент Прямоугольная область (Rectangular Marquee Tool) и создайте выделение, как показано на скриншоте ниже.

Возьмите инструмент Градиент (Gradient Tool), цвет градиента #242424 - #151515, и залейте выделение градиентом.

Откройте окно Стили слоя (Layer Style) и активируйте Внутреннюю тень (Inner Shadow) со следующими параметрами:

Шаг 3. Создание логотипа

Внутри папки Header создайте новую папку "Logo". Возьмите инструмент Текст (Text Tool) и добавьте название сайта и слоган используя параметры со скриншота ниже.

Откройте Стили слоя (Layer Style) и активируйте Тень (Drop Shadow).

Возьмите инструмент Произвольная фигура (Custom Shape Tool) и следуйте подсказкам на скриншоте ниже.

К фигуре добавьте следующие стили:

Тень (Drop Shadow)

Градиент (Gradient Overlay)

Шаг 4. Создание навигации

Внутри папки Header создайте новую папку и назовите её "navigation". С помощью инструмента Текст (Text Tool) добавьте категории, используя параметры указанные на скриншоте ниже.

Дублируйте текстовый слой. Измените цвет оригинального текстового слоя на чёрный и переместите на 1px вверх.

Теперь нам нужно создать эффект для активной категории. Под слоём с категориями создайте новый слой, выберите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), радиус 10pх, и создайте прямоугольник. В панели слоёв уменьшите Заливку (Fill) до 0%.Примените следующие стили слоя:

Тень (Drop Shadow)

Внутренняя тень (Inner Shadow)

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

Шаг 5. Создание поля поиска и хлебных крошек

Внутри папки Header, над слоём header_bg создайте новый слой и назовите его bg. Выберите инструмент Прямоугольная область (Rectangle Marquee Tool), создайте выделение как показано на скриншоте ниже и залейте его каким-нибудь цветом.

Затем добавьте стили слоя используя параметры указанные ниже:

Тень (Drop Shadow)

Внутреннее свечение (Inner Glow)

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

Обводка (Stroke)

Внутри папки Header создайте папку Search. Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), радиус 10px, и создайте прямоугольник как на скриншоте ниже.

Добавьте стили слоя:

Тень (Drop Shadow)

Внутренняя тень (Inner Shadow)

Выберите инструмент Текст (Text Tool) и добавьте какой-нибудь текст в поисковое поле.

Теперь откройте набор соц. иконок и поместите их возле поиска.

Внутри папки Header создайте папку Breadcrumbs. Откройте иконку домика и поместите её, как на скриншоте ниже. Я добавил Наложение цвета (Color Overlay) #696969 к иконке и к текстовому слою.

Шаг 6. Создание слайд-шоу

Внутри папки Slideshow создайте новый слой и назовите его slide_bg. Создайте новую направляющую, для этого перейдите в Просмотр > Новая направляющая (View > New guide), Положение (Position) установите на 430px, Ориентация (Orientation) горизонтальная. Создайте выделение как на скриншоте ниже и залейте каким-нибудь цветом.

Добавьте следующие стили слоя:

Тень (Drop Shadow)

Наложение узора (Pattern Overlay)

Обводка (Stroke)

Над слоём slide_bg создайте новый слой и назовите его highlights. Выберите инструмент Перо(Pen Tool), нарисуйте фигуру как на скриншоте ниже и создайте выделение.

Залейте выделение белым цветом, измените режим наложения на Мягкий свет (Soft Light) и уменьшите Непрозрачность (Opacity) до 50%

Теперь нужно добавить какой-нибудь текст внутрь нашего слайд-шоу. Выберите инструмент Текст (Text Tool) и, следуя подсказкам на скриншоте ниже, добавьте свой текст.

Шаг 7. Добавление кнопки «Читать далее»

Внутри папки slideshow создайте папку read_more. Возьмите инструмент Прямоугольник со скругленными углами (Rounded Rectangle Tool), радиус 10px, создайте прямоугольник и поместите как на скриншоте ниже.

Заливку (Fill) слоя уменьшите до 0%. Добавьте следующие стили слоя:

Тень (Drop Shadow)

Внутренняя тень (Inner Shadow)

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

Загрузите выделение для слоя, который мы только что создали. Перейдите в Выделение > Модификация > Сжать (Select > Modify > Contract), введите 5px и залейте выделение любым цветом.

Добавьте следующие стили слоя:

Тень (Drop Shadow)

Внутреннее свечение (Inner Glow)

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

Обводка (Stroke)

С помощью инструмента Текст (Text Tool) добавьте надпись «Читать далее» на кнопку и залейте тёмным цветом. Дублируйте текстовый слой, измените цвет текста на белый и сместите на 1px вниз.

Шаг 8. Добавление изображения в слайд-шоу

Выберите инструмент Прямоугольник (Rectangle Tool), создайте прямоугольник и поместите как на скриншоте ниже.

Уменьшите Заливку (Fill) до 0% и добавьте следующие стили слоя:

Тень (Drop Shadow)

Обводка (Stroke)

Я поместил изображение над слоем с прямоугольником. Таким образом у Вас должно получиться что-то вроде этого:

Шаг 9. Добавление переключателей слайдов

Создайте внутри папки Slideshow новую папку и назовите её prev_next. Выберите инструмент Прямоугольник со скругленными углами(Rounded Rectangle Tool) с радиусом в 10px. Создайте фигуру как показано на скриншоте ниже и переименуйте слой на "prev".

Уменьшите Заливку (Fill) до 0% и добавьте следующие стили:

Тень (Drop Shadow)

Внутренняятень (Inner Shadow)

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

Дублируйте слой prev и переименуйте его на next. Отразите его по горизонтали и разместите в противоположной стороне.

Создайте ещё одну папку и назовите её Identifier. Внутри этой папки создайте слой и переименуйте его на inactive. Выберите инструмент Эллипс (Ellipse Tool), создайте несколько круглых фигур, залейте их чёрным цветом и разместите как на скриншоте ниже.

Добавьте им те же стили что и у кнопок prev_next.Загрузите выделение для первой фигуры, перейдите в Выделение > Модификация > Сжать (Select > Modify > Contract) и введите 5px. Создайте новый слой, назовите его active, и залейте выделение каким-нибудь цветом.

Добавьте следующие стили:

Тень (Drop Shadow)

Внутреннеесвечение (Inner Glow)

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

Шаг 9. Добавление контента

Внутри папки services создайте новый слой. Возьмите инструмент Текст (Text Tool) и добавьте заголовок используя параметры на скриншоте ниже.

Теперь давайте добавим разделитель. Выберите инструмент Линия (Line Tool), ширина 1px. Создайте две линии и разместите их как на скриншоте ниже.

Создайте новую папку и назовите её service1. Выберите инструмент Текст (Text Tool) и добавьте заголовок используя параметры указанные на скриншоте ниже. Откройте набор иконок, который Вы скачали в начале урока, и добавьте иконку возле заголовка.

Дублируйте несколько раз группу. Разместите их так же как на скриншоте ниже. В каждой группе измените иконку.

Шаг 10. Добавление блока «О нас»

Внутри папки about us создайте новый слой. С помощью инструмента Текст (Text Tool) добавьте заголовок. Дублируйте слой с разделителем, который мы создали в предыдущем шаге, и переместите его под заголовок.

Также добавьте какую-нибудь информацию о себе, используя параметры указанные на скриншоте ниже.

Перейдите в окно Стили слоя и добавьте следующие стили:

Тень (Drop Shadow)

Обводка (Stroke)

Шаг 11. Добавление последних записей из Твиттера

Внутри папки latest tweets создайте новый слой и с помощью инструмента Текст (Text Tool) добавьте какой-нибудь текст. С помощью инструмента Прямоугольник со скругленными углами (Rounded Rectangle Tool) создайте прямоугольник и поместите его под какой-нибудь записью.

Для слоя с прямоугольником добавьте следующие стили слоя:

Тень (Drop Shadow)

Шаг 12. Создание футера

В папке footer создайте новый слой и назовите его footer_bg. Создайте выделение как на скриншоте ниже и залейте его каким-нибудь цветом.

Добавьте стили слоя:

Внутреннеесвечение (Inner Glow)

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

Обводка (Stroke)

Возьмите инструмент Текст (Text Tool) и добавьте в центре футера свои копирайты.

Финальное изображение:

Автор: Michael John Burns

photoshop-master.ru


Смотрите также