Как в фотошопе сделать макет сайта в фотошопе: Профессиональный макет сайта в фотошоп / Creativo.one

Содержание

Профессиональный макет сайта в фотошоп / Creativo.one

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

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

Набор иконок (wefunction.com)

Альтернативный набор иконок

Иконка Twitter (iconeden.com)

Шрифт Bebas (dafont.com)

Архив

Шаг 1. Mockup

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

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

Мы будем создавать макет сайта шириной в 960 пикселов. Для этого, создайте новый документ размером 1200х1500 пикселов. Разрешение 72 пиксела.

Так, как макет сайта будет шириной в 960 пикселов, нам нужно определить эту область, добавив направляющие. Выделите весь документ (Ctrl+A).

Перейдите в меню Выделение – Трансформировать выделенную область (Select > Transform Selection). На панели свойств в верхней части экрана установите значение ширины 960 пикселов. Это и будет рабочая область макета.

Установите направляющие точно по границам выделения.

Нам нужно создать отступ между краями рабочей области макета и областью контента, который мы добавим позже. При активном выделении документа, снова перейдите в меню Выделение – Трансформировать выделенную область (Select > Transform Selection). Уменьшите выделение по ширине до 920 пикселов. Это означает, что с каждой стороны макета будет отступ в 20 пикселов, в итоге всего это 40 пикселов.

Установите направляющие по новому выделению:

Шаг 3. Создаем шапку сайта.

Переходим к созданию шапки сайта. Создайте выделение высотой в 465 пикселов в верхней части макета.

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

К шапке добавим градиентную заливку через стиль слоя Наложение градиента (Gradient Overlay). Создайте градиент из двух цветов.

Теперь шапка будет выглядеть так:

К шапке теперь нужно добавить подсветку. Создайте новый слой (Ctrl + Alt + Shift + N) и выберите мягкую кисть размером 600 пикселов. Выберите цвет #19535a и кистью кликните один раз в верхней центральной части шапки.

Создайте на шапке выделение в 110 пикселов.

Нажмите клавишу Delete, чтобы удалить выделенную часть.

Слой с подсветкой сожмите по вертикали (Ctrl + T).

Нужно убедиться, что световое пятно на шапке находится ровно по центру. Для этого, сделайте активными слои с шапкой и подсветкой и выберите инструмент Перемещение (Move Tool) (V). На панели свойств в верхней части экрана нажмите кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

Создайте новый слой (Shift + Ctrl + N) и нарисуйте инструментом Карандаш (Pencil Tool) точку, размером в 1 пиксел. Для рисования используйте цвет #01bfd2.

Сгладим края этого слоя, используя градиентную маску. Выберите инструмент Градиент (Gradient Tool) и создайте градиент, как показано ниже:

Примените новый слой с маской, которую залейте только что созданным градиентом.

Шаг 4. Создаем узор

Теперь создадим простой узор, который добавим к шапке. Инструментом Карандаш (Pencil Tool) размером в 2 пиксела нарисуйте две точки, как показано на рисунке. Отключите на время видимость фонового слоя (кликните по иконке глаза около фонового слоя) и создайте узор (Редактирование – Определить узор) (Edit > Define Pattern):

Создайте новый слой (Shift + Ctrl + N) и поместите его под слой с подсветкой. Выделите область, к которой Вы хотите применить узор и откройте окно Выполнить заливку (Fill) (Shift + F5). Нажмите ОК.

После добавления текстуры шапка выглядит так:

Сделайте плавный переход от узора к шапке: к слою с узором добавьте маску и мягкой кистью белого цвета (#ffffff) с непрозрачностью 60% пройдитесь по маске.

Результат:

Шаг 5. Добавляем логотип

Переходим к добавлению логотипа. Выберите мягкую кисть с цветом #19535a и нарисуйте пятно.

Напишите текст:

К слою с логотипом добавьте стиль слоя Тень (Drop Shadow).

Шаг 6. Навигация

Добавьте текст для навигации.

Нарисуйте кнопку навигации, используя инструмент Прямоугольная область выделения (Rectangular Marquee Tool). Залейте выделение любым цветом и уменьшите параметр Заливка до нуля.

К слою с кнопкой добавьте стиль Наложение градиента (Gradient Overlay).

Шаг 7. Слайдер для контента

Создайте выделение размером 580х295 пикселов.

Залейте выделение любым оттенком серого.

Поместите изображение. Закрепите его со слоем, который создали ранее.

Теперь к слайдеру добавим эффект. Создайте новый слой (Shift + Ctrl + N), выберите Кисть (Brush Tool) с диаметром 400 пикселов. Откройте палитру Кисть (F5) и установите те параметры, которые показаны на скриншоте:

Выберите черный цвет (#000000) и нарисуйте пятно:

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

Выделите нижнюю половину тени и удалите (Delete).

Поместите слой с тенью над слайдером:

Сожмите слой с тенью за средний маркер (Ctrl + T), а затем снова отцентрируйте слой с тенью: выделите оба слоя и в панели свойств нажмите на кнопку Выравнивание центров по горизонтали (Align Horizontal Centers).

Дублируйте слой с тенью (Ctrl + J) и поместите дубликат на нижний край слайдера.

Нарисуйте кнопки на слайдере, используя инструмент Прямоугольная область выделения (Rectangular Marqee Tool). Залейте кнопки черным цветом (#000000).

Уменьшите непрозрачность слоя с кнопками до 50%.

Добавьте фигуру стрелки на кнопки слайдера:

На нижней части слайдера нарисуйте полосу и залейте ее черным цветом (#000000).

Уменьшите непрозрачность слоя с полосой до 50%.

На эту полосу добавьте описание Вашего проекта:

Шаг 8. Добавляем текст с приветствием

Напишите текст с приветствием:

Шаг 9. Завершаем работу над шапкой сайта

Мы почти закончили работу над шапкой сайта. Добавьте еле заметную тень при помощи инструмента Кисть (Brush Tool).

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

Создайте новый слой под слоем с шапкой (Shift + Ctrl + N) и примените к нему градиент.

Шаг 10. Добавляем кнопки для слайдера

Нарисуйте кнопки смены слайдов.

К одной кнопке добавьте стиль слоя Внутренняя тень (Inner Shadow), а затем дублируйте слой с кнопкой нужное количество раз (Ctrl + J).

Шаг 12. Создаем разделитель для контента

Инструментом Карандаш (Pencil Tool) и нарисуйте светло-серую (#aaaaaa) линию шириной в 1 пиксел.

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

Шаг 13. Добавляем контент

Пришло время добавить области под контент. Область контента будет разделена на 3 колонки с равным отступом. Между каждой колонкой будет отступ в 25 пикселов.

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

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

Нарисуйте кнопку «Read More» при помощи инструмента Прямоугольник со скругленными углами (Rounded Rectangle Tool) в режиме слой-фигуры.

К слою с кнопкой примените стили слоя Наложение градиента (Gradient Overlay) и Обводка (Stroke).

Дублируйте слой с кнопкой (Ctrl + J).

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

Добавьте изображения в эти серые области:

Создайте тень, как делали это ранее и поместите ее под области с фотографиями:

Добавьте описание проекта:

Поместите в одну из колонок иконку Twitter.

Добавьте сообщение о Twitter.

Нарисуйте кнопку More Tweets.

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

Добавьте текст.

Шаг 14. Создаем футер

Создайте выделение в нижней части макета – это будет область под футер, и залейте выделение серым цветом.

Примените к этой области стиль слоя Наложение цвета (Color Overlay).

В финале, добавьте на футер навигацию и копирайт.

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

Автор урока: Niranth

Источник:

photoshoptutorials.ws

Профессиональный макет сайта в фотошоп / Creativo.one

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

Набор иконок (wefunction.com)

Альтернативный набор иконок

Иконка Twitter (iconeden.com)

Шрифт Bebas (dafont.com)

Архив

Шаг 1. Mockup

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

Установите направляющие точно по границам выделения.

Установите направляющие по новому выделению:

Шаг 3. Создаем шапку сайта.

Переходим к созданию шапки сайта. Создайте выделение высотой в 465 пикселов в верхней части макета.

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

Теперь шапка будет выглядеть так:

Создайте на шапке выделение в 110 пикселов.

Нажмите клавишу Delete, чтобы удалить выделенную часть.

Слой с подсветкой сожмите по вертикали (Ctrl + T).

Примените новый слой с маской, которую залейте только что созданным градиентом.

Шаг 4. Создаем узор

После добавления текстуры шапка выглядит так:

Результат:

Шаг 5. Добавляем логотип

Переходим к добавлению логотипа. Выберите мягкую кисть с цветом #19535a и нарисуйте пятно.

Напишите текст:

К слою с логотипом добавьте стиль слоя Тень (Drop Shadow).

Шаг 6. Навигация

Добавьте текст для навигации.

К слою с кнопкой добавьте стиль Наложение градиента (Gradient Overlay).

Шаг 7. Слайдер для контента

Создайте выделение размером 580х295 пикселов.

Залейте выделение любым оттенком серого.

Поместите изображение. Закрепите его со слоем, который создали ранее.

Выберите черный цвет (#000000) и нарисуйте пятно:

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

Выделите нижнюю половину тени и удалите (Delete).

Поместите слой с тенью над слайдером:

Дублируйте слой с тенью (Ctrl + J) и поместите дубликат на нижний край слайдера.

Уменьшите непрозрачность слоя с кнопками до 50%.

Добавьте фигуру стрелки на кнопки слайдера:

На нижней части слайдера нарисуйте полосу и залейте ее черным цветом (#000000).

Уменьшите непрозрачность слоя с полосой до 50%.

На эту полосу добавьте описание Вашего проекта:

Шаг 8. Добавляем текст с приветствием

Напишите текст с приветствием:

Шаг 9. Завершаем работу над шапкой сайта

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

Создайте новый слой под слоем с шапкой (Shift + Ctrl + N) и примените к нему градиент.

Шаг 10. Добавляем кнопки для слайдера

Нарисуйте кнопки смены слайдов.

Шаг 12. Создаем разделитель для контента

Инструментом Карандаш (Pencil Tool) и нарисуйте светло-серую (#aaaaaa) линию шириной в 1 пиксел.

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

Шаг 13. Добавляем контент

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

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

К слою с кнопкой примените стили слоя Наложение градиента (Gradient Overlay) и Обводка (Stroke).

Дублируйте слой с кнопкой (Ctrl + J).

Добавьте изображения в эти серые области:

Создайте тень, как делали это ранее и поместите ее под области с фотографиями:

Добавьте описание проекта:

Поместите в одну из колонок иконку Twitter.

Добавьте сообщение о Twitter.

Нарисуйте кнопку More Tweets.

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

Добавьте текст.

Шаг 14. Создаем футер

Создайте выделение в нижней части макета – это будет область под футер, и залейте выделение серым цветом.

Примените к этой области стиль слоя Наложение цвета (Color Overlay).

В финале, добавьте на футер навигацию и копирайт.

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

Автор урока: Niranth

Источник:

photoshoptutorials.ws

Профессиональный макет сайта в фотошоп / Creativo.one

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

Набор иконок (wefunction.com)

Альтернативный набор иконок

Иконка Twitter (iconeden.com)

Шрифт Bebas (dafont.com)

Архив

Шаг 1. Mockup

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

Установите направляющие точно по границам выделения.

Установите направляющие по новому выделению:

Шаг 3. Создаем шапку сайта.

Переходим к созданию шапки сайта. Создайте выделение высотой в 465 пикселов в верхней части макета.

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

Теперь шапка будет выглядеть так:

Создайте на шапке выделение в 110 пикселов.

Нажмите клавишу Delete, чтобы удалить выделенную часть.

Слой с подсветкой сожмите по вертикали (Ctrl + T).

Примените новый слой с маской, которую залейте только что созданным градиентом.

Шаг 4. Создаем узор

После добавления текстуры шапка выглядит так:

Результат:

Шаг 5. Добавляем логотип

Переходим к добавлению логотипа. Выберите мягкую кисть с цветом #19535a и нарисуйте пятно.

Напишите текст:

К слою с логотипом добавьте стиль слоя Тень (Drop Shadow).

Шаг 6. Навигация

Добавьте текст для навигации.

К слою с кнопкой добавьте стиль Наложение градиента (Gradient Overlay).

Шаг 7. Слайдер для контента

Создайте выделение размером 580х295 пикселов.

Залейте выделение любым оттенком серого.

Поместите изображение. Закрепите его со слоем, который создали ранее.

Выберите черный цвет (#000000) и нарисуйте пятно:

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

Выделите нижнюю половину тени и удалите (Delete).

Поместите слой с тенью над слайдером:

Дублируйте слой с тенью (Ctrl + J) и поместите дубликат на нижний край слайдера.

Уменьшите непрозрачность слоя с кнопками до 50%.

Добавьте фигуру стрелки на кнопки слайдера:

На нижней части слайдера нарисуйте полосу и залейте ее черным цветом (#000000).

Уменьшите непрозрачность слоя с полосой до 50%.

На эту полосу добавьте описание Вашего проекта:

Шаг 8. Добавляем текст с приветствием

Напишите текст с приветствием:

Шаг 9. Завершаем работу над шапкой сайта

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

Создайте новый слой под слоем с шапкой (Shift + Ctrl + N) и примените к нему градиент.

Шаг 10. Добавляем кнопки для слайдера

Нарисуйте кнопки смены слайдов.

Шаг 12. Создаем разделитель для контента

Инструментом Карандаш (Pencil Tool) и нарисуйте светло-серую (#aaaaaa) линию шириной в 1 пиксел.

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

Шаг 13. Добавляем контент

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

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

К слою с кнопкой примените стили слоя Наложение градиента (Gradient Overlay) и Обводка (Stroke).

Дублируйте слой с кнопкой (Ctrl + J).

Добавьте изображения в эти серые области:

Создайте тень, как делали это ранее и поместите ее под области с фотографиями:

Добавьте описание проекта:

Поместите в одну из колонок иконку Twitter.

Добавьте сообщение о Twitter.

Нарисуйте кнопку More Tweets.

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

Добавьте текст.

Шаг 14. Создаем футер

Создайте выделение в нижней части макета – это будет область под футер, и залейте выделение серым цветом.

Примените к этой области стиль слоя Наложение цвета (Color Overlay).

В финале, добавьте на футер навигацию и копирайт.

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

Автор урока: Niranth

Источник:

photoshoptutorials.ws

Дизайн макета сайта в Photoshop. Детальное руководство

Что нужно знать о рисовке макета сайта в Photoshop?

Главным образом, почти 98% проектов функциональных сайтов начинаются с разработки и рисовки веб-дизайна в Фотошопе.

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

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

шапка;
расположение меню;
навигация;
цветовая гамма;
шрифты и т. д.

Первое что тебе нужно – концепция.

Ответь себе на вопрос: «Для чего\кого тебе нужно создать дизайн веб-сайта?». Про рисуй целевую аудиторию и просчитай в уме перечень функций и задач, которые должен обязательно выполнять сайт.

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

Пошаговое создание дизайна сайта в Photoshop

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

Шаг №1

Делаем новый проект для чайников. Начни с создания план-эскиза будущего макета. Его можно как нарисовать от руки на листке бумаги, так и создать в Photoshop. Он представляет собой приблизительный будущий вид веб-сайта.

Шаг №2

Твой макет сайте будет шириной в 960 пикселов (px). Нажми «Файл» — «Создать» (> File > New Document) или комбинацию клавиш «Ctrl+N». Поставь размер 1200х1500 пикселов и разрешение 72 пиксела. Цвет RGB, 8 бит, фон – белый.

Шаг №3

Выдели весь документ при помощи инструмента «Прямоугольная область» (> Rectangular Marque Tool) или нажми комбинацию клавиш «Ctrl+A» -она автоматически выделит всю область документа без исключений.

Шаг №4

Перейди в меню «Выделение» – «Трансформировать выделенную область» (> Select > Transform Selection).

Сверху, на панели настроек установи значение ширины – 960 px. Это будет главная рабочая область макета, в которой тебе предстоит работать.

Шаг №5

Установи линейки (направляющие) точно по границам выделения. Перетащи их вручную указателем мыши. Если у тебя в Фотошопе не включены линейки, зайди в «Просмотр» и нажми галочку напротив — «Линейки» (> View > Rulers).

Шаг №6

Далее, сделай отступ между краями рабочей области макета и зоной главного контента. Перейди в меню «Выделение» – «Трансформировать выделенную область» (Select > Transform Selection). Уменьши выделение по ширине до отметки в 920 пикселов.

Шаг №7

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

Шаг №8

Создай новый слой и залейте выделенную область серым, используя, например, «Инструмент Кисть» (> Brush Tool) или «Инструмент Заливка» (> Paint Bucket Tool).

Шаг №9

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

Шаг №10

Примени градиент. Его можно найти также на панели инструментов или кликнув два раза мышкой по необходимому слою. На примере пошагово объяснено что за чем нужно кликать – 1. «Наложение градиента», 2. «Градиент», 3. Выбрать ваши цвета из палитры «Набор». 4. Указать желаемый угол градиента.

Шаг №11

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

Итак, продолжи. Создай новый слой (сразу его проименуй!) – «Ctrl + Alt + Shift + N»и выберите мягкую кисть, размер, например около 600 пикселов (можешь менять размеры по своем вкусу).

Шаг №12

Передвинь все слои в следующем порядке – «Подсветка» — «Шапка» — «Фон».

Шаг №13

Кликни кистью один раз в центре шапки. Поставь прозрачность и удали потом часть пятна – разруби его, например, инструментом «Прямоугольная область» и нажмите клавишу «Delete». Слой с подсветкой сожми по вертикали и растяни (комбинация клавиш «Ctrl + T»).

Шаг №14

Чтобы отцентрировать необходимые слои – выбери их и выбери инструмент «Перемещение» (> Move Tool) или клавиша «V». На панели свойств (вверху) нажми «Выравнивание центров по горизонтали» (> Align Horizontal Centers).

Шаг №15

Создай новый слой («Shift + Ctrl + N»). Поставь карандашом (> Pencil Tool) точку. Растяни ее по горизонтали («Ctrl+T») и сгладь края градиентом как делал это ранее.

Шаг №16

Временно отключи видимость фонового слоя. Ставим там две точки инструментом «Каранадш» (Pencil Tool), размером в 2 пиксела. Жми далее «Редактирование» – «Определить узор» (Edit > Define Pattern).

Шаг №17

Создаем новый слой («Shift + Ctrl + N») и нажми «Редактирование» — «Выполнить заливку».

Шаг №18

Выбери далее «Регулярный» и кликни на созданный тобой узор.

Шаг №19

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

Шаг №20

Как видишь, у нас получилась «шашечка», непрозрачность которой стоит уменьшить.

Шаг №21

Далее, выделяй узор в произвольном порядке инструментом «Овальная область» (> Elliptical Marquee Tool). Применяй инверсию выделенной области и при помощи «Растушевки» (> Feather) сгладь края и удаляй ненужную область узора.

Шаг №22

Затем пишем название логотипа при помощи инструмента «Горизонтальный текст». К слою с логотипом можно также добавить стиль слоя «Тень» (>Drop Shadow), что находится в меню слоя (два раза жми кнопкой мыши на нужный слой).

Шаг №23

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

Шаг №24

Напиши название для будущих кнопок.

Шаг №25

Здесь в дальнейшем будет так званный – слайдер для контента. Выдели область размером 580х295 пикселов и помести туда любой снимок.

Шаг №26

Далее, создай визуальный эффект к слайдеру. Создай новый слой («Shift + Ctrl + N»), выбери «Кисть» (> Brush Tool) и по тому же принципу, что и с точкой – поставь точку диаметром около 400 пикселов и растяни ее (Ctrl+T).

Шаг №27

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

Шаг №28

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

Шаг №29

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

Шаг №30

Добавь указательные стрелки инструментом «Произвольная фигура».

Шаг №31

Создай новый слой и прямоугольником выдели область внизу слайдера — инструмент «Прямоугольная область выделения» (> Rectangular Marqee Tool). Сделай ее полупрозрачной (непрозрачность — 50%). Напиши текст.

Шаг №32

Добавь описание сайта или проекта.

Команда онлайн школы WebDesGuru прилагает все усилия для того, чтобы отойти от стандартных методов обучения, которые годами вырабатывались в системе образования. Мы ежедневно делаем шаг вперед и идём навстречу новым знаниям, которыми готовы поделиться с нашими клиентами. Оцените наши старания! Записывайтесь на курсы web-дизайна для начинающих, и учиться Вам теперь станет в удовольствие!

Создание дизайна сайта в фотошопе, размеры макета

Приветствую всех на fotodizart.ru. В сегодняшней небольшой статье я бы хотел поговорить о размерах, которые необходимо выбирать при создание дизайна сайта в фотошопе. А также об одном подводном камне, который многие либо попросту не учитывают, либо не знают о нем. В одной из своих предыдущих статей я уже рассказывал об основных моментах, которые нужно учитывать при разработке макета.

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

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

Исходя из поставленной задачи мы понимаем, что нам необходимо рисовать под минимальное разрешение монитора, которого придерживаются на сегодняшний день, это 1024х768 пикселей.

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

А вот о ширине следует призадуматься, так какого размера делать то ее???? А рисовать ширину тела сайта необходимо в 1003 пикселя, Вы спросите, почему 1003 пикселя, а не 1024, да потому как нужно учитывать боковой скроллинг у браузера, а он составляет немного не мало 21 пиксель.

Вот и получается, что тело нашего сайта должно быть 1003 пикселя, этот параметр гарантирует, что у вас не появится горизонтальный скроллинг у сайта. Так как бывают случаи, когда верстальщик верстает макет, под разрешение 1024х768 пикселей, после чего появляется горизонтальный скроллинг, благодаря которому небольшая, но все же, часть сайта находится вне пределов монитора пользователя.

А это уже как вы наверное понимаете мало того что некорректно смотрится но и вызывает неудобство для пользователя сайтом (потенциального клиента), это большой минус. Этот скроллинг появляется из-за того что дизайнер не учел что фиксированная ширина макета сайта 1003 пикселя, а верстальщик сверстал макет на 1024 пикселя. Конечно, это может быть и ошибка верстальщика, но сейчас не о верстке.

Итак, я думаю, мы поняли, что фиксированная часть макета максимально должна быть 1003 пикселя, она может быть и меньше, мы рассматриваем корректное отображение будущего сайта на минимальном разрешение монитора с 1024х768 пикс.

Я при создание дизайна сайта в фотошопе, использую размеры холста равные 1200 х 1800 пикс. Фиксированную ширину делаю в 1000 пикселей, а оставшиеся 200 пикселей разделяю пополам по 100 на правую и левую стороны соответственно, которые будут выполнять функцию резинки для остальных разрешений мониторов. Ниже я привел схему, каких размеров я создаю холст и разметку.

Статья получилась небольшая, постарался максимально понятно дать описание, если возникнут вопросы, пишите в комментариях.

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

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

Как делать макет сайта в фотошопе

2,365 просмотров всего, 1 просмотров сегодня

Итак, вы решили поднять бизнес на новый уровень и запустить свой собственный сайт. У вас есть несколько вариантов:

Заказать ресурс в web-студии. Вы получите качественный продукт с продуманным юзабилити и чистым кодом. Он будет работать без багов на любом устройстве: от ноутбука вашей бабушки до айфона последней серии. Однако такое вложение требует денег, которые не всегда есть в наличии.
Нанять фрилансера. Найти хорошего дизайнера на фрилансе – все равно что искать спонсоров для стартапа. Работа настоящего специалиста стоит дорого (см. пункт выше), а тратить время на постоянные переделки, доработки и споры с дилетантом, наверняка, не очень хочется.
Воспользоваться онлайн-конструктором. Не рекомендуем, т.к. такие сайты практически не поддаются SEO-продвижению, а перспективу годами платить за целевой трафик из контекстной рекламы радужной не назовешь.
Заняться созданием сайта своими руками с нуля. Владея минимальными навыками верстки работы в Фотошопе, вы сможете легко нарисовать простой макет. А затем сверстать и выложить его в Интернет.

Одним из самых популярных графических редакторов на сегодня является Adobe Photoshop. Не самый простой для новичка, но обладающий широким функционалом и разнообразным набором инструментов. Профессионалы годами постигают тонкости программы, оттачивая мастерство дизайна. Но для создания простого макета начинающему автору достаточно базовых знаний, фантазии и хорошего пошагового урока.

Как в Фотошопе сделать дизайн сайта

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

Прежде, чем начать: подготовительный этап

Создайте файл будущего макета и придумайте для него понятное имя. Для этого нажмите «Файл – создать».
Размеры, которые предлагает Фотошоп по умолчанию, не подойдут. Создаем файл 1024×720 пикселей, а затем сохраняем его, включаем линейки (Ctrl+R) и активируем сетку (Ctrl+Э). Если все сделано правильно, вы увидите перед собой лист, расчерченный как школьная тетрадка в клеточку:

На готовом макете сайта клеток не будет. Линии видны только во время работы с макетом и используются для того, чтобы ровно располагать элементы будущего шаблона. Сетку можно настроить самостоятельно (тут: «Редактирование – Настройки – Направляющие, сетка и фрагменты») или скачать готовое решение в Интернете. Мы рекомендуем использовать сетку BOOTSTRAP? для удобства дальнейшей верстки и адаптации

Теперь нужно установить направляющие, между которыми будет находиться Тело, или основная часть будущего ресурса. Для этого нажмите «Просмотр-Новая направляющая» и выберите ориентацию «Вертикальная» и укажите положение от левого края будущей страницы (по линейке).

Направляющих нужно две, и расстояние между ними должно составлять не более чем 1003 пикселей (для дисплеев расширением 1024 х 720).

Начинаем рисовать

Создание красивого сайта – это больше чем про искусство. Это наука Usability, помноженная на опыт разработки интернет-проектов для разных тематик. Но порядок выполнения работ в Фотошопе практически одинаков.
Для начала нужно задать фон. И не обязательно рисовать картинку самостоятельно – можно скачать бесплатное изображение с любого из стоков. Не рекомендуем использовать текстуры с мелкими выделяющимися деталями: текст на таком фоне будет нечитабельным, а мелкие фрагменты отвлекут внимание пользователя от контента.
Чтобы добавить фон, откройте рисунок в Фотошопе и выделите изображение (Ctrl+A). Скопируйте картинку (Ctrl+С) и вставьте в будущий шаблон (Ctrl+V). Справа внизу вы увидите новый слой, который можно переименовать («Параметры слоя») и изменить («Параметры наложения»).

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

Делаем шаблон для сайта

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

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

Разберем на примере хедера (header) и создания меню сайта. Создадим группу, назовем ее «Хедер» и в ней создадим подгруппу «Верхнее меню» с новым слоем «Фон». Для этого нажимаем на иконку в правом нижнем углу страницы:

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

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

Теперь добавляем пункты меню – кликаем на инструмент «Текст», выбираем нужный шрифт и цвет и пишем. Далее добавляем изображения и текстовый контент. Не забываем добавить лого, номер телефона, кнопки соцсетей. Получится примерно следующее:

В этой статье мы не будем подробно описывать, как в Photoshop отрисовать кнопки или добавить визуальные эффекты (об этом можно прочитать в специальных уроках для начинающих дизайнеров). Не будем подробно разбирать каждый из элементов страницы (от Хедера до Футера). Постарайтесь разместить на странице информацию, которая заинтересует ваших потенциальных клиентов. И не забудьте про точки захвата и формы обратной связи.

В результате вашей работы вы получите дизайн сайта, готового к верстке с помощью html и css. А о том, как сверстать макет, в нашем блоге уже выходила отдельная статья
Как самому создать сайт или «не боги горшки обжигают».

По многочисленным просьбам читателей, мы сегодня будем делать дизайн, вернее макет сайта в Photoshop. Конечно если с этим никогда не сталкивался, сделать его довольно не просто, возникает множество вопросов, на которые я сегодня постараюсь ответить. Как оказывается, что материала по этому поводу в интернете не так уж и много. Дизайнеров куча, а как сделать макет сайта никто не рассказывает. Может быть я просто плохо искал? 🙂

Продолжение

В общем давайте уже делать.

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

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

Программное обеспечение

Первое, что Вам нужно это Photoshop. Если у Вас его нет, покупайте 🙂

Создание и размеры документа

Чтобы создать новый документ в Фотошопе нужно зайти в «Файл» и кликнуть «Создать», затем появится окно, в котором нужно задать соответствующие размеры.

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

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

В моём случае сайт будет иметь ширину в 1200рх. Таким образом я сделал документ шириной в 1300 рх и высотой в 4000 рх. Остальные настройки оставьте как есть.

Фон шаблона сайта

После того как мы создали документ, в первую очередь сделайте фон для сайта. Не важно, что это будет цвет или картинка но сделайте его. В моём случае это просто белый фон. Выбираем инструмент «Заливка» в палитре цветов выбираем белый цвет, затем просто кликаем по фону.

Ширина будущего сайта в 1200 рх

Теперь нам нужно выставить размер будущего сайта, чтобы он выглядел так же как будет смотреться в браузере. Делать мы будем это с помощью линейки. Если она у Вас не активна, нужно зайти в «Просмотр» и поставить галочку на против «Линейка». Затем она должна появиться у Вас в окне просмотра.

А вот как она выглядит:

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

А сейчас нужно поставить линейку по центру нашего документа, вернее найти центр. Для этого наводим курсор на линейку на ней же зажимаем левую кнопку мыши и вытягиваем линию на наш документ. Тянем примерно на середину, линейка сама найдёт центр.

После того как мы нашли центр, нужно поместить наш сайт шириной в 1200 рх в центр документа который имеет размер в 1300 рх. Для этого выбираем инструмент «Прямоугольная область», сверху устанавливаем Стиль на Заданный размер, куда пишем вот такие значения: ширина — 1200рх, высота 400рх. Далее просто кликаем по нашему белому фону и у нас появится выделенная область той ширины которая нам нужна.

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

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

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

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

Важно!

Всегда создавайте группы для слоёв и давайте им названия. Потому что в дальнейшем точно запутаетесь!

Группы

Создаём группу, и называем её «Хидер» (Шапка) в ней же создаём под группу «Верхнее меню» так как будем начинать именно с него. В группе создаём новый слой и называем его «фон». Это будет фон нашего верхнего меню.

Вот что должно получиться:

Верхнее меню

Опять вытягиваем линейку и выставляем её как на рисунке:

Выбираем инструмент «Прямоугольная область» и выделяем вдоль горизонтальной линейки:

В палитре цветов вбиваем вот этот цвет #0dbfe5, выбираем инструмент «Заливка» и заливаем выделенную область, затем нужно отменить выделение во вкладке «Выделение» нажмите на «Отменить выделение»:

Кликаем на инструмент «Горизонтальный текст». Сверху в панели выбираем шрифт «Segoe UI». Теперь кликаем на голубом фоне меню и пишем название наших страниц. Потом Вы можете переместить текст куда Вам нужно.

Теперь создаём разделители между страницами. И сделаем им небольшой эффект вдавленности. Создаём новый слой, выбираем инструмент «Линия». Затем зажимаем Shift и рисуем вертикальную линию через весь голубой фон нашего меню.

По слою с фигурой нажимаем два раза мышкой, откроется окно со стилем слоя. Ставим галочки на против «Наложение цвета» И вбиваем туда вот этот цвет #0aaacc.

Переходим в пункт «Тень» и задаём следующие параметры:

Вот, что должно получиться:

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

Иконки социальных закладок

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

Для начала с помощью линейки нужно выставить высоту наших иконок, что бы они были ровными. Вот , что нужно сделать:

Потом создаём группу, называем её «Социальные закладки», создаём в ней новый слой. Теперь кликаем по инструменту «Произвольная фигура» выбираем нужную фигуру:

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

Переходим к логотипу. Опять же создаём отдельную группу для логотипа и в новый слой.

Логотип

Переходим на этот сайт и качаем шрифт. Выбираем инструмент «Горизонтальный текст». Ищем в поле со шрифтами название нашего шрифта Olivier. Кликаем на то место где будет располагаться лого и пишем название на Английском, потому что этот шрифт не поддерживает кириллицу. Вот что должно получиться:

Создаём группу «Нижнее меню» и новый слой.

Нижнее меню (Главное)

Выставляем линейки как на рисунке:

Выбираем инструмент «Прямоугольная область» и выделяем. Затем выделенную область заливаем вот этим цветом #303030. Вот что должно получиться:

Отменяем выделение во вкладке «Выделение». Теперь идём во вкладку Фильтры — Шум и выбираем Добавить шум. Потом выставляем такие значения:

Добавляем название рубрик, кликаем по инструменту «Горизонтальный текст» и пишем название рубрик, делайте как у меня:

Добавляем линии. Делаются они так же как и в верхнем меню только изменён сам цвет линии. Думаю, что вы справитесь, и должно получиться вот что:

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

Как обычно в группе «Хидер» создаём группу «Инфо панель» с новым слоем.

Панель с информацией

Для начала добавляем полосы с линейки как на рисунке ниже:

Выбираем инструмент «Прямоугольная область» и выделяем область прям под меню, и заливаем её чёрным цветом #000000

Далее создаём новый слой, потом тем же инструментом выделяем область которая ниже и заливаем её вот этим цветом #eeeeee

Отменяем выделение, берём «Горизонтальный текст» изменяем размер шрифта на 48 пт и цвет #a4a4a4. Пишем «Последние Записи». Вот, что у Вас должно получиться в итоге:

Контент

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

Сразу же нужно создать 2 отдельных группы:

Метки — в эту группу мы будем добавлять текст с размером наших колонок.
Контент — группа где будет находиться вся наша середина сайта.

В группе контент создаём под группу «Левый», в которой будут находиться наши блоки с записями.

Выбираем инструмент «прямоугольная область», задаём ей стиль «заданный размер» и выставляем ширину 800рх высоту 100рх. Вот итог:

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

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

В группе «Контент» делаем под группу с названием «Правый» (Сайтбар). Будем размечать место для правой колонки сайта.

Опять берём «прямоугольная область», а вот в стиле области задаём немного меньший размер в ширину 350рх высоту оставим ту же в 100рх. И далее делаем всё как на рисунке:

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

Помните мы создали группу метки? Там просто создайте слой с надписями размеров блоков, вот как у меня:

Эти метки очень помогут при вёрстке. Не нужно будет вспоминать размеры.

Блоки с записями

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

В группе «Левый» создаём подгруппу «блок» и новый слой.

Опять выбираем инструмент «Прямоугольная область». В стиле задаём размеры 800 х 300. Подгоняем под линии. Потом заливаем вот этим цветом #d9d9d9. Это у нас получилась миниатюра.

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

Теперь давайте добавим заголовок к записи. Берём «Горизонтальный текст» ставим размер в 35 пт и цвет чёрный. Добавляем прям под миниатюрой:

Добавляем информацию к посту. Ставим размер шрифта в 14 пт и цвет ближе к серому:

И описание к посту:

Сейчас давайте добавим кнопку Далее. Она тоже очень простая. Выбираем инструмент «Прямоугольник со скругленными углами» задаём ему вот это цвет #0dbfe5 и радиус углов в 2рх. И рисуем кнопку размера который Вам понравится:

Теперь добавляем текст и смотрим, что у нас получилось:

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

Создаём группу «Разделитель», выбираем «Овальная область» создаём слой. И под блоком записей зажимая Shift рисуем круг, затем заливаем его вот этим цветом #efefef.

Отменяем выделение и ищем середину круга с помощью линейки

Выбираем слой с нашим кружком на нём же нажимаем правую кнопку мыши и выбираем «Создать дубликат слоя». Перетащите его немного влево.

В верхней панели заходи во вкладку «Редактирование» — Трансформирование и выбираем Масштабирование. И делаем круг немного меньше первого, при этом зажимая Shift чтобы круг получился ровным.

Вот что должно получиться:

Копируем слой этого маленького круга опять перемещаем его влево. Так же точно уменьшаем его размер как написано выше, чтобы получилось вот так:

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

А вот что получилось только в нормальном размере:

Сейчас размещаем блок записей под блоком. Создаём дубликат нашей группы «Блок» На панели инструментов выбираем курсор (самый верхний). И перетаскиваем наш блок записей вниз. и так делаем раз 5.

Сайдбар (правая колонка)

Находим нашу группу «Сайдбар», и создаём в ней подгруппу «Поиск». С помощью линии делаем вот так:

Выбираем инструмент «Прямоугольная область» и выделяем поле для поиска, затем заливаем его вот этим цветом #eeeeee

Не забываем отменить выделение, кликаем на инструмент «Горизонтальный текст» и в сером поле пишем слово Поиск

Слева выбираем инструмент «Произвольная фигура» и сверху ищем фигуру лупы. Она есть в стандартных фигурах. Создаём слой в группе «Поиск» наводим на поле и рисуем нашу фигуру удерживая Shift.

Поле поиска готово. Теперь переходим к виджетам.

Создаём группу «виджет» и новый слой в ней. Затем добавляем линий как на рисунке. Это будет фон нашего заголовка, и заливаем его эти цветом #eeeeee

В наш заголовок теперь нужно добавить сам заголовок, делаем это с помощью текста. А ещё добавим иконку к заголовку. Для этого нужно выбрать любую фигуру которая по душе, и которая по смыслу подходит 🙂 Не забываем зажимать Shift когда добавляем фигуру. И залейте её вот этим цветом #0dbfe5

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

Затем просто создаём дубликат группы и перетаскиваем виджет вниз. Делаем то же самое что и с постами.

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

Футер (Низ сайта)

Ну как же без него. В этом шаблоне он тоже не сильно сложный.

Всё как обычно создаём группу «Футер» и слой в ней. И размечаем его с помощью линейки, выбираем наш уже любимый инструмент «прямоугольная область» выделяем его и заливаем #0dbfe5

Отменяем выделение. Берём «Горизонтальный текст» находим тот шрифт, который мы скачали (Olivier), и вписываем наш логотип, только цвет текста делаем чуть темнее.

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

Вот и всё, друзья, у нс готовый макет, который уже можно верстать 🙂

Ещё, вот Вам его PSD файл. Скачивайте, и смотрите если что то не поняли.

Скачать

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

Никакой «воды» – только ценная информация и работающие лайфхаки по веб-дизайну и программированию

Photoshop-лектор: Дизайн макета сайта в Photoshop. Детальное руководство

Что нужно знать о рисовке макета сайта в Photoshop?

шапка;
расположение меню;
навигация;
цветовая гамма;
шрифты и т. д.

Первое что тебе нужно – концепция.

Ответь себе на вопрос: «Для чегокого тебе нужно создать дизайн веб-сайта?». Про рисуй целевую аудиторию и просчитай в уме перечень функций и задач, которые должен обязательно выполнять сайт.

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

Пошаговое создание дизайна сайта в Photoshop

Перейди в меню «Выделение» – «Трансформировать выделенную область» (> Select > Transform Selection).

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

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

Передвинь все слои в следующем порядке – «Подсветка» — «Шапка» — «Фон».

Создаем новый слой («Shift + Ctrl + N») и нажми «Редактирование» — «Выполнить заливку».

Выбери далее «Регулярный» и кликни на созданный тобой узор.

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

Как видишь, у нас получилась «шашечка», непрозрачность которой стоит уменьшить.

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

Напиши название для будущих кнопок.

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

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

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

Добавь указательные стрелки инструментом «Произвольная фигура».

Создаем макет сайта-галереи в Photoshop

Шаг 1: Настройка документа Photoshop

Создайте новый слой в Photoshop (Ctrl / Cmd + N) с размерами 1200 × 910px.

Шаг 2: Включаем 960 Grid System

При работе над макетам нам понадобится сетка. Мы будем использывать 16-ти колонную сетку 960 Grid System . Для этого из их веб-сайта скачиваем бесплатный PSD шаблон.

После того как вы закончили загрузку PSD шаблона, откроваем PSD в фотошопе и перетаскиваем его на наш холст. Сетка должна быть размещена на верхнем слое, так как по нее будем выравнивать остальные элементы.

Шаг 3: Фон макета

Временно скрываем слой с сеткой и создаем новый слой под ним. В панели инструментов устанавливаем цвет переднего плана на коричнево-оранжевый цвет (# bc7821) и цвет фона темно-коричневый (# 362a21).

Выбераем Gradient Tool (G) ( Градиент) и установите опцию Radial Gradient (Радиальный градиент). В центре холста создаем градиент.

Градиент выглядит немного простым, поэтому давайте добавим текстуру к нему. Перейти к Filter > Convert for Smart Filter (Фильтр> Преобразовать для смарт-фильтров).

Теперь давайте добавим немного шума, выбрав Filter> Noise> Add Nois (Фильтр>Шум>Добавить шум).

Добавляем больше свечения в верхней части нашего фона. Берем Brush Tool (B) (Кисть) и устанавливаем опцию Master Diameter (Главный диаметр) около 700px; также меняем цвет переднего плана на белый.

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

Измените режим смешивания этого слоя на Overlay (Перекрытие) и установите его непрозрачность до 34%.

Скачиваем текстуру ржавчины и открываем ее. Перетаскиваем изображение на наш холст и делаем его немного меньше, чем холст Transform (Ctrl / Cmd + T) (Редактировать > Трансформация).

Активируем инструмент Eraser Tool (E) (Ластик).

Используем обычную круглую мягкую кисть и немного стираем бока нижней области с помощью Eraser Tool (E). Кроме того, вы можете использовать маски слоя, если не хотите, чтобы изменения были постоянными.

Измените режим наложения текстуры ржавчины на Overlay (Перекрытие) и непрозрачность до 16%.

Далее открываем металлическую текстуру, также перетаскиваем эту текстуру на холст и немного стираем с боков и снизу. Устанавливаем режим смешивания этого слоя на Multiply (Умножение) и непрозрачность 15%.

Шаг 4: Добавление название сайта

Отобразите слой с сеткой. Выберите инструмент Horizontal Type Tool (T) (Горизонтальный текст) и установить шрифт ITC Avant Garde CE (либо другой необходимый шрифт). Также установите цвет текста, цвет коричневый (# 523117). Затем введите название сайта, например, «JohnDoe фотография» в центре макета.

Дублируйте текстовый слой и измените цвет текста, который был продублирован, на белый (# FFFFFF), измените режим смешивания на Overlay (Перекрытие) и установите его непрозрачность 32%. Переместить его 1px вниз с помощью Move Tool (V) (Перемещение) + клавиша стрелки вниз, это будет создать дополнительный эффект.

Шаг 5: Создание меню навигации

Создайте новый слой. Используйте инструмент Horizontal Type Tool (T) (Горизонтальный текст) и введите текст с параметрами, которые представлены ниже на картинках.

Теперь переходим к дизайну кнопок, при наведении на них. Выберите Rounded Rectangle Tool (U) (Прямоугольник с закругленными краями). Установите в настройках инструмента опцию Shape Layers (Слой фигуры) и Radius (Радиус) 30px.

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

К прямоугольнику с закругленными краями применяем Color Overlay (Наложение цвета) и Inner Shadow (Внутренняя тень) в диалоговом окне Layer Style (Стиль слоя).

Для Color Overlay установите желтый цвет (# f9a81f).

Inner Shadow (Внутренняя тень). Установите черный цвет внутренней тени (# 000000).

Изменяем прозрачность слоя с прямоугольником с закругленными углами до 30%.

В панели Layers ( Слои) выбираем слой с прямоугольником и нажимаем на нем, при этом зажав кнопку Ctrl / Cmd. Этим создаем область выделения вокруг прямоугольника.

На новом слое, перейдите в меню Edit> Stroke (Редактирование t> Обводка).

Изменяем режим наложения слоя на Overlay и установливаем его непрозрачность до 18%.

Шаг 6: Добавляем раздел для фотографий

Включите слой с сеткой. Используя Rectangular Marquee Tool (M) (Прямоугольная область), нарисуйте прямоугольное выделение ниже пунктов навигации, а затем заполните (Shift + F5) выделение черным цветом (# 000000). Убедитесь, что ширина прямоугольника занимает 14 колонок сетки макета.

Измените режим смешивания слоя этого прямоугольника на Soft Light (Мягкий свет).

Пришло время размещать наши фотографии. Открываем фото Sunset и перетаскиваем его в наш макет. С помощью Free Transform ( Свободное трансформирование) делаем его нужных размеров.

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

На скрытом слое с фотографией нажимаем Add vector mask (Добавить векторную маску), создавая маску выбранной области. Теперь слой с фотографией делаем видимым. Можно заметить, что, если все сделано правильно, все части изображения, что лежат за пределами маскированной области, будут скрыты.

Шаг 7: Создаем кнопки управления фотографиями

Под группой слоями фотографии для организации создаем группу и называем ее «Стрелка». Внутри группы создаем новый слой.

Выберите Ellipse Tool (U) (Эллипс) и нарисуйте круг на левой стороне слайд-шоу.

Затем добавьте Outer Glow (Внешнее свечение) и Gradient Overlay (Наложение градиента). Устанавливаем цвет Outer Glow черный (# 000000).

Для Gradient Overlay выбираем два цвета: темно-коричневый (# 271303) и менее темный (# 3a2102).

Так должен выглядеть наш макет на данном этапе.

Нам нужно будет удалить ненужные тени круга. Чтобы сделать это сначало выбираем Layer> Rasterize> Shape (Слой> Растрировать> Фигуру). После его выбираем Rectangular Marquee Tool (M), выделяем область с тенью и нажимаем «Удалить».

Теперь создайте стрелки для нашей кнопки. На новом слое выберите Rounded Rectangle Tool (U) (Прямоугольник с закругленными краями), а затем установить в его параметры опцию Shape Layers и радиус 30px. Чем больше радиус, тем более круглые края у нас получаться.

Рисуем левую часть стрелки. Измените цвет этой фигуры в темно приглушенный оранжевый (# b56d1b), придав стиль слоя Color Overlay.

Для создания нижней части стрелки, дублируем эту форму, нажав Edit> Transform Path> Flip Horizontal (Редактирование > Трансформирование контура > Отразить по горизонтали).

Выберите два слоя стрелок на панели слоев и перейдите к Edit> Transform> Rotate, поверните стрелку -90 ^O.

Обьеденяем два слоя в один и дублируем его.

В стилях дублированного слоя в Color Overlay выбираем черный (# 000000) и перемещаем его его на 1px влево с помощью Move Tool (V).

Теперь создадим стрелку вправо. Выбираем группу «Стрелка» и дублируем ее. Выбираем Edit> Transform> Flip Horizontal (Перевернуть по горизонтали) и перемещаем на правую сторону.

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

Шаг 8: Создание маленьких фотографий

Делаем слой сетки видимым. Используя Rectangular Marquee Tool (M), нарисуйте выделение шириной приблизительно 4 с половиной колонок ниже основной фотографии.

Залейте его черным цветом (# 000000). Измените режим смешивания на Soft Light (Мягкий свет).

Открываем фото подсолнечника. Поместите его на холст, а затем изменяем его размер до 80% от первоначального размера.

Временно скрываем слой с фото. Создаем прямоугольное выделение, с помощью инструмента Rectangular Marquee Tool (M) (Прямоугольная область). На скрытом слое с фотографией нажимаем Add vector mask (Добавить векторную маску), создавая маску выбранной области. Теперь слой с фотографией делаем видимым. Это сделает видимой только выделенную часть подсолнечника.

Теперь создайте надпись для нашей маленькой фотографии. Используя Rectangular Marquee Tool (M), создайте выделение в нижней части фото и заполнить его темно-коричневым цветом (# 261103). Измените непрозрачность этого слоя до 85%.

Используя инструмент Horizontal Type Tool (T), добавить надпись к нему (например, «природа»). Я использовал шрифт Helvetica с желтым цветом текста (# ffbf47).

Добавьте текст ниже изображения. Он будет служить описанием к фото.

Повторите те же шаги, чтобы добавить еще 2 миниатюры фотографий (можно использовать Baby и Bokeh изображения либо некоторые из ваших собственных фотографий).

Шаг 9: Делаем нижний колонтитул

Создайте новый слой. Выберите Pencil Tool (B) и установите темно-коричневый цвет (# 2c1303). Нарисуйте линию длиной в 14 колонок. Она будет служить разделителем между основным содержанием и нижним колонтитулом.

Дублируем слой линии, которую только-что создали, и изменяем цвет на белый (# FFFFFF) с помощью стиля Color Overlay. Переместите дубликат 1px вниз. Измените режим смешивания на Overlay и уменьшите непрозрачность до 18% .

Используйте инструмент Horizontal Type Tool (T), чтобы добавить свой текст нижнего колонтитула.

Мы успешно создали элегантный макет сайта с фотографиями! Мы использовали различные приемы и методы, что распространены в развивающихся макетах сайтов, включая использование инструментов выделения, применяя наложение текстур и фильтров, настроек режимов смешивания слоев, и так далее.

Надеемся, что вы этот урок будет полезным для вас.

По материалам: Create an Elegant Photography Web Layout in Photoshop.

25 отличных уроков по макету в Photoshop для веб-дизайна

Photoshop — популярный инструмент веб-дизайна. С его помощью вы можете создавать макеты веб-дизайна, которые впоследствии можно преобразовать в функциональный шаблон HTML / CSS.

В этом сборнике руководств представлены передовые методы создания макетов веб-дизайна с помощью Photoshop.

1. Макет портфолио в чистом стиле

Пошаговое руководство по веб-дизайну в Photoshop с использованием основных техник.

2.Чистый макет блога в Photoshop

Узнайте, как создать макет блога на темную тему в этом уроке Photoshop.

3. Создание веб-макета портфолио в Photoshop

Узнайте, как использовать узоры в макетах веб-сайтов из этого учебного пособия по Photoshop.

4. Как создать яркий веб-дизайн портфолио в Photoshop

В этом уроке Photoshop используется сетка 960 для компоновки веб-страницы.

5.Создайте элегантный веб-макет фотографии в Photoshop

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

6. Макет сайта фотогалереи в Photoshop

Научитесь создавать темную фотогалерею с помощью этого превосходного урока по Photoshop.

7. Создание веб-сайта потокового видео с фильмами

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

8.Как создать стильное портфолио, концепция веб-дизайна

Изучите методы создания элегантного веб-дизайна в Photoshop с помощью этого руководства.

9. Создание современной лабораторной темы веб-дизайна в Photoshop

Из этого туториала Вы узнаете, как создавать удобные веб-макеты.

10. Создайте чрезвычайно простой темный веб-дизайн в Photoshop

В этом руководстве вы познакомитесь с множеством техник, например, как создать веб-кнопку.

11. Как создать элегантный дизайн веб-сайта на основе сетки

От бумаги до Photoshop: научитесь размещать веб-дизайн на сетке.

12. Как создать винтажный макет веб-сайта Photoshop

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

13. Создайте простой чистый макет портфолио в Photoshop

Это руководство по макету Photoshop идеально подходит для сайтов портфолио, а также сайтов веб-приложений.

14. 3D-портфолио Dark Layout в Photoshop

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

15. Создайте чистый и красочный макет электронной коммерции в Photoshop

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

16. Разработка инновационного сайта-портфолио с использованием альтернативного пользовательского интерфейса / пользовательского интерфейса

Из этого туториала Вы узнаете, как создать веб-страницу с уникальным пользовательским интерфейсом.

17. Дизайн элегантного веб-сайта мобильного приложения

Создайте простой макет веб-дизайна на темную тему, используя базовые приемы Photoshop.

18. Создайте теплый, веселый интерфейс веб-сайта в Adobe Photoshop

В этом превосходном руководстве по веб-макету есть продолжение преобразования PSD в HTML.

19. Впечатляющий макет портфолио видеооператора в Photoshop

В этом уроке вы будете использовать инструмент Custom Shape Tool, чтобы создать фоновый узор.

20. Как создать тему WordPress в Photoshop

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

21. Создайте смелое и яркое портфолио

Это руководство по веб-макету проведет вас через создание красочного сайта-портфолио.

22. Создайте элегантный узорчатый веб-дизайн в Photoshop

В этом уроке вы узнаете, как создавать узоры в Photoshop.

23.Создайте чистый корпоративный макет веб-сайта

Из этого руководства вы узнаете, как добавить стоковые фотографии в заголовок вашего веб-сайта.

24. Как создать красочный веб-макет для бизнеса

Этот урок Photoshop продемонстрирует, как включать значки в ваш веб-дизайн.

25. Создайте текстурированную веб-страницу «Скоро появится» в Photoshop

В этом уроке Photoshop научитесь создавать простой веб-дизайн с красивыми текстурами.

Связанное содержимое

70 Превосходные ресурсы для Photoshop
10 отличных программ с открытым исходным кодом и бесплатных альтернатив Photoshop
30 уроков по созданию красивых текстовых эффектов в Photoshop

30 лучших уроков по макету веб-дизайна в Photoshop

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

Этот обзор включает 30 лучших руководств по макету веб-дизайна, созданных в Photoshop : макеты портфолио, макеты, предназначенные для блогов, бизнес-макеты и многое другое… Я уверен, что вы узнаете несколько отличных методов проектирования, следуя любому из этих руководств.

Как создать уникальный красочный макет сайта

Создайте красивый веб-сайт с нуля

Создайте тематический веб-дизайн Magic Night с нуля в Photoshop

Создайте Grungy Web Design

Создайте креативный необычный макет в Photoshop

Как сделать зеленый и гладкий веб-макет в Photoshop

Создайте чистый и красочный веб-макет в Photoshop

Создайте тему WordPress в стиле гранж с помощью Photoshop

Создайте макет WordPress, вдохновленный природой

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

Учебное пособие по шаблону Softblue

9176 Учебник

Создайте макет портфолио с деревянным фоном в Photoshop

Учебник по модному бизнесу и финансам

Учебник по макету программного обеспечения

000 Создайте креативную тему WordPress 9179

Создайте чистый и эффективный макет продукта

Макет дизайна корзины для покупок

Создайте простой современный веб-шаблон в Photoshop

Как создать веб-макет «изношенной бумаги» с помощью Photoshop

Как создать гладкий и текстурированный веб-макет в Photoshop

Макет бизнес-сайта в Photoshop

Стильный макет веб-сайта портфолио в Photoshop

Учебник по веб-дизайну

/ Шаблон портфолио!

Создание чистого макета PSD с 3D-эффектом

Создание реалистичного макета веб-сайта в Photoshop

Создание расширенного макета игры или клана

Создание 9000 чистого макет хостинга

Интернет 2.0 руководство по макету фотошопа

Руководство RocknRolla Blog Design

Это все на сегодня, друзья мои. Приходите завтра для другой статьи, связанной с дизайном. Или вы можете подписаться на меня в Твиттере или подписаться на мой RSS Кормить.

[Всего: 0 Среднее: 0/5]

Веб и дизайнеры | Полная платформа ресурсов для веб-дизайнеров и разработчиков — Создание макета веб-сайта в Photoshop — ПОРТФОЛИЯ

объявление

В этом уроке по фотошопу мы научимся создавать чистый макет веб-сайта.Система сетки 960 — это то, что мы собираемся использовать в этом уроке, и множество техник фотошопа будут рассмотрены по мере прохождения. Перед тем, как начать, вот окончательный предварительный просмотр макета фотошопа.

Введите адрес электронной почты и загрузите его сейчас!

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

Шаг 1. Добавьте сетку 960

Выравнивание необходимо для любого дизайна.Мы будем использовать систему 960s Grid, которую вы можете скачать здесь. После загрузки файла откройте 960_grid_12_col.psd, который находится в папке фотошопа. Обычно размер документа составляет 1080 X 1080 пикселей, но для нашего шаблона нам нужно 1200 X 1100 пикселей. Чтобы изменить размер шаблона, перейдите в меню «Изображение» -> «Размер холста», введите ширину 180 и высоту 80 и нажмите стрелку вверх. Это сделает шаблон 1200 X 1100 пикселей. Чтобы залить фоновый слой белым цветом, выберите фоновый слой, нажмите Shift + Backspace и залейте его белым цветом.

Шаг 2. Структура папки

Мне нравится сохранять структуру при проектировании чего-либо, и мне нравится, когда вы это делаете. Разделите этот дизайн на 3 части (верхний колонтитул, текст и нижний колонтитул). Чтобы реализовать это, создайте три папки с именами Header, Body и Footer в палитре слоев. Мы будем работать над каждым разделом шаг за шагом: сначала над заголовком, затем над телом и, наконец, над нижним колонтитулом.

Шаг 3. Добавьте градиентный фон в заголовок

Перед добавлением градиентного фона мы добавим направляющие линии.Нажмите View -> New Guide, выберите горизонтальный и введите 100 для позиции. Повторите тот же шаг, чтобы добавить направляющую линию 140 пикселей и 180 пикселей.

Чтобы добавить градиентный фон в раздел заголовка, создайте новый слой под названием Header bg. Используя инструмент выделения, создайте выделение размером 1200×140 пикселей, затем нажмите Shift + Backspace и залейте его любым цветом. Затем щелкните правой кнопкой мыши слой Header bg и выберите параметры наложения. Примените следующие настройки для наложения градиента в соответствии со следующим изображением.

Шаг 4. Добавьте две пиксельные линии

Около 80 пикселей сверху добавьте две линии в один пиксель.Создайте новый слой под названием Line 1px dark, выберите инструмент Marquee Tool и выберите 940 x 1 px, как показано на изображении ниже.

Залейте слой цветом # A54E0F, повторите то же самое для другой линии 1px, назовите его Line 1px dark и залейте его цветом # E37D1E.

Шаг 5: Время очистки

Это хорошая привычка начинать систематизировать файл с самого начала. Если вы работали с одной и той же папкой (Header bg), весь слой, который мы создали до сих пор, должен находиться в ней. Даже если тебе не о чем волноваться. Заблокируйте свой фоновый слой.

Используя инструмент выделения, перетащите выделение за пределы документа так, чтобы были выделены три слоя Header bg, Line 1px light и Line 1px dark. Теперь в палитре слоев перетащите выбранные слои в папку Background. С этого момента я не буду объяснять этот шаг для организации файла, а просто обратитесь к шагу 5.

Шаг 6. Вставьте свой логотип

Введите PORTFOLIA чуть выше 1px линий, щелкните правой кнопкой мыши слой portfolia и добавьте параметр смешивания со следующими настройками.

Теперь мы добавим затухающий свет позади логотипа, чтобы создать новый слой с именем Fade, установить режим слоя на Overlay.Используя инструмент Rectangle Marquee Tool, выберите прямоугольник, чтобы закрыть логотип, затем выберите мягкую кисть 175 пикселей и установите цвет на #FFFFFF. Нажмите на слой несколько раз, чтобы придать ему эффект затухания. У вас должен быть световой эффект позади логотипа.

Шаг 7. Кнопка призыва к действию

Выберите инструмент Прямоугольник со скругленными углами и установите радиус 15 пикселей. Перетащите, чтобы создать круглый прямоугольник 225 х 30 пикселей, назовите его Оранжевый прямоугольник. Добавьте стиль слоя со следующими настройками.

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

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

Напишите номер телефона и сделайте внешний вид ярким в настройках стиля слоя.

Добавьте текст «Позвоните нам» и используйте следующую настройку.

Мы почти закончили с кнопкой призыва к действию 🙂, но нужно добавить последний бит. Добавьте две линии размером 1 пиксель между текстом «Позвоните нам» и номером телефона.

Создайте папку с названием «Кнопка призыва к действию» и выполните шаг 5.

Шаг 8: Добавьте навигацию

Выберите инструмент «Круглый прямоугольник» с радиусом 10 пикселей. Нарисуйте круглый прямоугольник размером 100 x 40 пикселей.

Добавить текст в меню навигации.

Семейство шрифтов: Verdana
Размер шрифта: 14pt
Стиль шрифта: Обычный
Цвет шрифта: #FFFFFF

Давайте добавим немного тени под меню, чтобы создать новый слой под названием Nav bottom shadow.С помощью инструмента «Прямоугольник» нарисуйте прямоугольник размером 1200×40 пикселей и добавьте тень со следующими настройками

Мы закончили с разделом заголовка, поэтому поместите все слои и папки в папку заголовка, кроме фонового слоя.

Шаг 9. Слайдер изображения

Загрузите три изображения из SXC

Поместите загруженные изображения в документ. Измените размер изображения подсолнуха и кориандра до 300×200 пикселей и поместите его в середину документа. Измените размер двух других изображений до 240×158 пикселей и поместите их слева и справа от документа.После совмещения изображений размыте два небольших изображения. Перейдите в Filter-> Blur-> Motion Blur. Установите угол 180 и расстояние 6 пикселей.

Теперь очередь теней. Используя инструмент «Прямоугольник», создайте прямоугольник размером 300 x 120 пикселей и залейте его черным цветом # 000000.

Затем щелкните правой кнопкой мыши прямоугольник и выберите перспективу.

Перетащите якорь с одного из верхних концов, чтобы сделать его похожим на изображение ниже. Теперь перейдите в Filter-> Blur-> Motion Blur. Установите угол 180 и расстояние 6 пикселей.Затем перейдите в Фильтр-> Размытие-> Размытие по Гауссу, установите радиус 5,5 пикселей. Во время размытия изображения всплывающее окно попросит сначала растрировать форму, нажмите ОК.

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

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

Шаг 10: Ползунок

Нарисуйте ползунок для ползунка с помощью инструмента «Прямоугольник со скругленными углами» с радиусом 20 пикселей. Снова используя инструмент Прямоугольник со скругленными углами с радиусом 8 пикселей, нарисуйте прямоугольник 70 х 26 пикселей.Примените к ползунку следующие настройки параметров наложения.

Пора добавить ручку ползунка к кнопке ползунка. Используя инструмент Rectangle Marquee Tool, нарисуйте область размером 1 x 13 пикселей и залейте ее белым цветом. Затем примените настройку наложения градиента к слою, назовите его 1px gradient line. Повторите слой 4 раза и переместите скопированный слой к смежным сторонам.

Шаг 11: Область содержимого

Добавьте две новые направляющие 480 и 520 пикселей. Затем загрузите иконки из базового набора Pixel-Mixer и из базового набора Pixel-Mixer 2.Перетащите значок инструмента настройки из базового набора 2 из загруженного значка.

Напишите текст для заголовка со следующими настройками

Шрифт: Arial
Размер шрифта: 18px
Цвет: # E5932A
Стиль шрифта: курсив

Сделать то же самое для основного текста со следующими настройками

Шрифт: Arial
Размер шрифта: 13px
Цвет: # 79807C
Стиль шрифта: Обычный

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

Пора снова организовать файл. Создайте папку с вызовом «Основное содержимое» и повторите шаг 5.

Шаг 12: Свидетельство

Добавьте две новые направляющие на 620 и 660 пикселей. Используя инструмент «Прямоугольник со скругленными углами», создайте прямоугольник с радиусом 10 пикселей (ширина: 940 пикселей и высота: 140 пикселей). Примените к слою следующие настройки.

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

Для типа знака цитаты »со следующими настройками

Шрифт: Arial
Размер шрифта: 80px
Цвет: # 6E6C6C
Стиль шрифта: курсив

Сделайте то же самое для основного отзыва со следующими настройками

Шрифт: Arial
Размер шрифта: 13px
Цвет: # 79807C
Стиль шрифта: курсив

Затем добавьте имя с такими же настройками, кроме стиля шрифта: Обычный, а для ссылки на веб-сайт используйте Цвет: # E5932A.

Шаг 13: Нижний колонтитул

Нарисуйте прямоугольник с помощью инструмента «Прямоугольник со скругленными углами» с радиусом 8 пикселей, равным 920 x 170 пикселей и цветом # E37DLE. Примените следующие настройки параметров обводки к прямоугольнику. Назовите этот слой «Рамка коробки».

Теперь в нижней части круглого прямоугольника создайте прямоугольник размером 940 x 60 пикселей (назовите этот слой «Передняя форма» и примените наложение градиента, как показано на изображении ниже.

Это должно выглядеть так.

После создания базовой основы для нижнего колонтитула добавьте тень под ней.Для этого нарисуйте прямоугольник 850 х 70 пикселей, назовите его Тень. Нажмите Edit -> Free Transform, затем щелкните правой кнопкой мыши прямоугольник и выберите Perspective. Перетащите верхнюю точку с одной стороны прямоугольника к другой точке, пока она не станет похожей на изображение ниже.

Перейдите в Filter -> Blur -> Motion Blur и примените следующие настройки.

Снова перейдите в Фильтр -> Размытие -> Размытие по Гауссу

Переместите слой Shadow под другой нижний колонтитул.

Чтобы добавить битовый 3D-эффект, добавьте новый слой «Прямоугольная форма слева» размером 26 x 60 пикселей, закрасьте его цветом # B16117.Нажмите Edit -> Free Transform, затем щелкните правой кнопкой мыши прямоугольник и выберите Skew. Удерживая клавишу Alt, перетащите верхнюю правую точку вверх.

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

Для прокрутки эскизов начните с добавления нового скругленного прямоугольника (назовите его Image shape) размером 175x100px, залейте его цветом #FFFFFF и примените обводку 1px # 985414. Загрузите изображение MAM Chihuly Show 5 с SXC и поместите его над слоем Image shape.Выберите слой изображения, затем перейдите в Слой -> Создать обтравочную маску, это замаскирует изображение со слоем прямоугольника под ним. При необходимости отрегулируйте изображение. Чтобы показать эффект приподнятости на миниатюре, добавьте слой Тень и с помощью инструмента Эллипс создайте небольшой эллипс и перейдите в Фильтр -> Размытие по Гауссу с Raidus 1.3px, теперь у вас должно быть уменьшенное изображение с тенью, как на изображении ниже.

Повторите те же шаги, чтобы создать еще два эскиза.

Последний шаг 🙂 этого урока — добавление стрелок к миниатюрам.Создайте круг (назовите его Стрелка влево) размером 19 x 19 пикселей, примените следующие настройки к слою.

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

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

Заключение

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

Как создать чистый макет веб-сайта в Photoshop

Привет, ребята!

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

Это руководство среднего уровня, в котором используется такой замечательный учебный ресурс, как бесплатные шаблоны веб-сайтов, и некоторые вещи здесь могут показаться сложными, но почему бы не попробовать? Давайте начнем 🙂

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

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

Чтобы создать подобный веб-макет, вы должны загрузить «Linecons Free — Vector Icons Pack»

Кстати, вы можете бесплатно скачать шаблон на основе этого дизайна: Free Business Template.

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

Шаг 1

Начнем с начала. Просто запустите Photoshop и создайте новый документ ( CTRL + N ).См. Параметры ниже.

Шаг 2

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

Стиль слоя -> Параметры наложения-> Наложение узора . Посмотрите на скриншоты ниже:

Шаг 3

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

Поместите несколько сеток в свой дизайн с интервалом 60 пикселей и 20 пикселей.

Шаг 4

Итак … пришло время разработать меню вашего будущего веб-сайта. Используйте инструмент Прямоугольник со скругленными углами, чтобы создать его (радиус — 3 пикселя). Ширина вашего меню — 940 пикселей, высота — 34 пикселя.

Я считаю, что создать меню сайта — несложная задача. Чтобы быть уверенным, посмотрите изображения ниже:

Чтобы сделать это меню более привлекательным, перейдите в Blending Options -> Drop Shadow .Используйте настройки, которые вы видите на скриншотах:

Параметры наложения-> Внутренняя тень

Я выбрал цвет # 6bafff для этой строки меню.

Шаг 5

Давайте добавим текст в наше меню. Используйте для этого инструмент Horizontal Type Tool.

Вы можете создать свой дизайн с любым шрифтом, который вам нравится. Я использовал шрифт Aller [жирный]. Размер 14px.

Шаг 6

Все кнопки меню являются ссылками, и дизайнер должен показать, как выглядит их состояние при наведении курсора.Итак, создайте прямоугольник (я использовал цвет # 5a90e5).

Наш результат:

Шаг 7

На каждом приличном сайте есть форма поиска. Давай тоже создадим 🙂

Используйте инструмент Прямоугольник со скругленными углами (радиус — 3 пикселя), чтобы создать форму поиска со следующими размерами: 124 пикселя и 26 пикселя

Добавьте внутреннюю тень: Параметры наложения-> Внутренняя тень

Параметры наложения-> Наложение цвета , цвет- # 5a90e5

Воспользуйтесь нашим любимым инструментом Photoshop еще раз 🙂 Создайте один прямоугольник размером 41px и 32px

Параметры наложения -> Тень
Параметры наложения -> Внутренняя тень

Параметры наложения -> Наложение цвета (цвет — # 6bafff)

Теперь пора использовать значки, которые мы скачали в начале этого урока.Откройте «Linecons Free — Vector Icons Pack» и найдите там значок поиска. Просто примените к нему несколько наворотов.

Вот наш окончательный результат для формы поиска:

Шаг 8

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

Затем используйте инструмент «Прямоугольник» (с закругленными углами), чтобы создать квадрат (удерживая кнопку Shift) со следующим размером — 16 пикселей

Выберите Pen Tool и отрежьте половину этого квадрата.

Edit-> Transform-> Rotate , чтобы переместить этот треугольник и поместить его в левую часть прямоугольника

Выделите все ваши слои «Facebook» и объедините их (Ctrl + E).

Параметры наложения-> Внутренняя тень:

Параметры наложения-> Наложение цвета (# c1cac5)

Теперь добавьте текст «Follow» к нашей кнопке Facebook и поиграйте с его параметрами наложения.

Попробуйте создать свой логотип Facebook для этой кнопки. Например, вы можете создать букву «F», украсив ее синим цветом (# 5a90e5).

Поиграйте с параметрами наложения (добавьте белую тень)

ВАУ! Мы сделали это 🙂 Посмотрите на окончательный результат в нашей строке меню:

Шаг 9

Создайте новую фигуру: ширина 940 пикселей, высота 372 пикселей

Как всегда, добавляем тень:

И граница: Параметры наложения-> Обводка (20 пикселей, цвет- # 6bafff)

Шаг 10

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

Шаг 11

Снова используйте кучу бесплатных иконок. Я выбрал следующие значки: «настройки», «пузырь», «фото», «мир»

Добавляем их в наш дизайн (не забываем использовать сетку), расстояние — 180 пикселей

Шаг 12

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

Поиграйте с параметрами наложения: добавьте белую тень, наложение цвета (# 6aaefd) и внутреннюю тень.

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

ВАУ! Посмотрите на этот потрясающий результат!

Шаг 13

Заполните эти четыре столбца (ширина каждого — 240 пикселей) некоторым текстом «loremipsum». Лучше добавить в каждый столбец свой текст.

Шаг 14

Создайте кнопку «Подробнее» с помощью инструментов, которые мы использовали ранее.

Параметры наложения -> Внутренняя тень, Падающая тень, Наложение цвета (# 919392).

Шаг 15

Добавьте текст «Читать дальше» к нашей кнопке.

Шаг 16

Теперь мы должны отделить основное содержание нашего будущего сайта. Создайте линию 1px и добавьте к ней стили вашего макета «Читать дальше».

Шаг 17

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

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

Радиус — 3 пикселя, ширина и высота — 138 пикселей.

Перейдите к Параметры наложения -> Обводка , чтобы создать границу со следующими параметрами:
Размер — 20 пикселей, цвет # 919392

Скопируйте и вставьте этот элемент 5 раз 🙂 Разместите эти квадраты с интервалом 20 пикселей.

Шаг 18

С помощью обтравочной маски вставьте изображение в квадрат.

Как видите, вы действительно можете использовать этот блок для самых разных целей. Результат:

Шаг 19

Нижний колонтитул веб-сайта так же важен, как и заголовок, если не больше. Спросите себя: «Что вы хотите, чтобы ваши посетители делали, когда они достигают конца страницы?» Ответ, который вы придумаете, станет отличной отправной точкой для разработки нижнего колонтитула вашего сайта.

Теперь пришло время создать крутой нижний колонтитул для нашего симпатичного макета веб-сайта.Сделаем ярким 🙂

Добавьте градиент, например # 3a8df1 — # 6bafff, и внутреннюю тень

Шаг 20

Мы добавим три блока в нижний колонтитул: Быстрые ссылки, О нас и Подписывайтесь на нас

Используйте шрифт Arial Regular для заголовков (30 пикселей) и добавьте стили, как на скриншотах ниже:

Используйте шрифт Arial Regular для текста в разделе «О нас» (12 пикселей).

Текст раздела быстрых ссылок — 22px.

Поместите несколько стандартных значков в раздел Follow — RSS, Google Plus + и Twitter

Woohoo! Мы сделали это! Окончательный результат нашего урока:

Как создать простой макет веб-дизайна с помощью Photoshop

Халява: бесплатный HTML-шаблон

Загрузите этот бесплатный HTML-шаблон для бизнеса здесь. А здесь вы найдете множество замечательных бесплатных веб-шаблонов. Не забывайте нажимать кнопки «Поделиться», потому что делиться — это сексуально;)

Photoshop для веб-дизайна: 20 профессиональных советов

Для многих веб-дизайнеров пакет Adobe Creative Cloud, в частности Photoshop, играет неотъемлемую часть в процессе создания веб-сайтов.Создаваете ли вы макеты веб-сайтов или разрабатываете отдельные элементы сайта, Photoshop — отличный вариант.

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

01. Использование систем сеток

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

Системы сеток могут сэкономить массу головной боли в веб-дизайне. Попробуйте использовать такие ресурсы, как расширение Cameron McEfee GuideGuide для Photoshop, чтобы сделать настраиваемые сетки простыми и точными.

02. Получите все

Один из лучших приемов успешного веб-дизайна (и управления временем) — разместить все элементы на холсте Photoshop, прежде чем вы начнете испачкаться дизайном.

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

03. Изучите пользовательские предустановки документов

Photoshop поставляется с рядом предустановок, ориентированных на Интернет.Проверь их!

Нажмите cmd + N , чтобы открыть окно «Новый документ». Меню предустановок содержит базовые веб-и мобильные предустановки, но в нем отсутствуют многие общие параметры для различных систем сеток, баннеров, устройств iOS и Android. Уделите несколько минут, чтобы заполнить недостающие области.

04. Настроить тип по умолчанию

Закройте все открытые документы. Откройте палитру символов, чтобы выбрать предпочтительное семейство шрифтов, толщину, интервал и цвет. Больше не будет мириад по умолчанию!

05. Делайте ваши векторные изображения четкими

Сохраняйте четкость ваших векторных объектов.Выбрав инструмент «Прямоугольник» ( U ), откройте меню параметров геометрии на панели параметров. Установите флажок «Привязать к пикселям».

06. Создайте пунктирные линии

Создайте пунктирные линии в Photoshop. Это одна из тех вещей, которые вам всегда придется делать.

Выберите инструмент «Кисть» ( B ), затем откройте палитру «Наборы кистей», за которой следует раскрывающееся меню в правом верхнем углу. Выберите Квадратные кисти и нажмите «Добавить».

Теперь выберите кисть Hard Square 1 Pixel.Переключитесь на палитру кистей и нажмите Brush Tip Shape, установив интервал на 300%. На холсте удерживайте Shift , перетаскивая кисть по горизонтали или вертикали, чтобы создать четкую пунктирную линию.

07. Простой перенос текста

Используя быстрое решение, Photoshop может применять функции переноса текста, аналогичные функциям InDesign. Выберите инструмент «Прямоугольник» ( U ). На панели параметров установите для заливки значение «Контуры», выберите для формы инструмент «Прямоугольник» и выберите «Добавить в область контура» (или нажмите + ).

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

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

08. Создание быстрых цветных заливок

Некоторые ключевые команды используются снова и снова. Быстрая заливка — одна из них.

Нажмите alt + Delete , чтобы залить текст, фигуры и слои выбранным цветом переднего плана. Нажмите cmd + Delete , чтобы залить область выбранным цветом фона. Нажмите D , чтобы вернуться к черно-белому по умолчанию, и нажмите X , чтобы поменять местами цвета переднего плана и фона.

09. Оставайтесь организованными

Используйте cmd + G для группировки слоев и помогайте вам оставаться организованными и сосредоточенными.Группирование областей содержимого и компонентов, таких как навигация, области избранного содержимого, вспомогательные компоненты и нижние колонтитулы, по отдельности избавит вас от головной боли на протяжении всего процесса проектирования и разработки проекта.

10. Станьте умнее

Использование смарт-объектов (выберите «Фильтр> Преобразовать для смарт-фильтров» и ctrl или щелкните правой кнопкой мыши «Слой> Преобразовать в смарт-объект»), разумно может действительно ускорить ваш рабочий процесс на протяжении всего рабочего процесса. процесс проектирования. Преобразование больших фотографий и векторных объектов в смарт-объекты сохраняет исходное качество изображения после масштабирования, поворота и наклона.

Следующая страница: еще 10 советов по веб-дизайну для Photoshop …

Photoshop для веб-дизайна — выдержит ли титан графики?

Последнее обновление: 26 апреля 2019 г. Опубликовано в Photoshop и графика.

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

Да, Photoshop используется для веб-дизайна, решая множество задач.

Так используется ли Photoshop для веб-дизайна? Да, конечно. Потому что, несмотря на визуальный характер и гибкий набор инструментов и команд, многие дизайнеры все еще используют Photoshop для решения задач веб-дизайна. Так что на самом деле главный вопрос: Каким образом Photoshop используется в веб-дизайне?

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

Давайте подробнее рассмотрим, как можно использовать Photoshop для веб-дизайна …

С какими конкретными задачами веб-дизайна может справиться Photoshop?

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

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

Но что умеет Photoshop в отношении веб-дизайна? Для чего можно использовать Photoshop в веб-дизайне? Что ж, я смог сузить возможности Photoshop, связанные с Интернетом, до четырех широких областей: редактирование фотографий, оптимизация изображений, создание веб-ресурсов, и создание макетов страниц, .

Давайте кратко рассмотрим каждый …

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

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

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

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

На самом деле, оптимизация изображения — это балансирующее действие: вы балансируете между качеством и размером файла.На самом деле все дело в сжатии изображений. Недостаточное сжатие, и ваши страницы будут загружаться слишком долго. Слишком сильное сжатие, и ваши изображения выглядят так, как будто они из фильма Лего! Так что это может быть сложно.

И хотя существует множество онлайн-сервисов и других опций для оптимизации и сжатия изображений, я не нашел ничего, что давало бы мне точность и контроль, как в Photoshop. Каждое изображение на моих веб-сайтах проходит через инструменты сжатия изображений Photoshop.

Создание веб-ресурсов: Еще одна область веб-дизайна, в которой проявляется сияние Photoshop, — это создание таких элементов страницы, как баннеры, кнопки, значки и т. Д. Какой бы графикой ни была ваша страница — обложка для вашей электронной книги, привлекающий внимание баннер и т. Д. — Photoshop справится с этим.

Фактически, Photoshop может выполнять множество традиционных задач полиграфического дизайна — например, визитки, брошюры и т. Д.). Так что использовать Photoshop для создания таких же визуальных элементов для Интернета очень просто.Лично я часто работаю в Illustrator для этих задач, перенося свои объекты Illustrator в Photoshop как смарт-объекты. Но это совсем другой разговор!

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

Однако важно отметить, что Photoshop иногда может испытывать трудности, когда его используют для создания веб-макетов.Это не его сильная сторона, и с появлением адаптивного дизайна (то есть гибких макетов, которые адаптируются к устройству, которое их просматривает) есть лучшие варианты, если вы будете выполнять много такой работы.

Мы немного поговорим об ограничениях Photoshop, когда дело доходит до создания веб-макетов.

Итак, мы рассмотрим широкий спектр задач веб-дизайна, для которых вы можете использовать Photoshop. Если у вас мало потребностей или вы будете выполнять некоторые или все эти задачи самостоятельно, то Photoshop — отличный выбор для веб-дизайна.

Но важно помнить, что Photoshop — это не в первую очередь инструмент для веб-дизайна. Сначала это фоторедактор ( в названии! ). Для многих дизайнеров, которые делают много каркасов и макетов дизайна, доступны более быстрые и гибкие инструменты.

Итак, если есть лучшие инструменты веб-дизайна, чем Photoshop, почему он все еще используется? Давайте рассмотрим это дальше …

Почему Photoshop все еще используется для веб-дизайна?

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

Вот почему более опытные дизайнеры продолжают использовать Photoshop: эти опытные дизайнеры не только очень комфортно используют Photoshop, но они также придумали быстрые обходные пути для использования Photoshop для более сложных задач, таких как создание веб-макетов.

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

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

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

Хотите, чтобы на этом тексте была тень? Фотошоп! Как насчет красивого градиента на этой кнопке? Фотошоп! Как насчет рамки на боковой панели? Вы угадали, фотошоп !

Просто не было другого способа делать такие вещи.Чтобы справиться с подобными вещами, дизайнеры просто обратились к тому же графическому редактору, который они уже годами использовали в других своих дизайнерских работах — Photoshop!

В то время для таких дизайнеров, как я, которые приходили к веб-дизайну из мира печати, переход был легким — создать макет в Photoshop, получить одобрение клиента, а затем экспортировать изображения и код. Или, что еще лучше, экспортируйте весь макет в формате JPEG и передайте его веб-разработчику для кода.

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

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

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

И это отличный переход к …

Где Photoshop борется с веб-дизайном

Как вы понимаете, большой проблемой для Photoshop является обработка больших изменений, которые произошли в мобильном адаптивном дизайне.Мобильный просмотр полностью изменил то, как мы используем Интернет … и, как следствие, полностью изменил то, как мы проектируем для Интернета.

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

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

Это может звучать как цирк (возможно), и это также большая проблема для Photoshop. Photoshop никогда не предназначался для создания гибких, плавных макетов. У него также нет встроенных инструментов для работы с такого рода адаптивными дизайнами.

Фактически, за первые три четверти жизни Photoshop адаптивного дизайна даже не существовало!

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

Так как же дизайнеры обходят это ограничение в Photoshop? Вообще говоря, есть несколько способов. Некоторые могут просто укусить пулю и создать в Photoshop три отдельных веб-макета — один для смартфонов, один для планшетов и третий для настольных компьютеров. Но это большая работа.

Альтернативный подход — создать макет в Photoshop, а затем, как только этот дизайн будет одобрен, как можно быстрее переместить макет в код.Там дизайн может быть доработан и адаптирован для других размеров устройства.

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

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

Я подробно расскажу об этом в другом посте, Photoshop для адаптивного веб-дизайна .Присоединяйтесь ко мне, и мы займемся этим вопросом дальше.

Между тем, существует ли конкретная версия Photoshop, которая лучше всего подходит для веб-дизайна? Давайте обсудим …

Какая версия Photoshop лучше всего подходит для веб-дизайна?

Так есть ли версия Photoshop, которая лучше всего подходит для веб-дизайна? Давайте подробнее рассмотрим ответ на этот вопрос.

Еще в версии CS6 в Photoshop было добавлено несколько удобных веб-функций. Например, возможность вставлять шестнадцатеричные цветовые коды в окно выбора цвета Photoshop избавляет от разочарований и ускоряет работу.Я ждал этого простого дополнения годами. Кроме того, в Photoshop были добавлены стили абзацев. Это значительно упрощает поддержание единообразия типографики во всем дизайне.

Еще одно дополнение, которое было включено в CS6, — это предварительные настройки документов. Поэтому при создании нового файла размеры для обычных мобильных устройств были доступны в виде предустановок, что определенно помогает ускорить процесс.

Но более современные версии Photoshop CC включают еще больше удобных для работы в Интернете функций, таких как возможность копировать содержимое слоя в виде кода CSS.Это может показаться не таким уж большим, но — это огромно! Итак, здесь вы можете извлекать определенные элементы страницы в виде кода, и это потрясающе. Также есть возможность синхронизировать экспортированные файлы через панель «Слои» — другими словами, если содержимое слоя изменяется в Photoshop, соответствующий экспортированный файл JPEG или PNG также обновляется. Это огромная экономия времени.

По мере выпуска новых версий Photoshop (разумеется, через членство в Adobe Creative Cloud) новые функции и команды, связанные с Интернетом, обязательно будут добавляться.А Adobe очень редко удаляет функции. Так что использование последней версии Photoshop CC, скорее всего, будет лучшим выбором.

На самом деле, если у вас нет более старой копии Photoshop, подписка на Photoshop CC (которая начинается с 10 долларов в месяц) будет вашим единственным вариантом! Adobe не продает старые версии своего программного обеспечения без подписки.

Что до меня, так как моих потребностей немного, я все еще качаю Photoshop CS6 для своей повседневной работы. Но в то же время мне нравится быть в курсе последних функций Photoshop через Creative Cloud.Но это только я.

Далее, если вы готовы изучить Photoshop (или научитесь лучше использовать его для веб-дизайна), давайте обсудим несколько ваших вариантов …

Как изучить Photoshop для начинающих

Если вы новичок, тогда у вас может возникнуть большой вопрос: Как быстро изучить Photoshop? В другом посте: Сложно ли использовать Photoshop? Учитесь правильным путем, и это легко! мы говорим о том, где Photoshop может стать сложной задачей для новых пользователей, и как быстро преодолеть общие разочарования, чтобы вы могли быстро освоиться.

Но вот коротко и мило: Хотя вы можете начать изучать Photoshop в Google, YouTube и на онлайн-форумах, это, пожалуй, самый медленный и самый неприятный способ начать работу. Проблема не в том, что информации там нет … проблема в том, что там слишком много информации! Ничего из этого не структурировано или организовано должным образом.

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

Photoshop — это не сложно, вам просто нужно сначала прочно разобраться в основах. Для этого я настоятельно рекомендую вам найти качественное структурированное учебное пособие. Книги, семинары или онлайн-курсы — это именно то, что я имею в виду. Когда я изучаю что-то новое, я предпочитаю записаться на онлайн-курс. Таким образом, я могу быстро набрать скорость, но делать это в своем собственном темпе из дома.

И я беру много онлайн-курсов!

Здесь, на Ten Ton, у меня есть курс Photoshop, Начало работы с Photoshop CC . Он идеально подходит для новичков, которые хотят быстро закрепиться в Photoshop. Посмотрите — может быть, он подойдет!

Или, если вы хотите узнать больше о Photoshop, у меня для вас есть много статей и видео.

Наслаждайтесь!

Как создать профессиональный веб-макет в Photoshop

Как создать профессиональный веб-макет в Photoshop

Создание красивых, чистых и функциональных веб-макетов — неотъемлемая часть жизни веб-дизайнеров.В этом уроке мы собираемся создать чистый и профессиональный веб-макет в Photoshop с нуля. Попутно вы узнаете полезные методы создания дизайнов. Итак, приступим!

Предварительный просмотр окончательных результатов

Создание профессионального веб-макета Учебное пособие по Photoshop

Ресурсы

Шаг 1. Мокап

Прежде чем мы начнем проектировать, нам нужно спланировать требования, внешний вид и функциональность. Затем нам нужно вписать эти идеи в макет, чтобы воплотить их визуально.Мокапы и каркасы очень полезны для создания макетов с большой гибкостью. Это лучшая практика, которую очень поощряют в отрасли.

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

Шаг 2. Настройка холста

Итак, у нас есть предварительный план для нашего макета. Давайте на самом деле соберем дизайн! Мы собираемся создать макет шириной 960 пикселей. Создайте новый документ размером 1200 x 1500.

Это макет шириной 960 пикселей, поэтому нам нужно определить рабочую область, добавив направляющие. Нажмите Ctrl + A , чтобы выделить весь документ.

Перейдите к Select> Transform Selection.Уменьшите выделение до 960 пикселей в ширину. Это рабочая область макета.

Добавьте направляющие линии к выделению.

Нам нужно создать отступ между границей и контентом, который мы добавим позже! С активным выделением снова выберите Transform Selection. Измените размер выделения до 920 пикселей в ширину. Это означает, что 20 пикселей заполнения с каждой стороны, всего 40 пикселей заполнения.

Добавить направляющие к выбору.

Шаг 3. Создайте заголовок

Создадим шапку макета! Сделайте выделение высотой 465 пикселей.

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

Добавьте градиент в заголовок. Дважды щелкните миниатюру слоя. Выберите Gradient Overlay. Создайте двухцветный градиент ниже. Воспользуйтесь настройками.

Это должно выглядеть так.

Далее нужно добавить подсветку в шапку. Создайте новый слой, нажав Ctrl + Alt + Shift + N .Выберите мягкую кисть диаметром 600 пикселей. Выберите цвет кисти # 19535a. Просто щелкните один раз в центре заголовка.

Сделайте выделение сверху высотой 110 пикселей.

Нажмите кнопку «Удалить», чтобы удалить выбранную часть. Это выглядит как показано ниже.

Сожмите его по вертикали, нажав Ctrl + T .

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

Создайте новый слой, нарисуйте линию выделения в один пиксель с помощью Pencil Tool с цветом # 01bfd2.

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

Примените вышеуказанный градиент.

Шаг 4: Создание узора текстуры

Теперь создайте простой узор в клетку и примените его к заголовку.Выберите Pencil Tool, установите размер кисти на 2 пикселя и добавьте две точки, которые соприкасаются друг с другом углами. Выключите фон и выделите точки. Выберите «Правка»> «Определить узор».

Создайте новый слой и поместите его ниже слоя с подсветкой. Выберите область, которую мы хотим применить к узору. Нажмите Shift + F5, чтобы загрузить диалоговое окно «Заливка». Выберите только что созданный узор. И хорошо.

Выбор заполнен узором. Присмотритесь.

Плавно перетяните узор в верхний колонтитул. Добавьте маску слоя к слою с узором. Возьмите мягкую кисть и рисуйте большой мягкой кистью. Выберите цвет кисти #ffffff. Уменьшите непрозрачность кисти примерно до 60% и раскрасьте. Если он вам покажется слишком сильным, отрегулируйте непрозрачность слоя индивидуально.

Красиво смешано.

Сводка

Название статьи

Как создать профессиональный веб-макет в Photoshop

Описание

Автор

Niranth M

Имя издателя

Уроки Photoshop

Логотип издателя