Как сделать макет или дизайн сайта в Photoshop « LosliDe

Ну а сейчас я постараюсь Вам как можно проще объяснить как сверстать шаблон для WordPress, если Вам были понятны прошлые мои уроки, то и этот урок будет прост для Вас. Но прежде чем начать давайте перечислим те инструменты, которые нам понадобятся:Локальный серверБез локального сервера на Вашем ПК ничего не получиться. Так как исправлять и редактировать наш шаблон лучше на локальном сервере чем на хостинге, так на много быстрее и удобнее.Подобных серверов на просторах интернета огромное количество. Я, например, пользуюсь сервером Денвер. Он прост в установке и в настройке. Как его установить и настроить Вы сможете найти на официальном сайте http://www.denwer.ru там же Вы сможете его и скачать.
После того как Вы установите Денвер Вам нужно будет установить сам WordPress на локальный сервер. Устанавливается не сложно, Вам всего лишь нужно скинуть файлы движка в указанную папку на ПК, и установить движёк. Подробно на этом останавливаться не буду.
Браузер ОпераПосле того как WordPress уже работает на Вашем компьютере, нам нужно установить, если у Вас её нет, Оперу не выше 12 версии, так как после того как Опера перешла на Вебкит, она лишилась HTML редактора, что очень плохо.Конечно же Вы можете использовать другой редактор, просто мне удобен именно от оперы, в нём можно посмотреть сразу результат. Пока что я так и не нашёл подобных редакторов, по этому до сих пор пользуюсь этим.И вот теперь когда у нас всё настроено и поставлено, а так же работает как часики мы будем заниматься самым интересным процессом, а именно вёрсткой шаблона HTML в шаблон для WordPress.Вступление

Сейчас хочу Вам немного рассказать как в настоящее время у меня проходит процесс верстки. Так как у меня шаблонов уже несколько, я наработал некий шаблон вёрстки, по которому проходит весь процесс. Таким образом я просто меняю изображения и стили, и немного редактирую код на локальном сервере, до то желаемого результата. Надеюсь понятно объяснил.Самый сложный был первый шаблон, в который нужно было вставлять код отдельно. Ох и намучился я. Но всё же получилось. А второй шаблон я уже делал по первому и так далее.ФайлыТеперь нам нужно создать файлы в которые мы потом будем помещать весь код шаблона. Для начала создайте новую папку и назовите её как угодно Вам. Открываем папку и создаём ещё одну папку под названием images. В этой папке у нас будут храниться все изображения шаблона. А изображения нужно скопировать с нашего HTML шаблона в папку images будущего шаблона для WordPress.После этого создаём следующие текстовые файлы и не забываем менять формат *txt на формат *php. Вот полный список файлов:

Создайте яркий макет портфолио в Фотошоп / Creativo.one

Как всегда, вот то, что мы получим в итоге:

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

Текстура

Небо

Иконки

Архив

Шаг 1

Создаем новый документ 1080 на 1200 пикселей.

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

Для начала разметим область основного блока, для этого устанавливаем две вертикальные линии на 90 и 990 пикселей. Таким образом, 900 пикселей по середине  — это наш основной блок, а области по 90 пикселей — отступы.

Шаг 2

Теперь займёмся горизонтальной разметкой. Устанавливаем направляющие на следующих координатах:

20 px
170 px
200 px
650 px
1000 px
1165 px

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

Шаг 3

Самое скучное позади, перейдём к работе непосредственно над дизайном. Создаем новый слой «gray background». Выделяем весь документ и заливаем его цветом #B2B2B2. Далее выделяем область от 0 до 650 пикселей и заливаем её цветом #0BA5D1 на новом слое «blue background».

Должно получиться так:

Шаг 4

На новом слое «main content area» с помощью инструмента Rounded Rectangle ( Прямоугольник со Скругленными Углами) рисуем основной блок с радиусом скругления в 10 пикселей и заливаем его цветом #EFEFEF.
Ориентируйтесь на разметку. Прямоугольник должен начинаться от самого верха и заканчиваться у линии на тысячном пикселе.

Получится примерно так:

Шаг 5

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

Drop Shadow (Тень), Outer Glow (Внешнее свечение), Inner Glow (Внутреннее свечение), Stroke (Обводка).

Вот таким будет результат:

Шаг 6

А мы продолжаем!

Создаем новый слой «top bar» и выделяем область сверху до первой горизонтальной линии. Заливаем область цветом #007BA4.

На новом слое «blue header cover» выделяем остальную голубую область (ориентируйтесь на картинку ниже, чтобы понять, что я имею в виду). Заливаем выделенное тем же голубым цветом, каким мы заливали верхнюю часть фона.

А теперь создаём слой «footer». Выделяем область от последней горизонтальной линии разметки до самого низа и заливаем её темно-серым #8F8F8F.

Также нам нужно понизить непрозрачность скруглённого прямоугольника (основного блока) до 20%.

Получится так:

Шаг 7

Создаем новый слой “header lights” и большой мягкой кистью рандомно расставляем вот такие блики, как показано ниже. Как это будет готово, меняем режим наложения на Overlay

(Перекрытие) и понижаем значение непрозрачности до 40%.

Шаг 8

На новом слое “header shadows” и тем же способом, но чёрной кистью расставляем тени. Меняем режим наложения на Overlay (Перекрытие) и понижаем значение непрозрачности до 30%.

Шаг 9

Открывем текстуру. Меняем ширину на 1080 пикселей и добавляем текстуру в наш проект на новый слой “texture paper”. Жмём Image – Adjustment – Desaturate (Изображение – Коррекция – Обесцветить), меняем режим наложения на Overlay (Перекрытие) и устанавливаем значение непрозрачности на 50%. Теперь применяем

Filter – Sharpen – Sharpen (Фильтр – Резкость – Резкость+), чтобы детализировать нашу текстуру:

Шаг 10

Слои с бликами и тенями слишком выделяются, нам нужно сделать их более реалистичными. Применяем Filter – Blur – Motion Blur (Фильтр – Размытие – Размытие в движении) со следующими настройками:

Шаг 11

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

Создаем новый слой “white border left”. Убедитесь, что слой находится под слоем с текстурой на сверху всех остальных, то есть он должен быть вторым сверху. Возьмём однопиксельную максимально жёсткую кисть и нарисуем волнообразную вертикальную линию, как показано ниже.

Теперь мы будем использовать Free Transform (Свободной трансформирование). Выделите волну и «ужмите» ее с краёв так, как показано ниже. Чтобы сделать ее жирнее, дублируйте волну и объедините дубликат с оригиналом.

Шаг 12

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

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

Шаг 13

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

Меняем режим наложения на Multiply (Затемнение) и устанавливаем значение непрозрачности слоя на 50%. Используя большой мягкий ластик , подтираем изображение по краям, чтобы убрать резкий переход.

Шаг 14

С помощью направляющих разметки, определите место для меню – область между горизонтальными линиями на 170-м и 200-м пикселях. Добавляем текст. Я использовал Arial 14 pt c расстоянием между символами в -50. Удостоверьтесь, что слой с текстом находится под слоем с текстурой.

Создаем прямоугольник со скруглёнными углами под ссылкой “home” радиусом 5 пикселей. Понижаем непрозрачность до 25%. Как вы уже догадались, мозговитые вы мои, это заготовка для “hover state”.

Шаг 15

Заполняем шапку контентом, добавляем лого и цитату.

Шаг 16

Теперь заполняем контентом нижнюю часть макета. Для текста я использовал Arial, а иконки можно взять в архиве к уроку. Оставим иконки полупрозрачными.

Шаг 17

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

Шаг 18

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

Дублируем слой и отражаем его по вертикали. Помещаем его у нижнего края, как показано на картинке.

Шаг 19

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

Сначала выделим круглую область для кнопки. Удерживайте Shift, чтобы круг получился идеально прямым. Заливаем выделение темно-серым и жмём Select – Modify – Contrast (Выделение – Модификации – Сжать). Сжимаем выделение на 2 пикселя и заливаем его светло-серым градиентом. Вот, что получится:

Шаг 20

Рисуем сверху стрелку влево. Объединяем ее со слоем с кнопкой и применяем к новоиспечённому слою следующие стили:

Drop Shadow (Тень), Inner Shadow (Внутренняя тень).

Шаг 21

Дублируем слой, отражаем по горизонтали дубликат и располагаем его справа. Создаем слой “button shadows”. Убедитесь, что слой находится под слоем с примером портфолио. Используйте мягкую чёрную кисть с низким значением непрозрачности и “нарисуйте” тень под каждой кнопкой. Это добавит глубины.

Шаг 22

Итак, заканчиваем. Создаем новый слой над слоем с голубой шапкой и назовём его “shadows/highlights”. Используя большую мягкую кисть добавляем тени и блики.

И готово!

Я надеюсь, вам действительно понравился этот урок! Спасибо за внимание!

Автор: Tom Ross          

Создаём шаблон автомобильного сайта в Photoshop CS6

Ставим кистью пятно в левом верхнем углу:

Затем с помощью инструмента «Перемещение» (Move Tool) поднимаем слой с пятном несколько вверх и задаём слою непрозрачность 70%:

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

• Семейство шрифтов (Font Family): Avanti Regular (шрифт скачать по ссылке внизу)
• Высота кегля (Font Size): — 59пт
• Трекинг (Tracking): 5
• Масштаб по горизонтали (Horizontally Scale) — 115%
• Цвет (Color): #91d4f5

Для удобства включаем линейки (Ctrl+R) и ставим направляющие, горизонтальную 92 пикс, вертикальную — 104 пикс, в перекрестье направляющих и будет начальная позиция текста логотипа сайта. Пишем логотип «Автомобили» или типа того, на рисунке показан масштаб документа в натуральную величину:

Для шрифта слогана задаём следующие параметры:

• Семейство шрифтов (Font Family): Avanti Regular
• Высота кегля (Font Size): — 19пт
• Трекинг (Tracking): -35
• Масштаб по горизонтали (Horizontally Scale) — 100%
• Цвет (Color): #cdcdcd

Начальная позиция — 104 пикселя по ширине и высоте:

В левом верхнем углу, используя текст семейства Arial белого цвета и высотой 20пт напишите регистрационную форму и форму входа:

Горизонтальное меню

Создаём новую группу слоёв «Main Menu», где будут размещены все элементы горизонтального меню.

Создаём векторную фигуру шириной 980 и высотой 44 и радиусом скругления 5 пикселей, цвет заливки — чёрный. Левый верхний угол фигуры расположите на 140 пикс ниже и 110 пикс ниже и левее от краёв соответственно. Это будет рамка меню:

Добавим к фигуре стиль слоя «Обводку» (Stroke) с параметрами:

• Размер (Size) — 1 пикс
• Цвет обводки — #656565
• Положение — внутри (Inner)
• Непрозрачность (Opasity) — 75%

Активируем инструмент «Текст», задаём параметры:

• Семейство шрифтов (Font Family): Arial Regular
• Высота кегля (Font Size): — 14пт
• Масштаб по горизонтали (Horizontally Scale) — 110%
• Цвет (Color): белый

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

Теперь следует разграничить пункты этого меню. Создаём новый слой, называем его «menu divider», берём инструмент «Карандаш» (Pencil Tool) диаметром 1 пиксель и цветом, как и у рамки, #656565, зажимаем клавишу Shift и проводим вертикальную полосу от верхнего края рамки до нижнего:

Затем копируем слой и инструментом «Перемещение» (Move Tool) перетаскиваем вправо для разграничения следующих пунктов. Повторяем это действие необходимое количество раз.

Делаем подсветку активного пункта меню. Для этого ниже слоя «menu divider» создаём новый слой и называем его «active».

Для того, чтобы подсветка получилась только на пункте меню, с помощью инструмента «Прямоугольная область» (Rectangular Marquee Tool) выделяем его. Граница выделения должна проходить внутри обводки пунков! Затем берём инструмент Кисть» с параметрами:

Размер кисти (Brush size): — равен ширине пункта
Жёсткость(Hardness): 15%
Непрозрачность(Opacity): 100%
Нажим (Flow): 100%
Цвет: #60c0f0

И ставим отпечаток вот таким образом:

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

Пользовательское блок-меню

Создаём новую группу слоёв и называем её «Users-block-menu».
Поставьте две вертикальные направляющие на расстоянии 110 и 1090 пикселей от левого края (так, чтобы они касались краёв рамки меню), и две горизонтальные на расстоянии 211 и 513 от верхнего края:

Берём инструмент «Линия» (Line Tool), задаём режим «Фигура», цвет заливки #656565, толщина — 1 пикс, и проводим две горизонтальные линии от перекрестья до перекрестья направляющих, как показывают оранжевые стрелки на рисунке:

Снимаем направляющие, нажав Ctrl+H и видим две горизонтальные параллельные линии серого цвета:

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

Скачать готовый PSD-файл и шрифт Avanti Regular:

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

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

 

 

 

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

Шаг 1

Откройте Photoshop,  перейдите в меню File> New, введите имя для будущего PSD-файл и ширину и высоту (1000 × 1400 пикселов).

Совет: Сохраните документ прямо сейчас, чтобы потом облегчить процесс сохранения файлов. Для это нажмите Файл> Сохранить как. В дальнейшем вам нужно будет просто нажать Ctrl / Cmd + S для сохранения обновлений.

Нажмите Ctrl / Cmd + R для отображения линейки, чтобы в дальнейшем создавать направляющие, которые очень помогут при создании каждого элемента. 

Создайте первую горизонтальную направляющую на отметке высоты в 60 pх. Создайте новую группу и в ней новый слой, который назовите «menu».  Используя инструмент Rectangular Marquee Tool (M), создаем прямоугольник размерами 1000x60px темно-синего цвета — # 112d3b.

Используйте инструмент Text tool (T) , создаем основные элементы меню. В уроке был использован шрифт  Helvetica Neue  с цветом # cde1ea.

Создайте новый слой и создать на нем прямоугольник ( размерами 80 * 70 px).

Перейдем в меню Layer> Layer Style, чтобы добавить наложение градиента и внутренние тени.

Создайте снова новый слой с линией размерами в 3px, используя тот же темно-синий цвет, что и для прямоугольника menu. Используя  Custom Shape Tool (U), создаем треугольник в середине предыдущего прямоугольника. 

Используйте еще раз инструмент Текст (T), чтобы добавить белую ссылку.

Смотрите результат ниже.

Шаг 2

Карта была скачана с ресурса Shutterstock.  EPS файл открываем в  Illustrator, выбираем бэкграунд, копируем его и вставляем в документ Photoshop. Создаем группу и  разместим новый слой в нее 

Используйте инструмент Text (T), чтобы создать название вашей карты. Размещаем  в центре вашего документа и добавить  следующие стили слоя. Уменьшить сейчас непрозрачность заднего плана до 40%.

Возвращаемся в Illustrator и копируем карту. Вставляем копию в документ Photoshop.

Шаг 3

Создаем блок, который будет размещен на правой стороне карты и будет использоваться для отображения важных данных, опубликованных на карте. Чтобы создать этот блок, создаем новую группу (меню Layer> New> Group) и называем ее legend.

Используйте теперь Rectangle Marquee Tool (U), чтобы создать  прямоугольника (с размером 120x320px). Уменьшите непрозрачность слоя до 40%.

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

Создаем новый слой, который назовем glow. Изменяем цвет переднего плана на белый. Изменяем настройки градиента, чтобы получить радиальный градиент. Теперь используем его для создания белого свечения. Переключаем режим смешивания на Overlay.

Импортируем изображения земного шара из Illustrator в Photoshop и помещаем его над белым свечением.

Чтобы закончить работу с этим блоком, добавляем текст с помощью инструмента  Text (T), используя цвет #d7e7ee. Добавляем к тексту тень. 

Шаг 4

С помощью  Text  (T) добавляем дополнительные текстовые элементы. Используем для них те же тени, которые мы использовали для текста предыдущего блока. 

Шаг 5

Используйте прямоугольник со скругленными углами (U) и радиусом 3px для создания 3 прямоугольников ((280x174px).  Размещаем их, как показан на изображении ниже. 

Теперь нужно уменьшить их непрозрачность  до 20% и переключить режим смешивания на Overlay. 

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

Используйте инструмент Текст (T), чтобы добавить свой заголовок. Добавляем ту же тень, что и к слою menu (слой menu> Layer Style> Drop Shadow).

Теперь нужно создать два градиента, которые будет использовать для создания эффектов свечения и тени. Создаем новый слой, который назовем  light gradient. Изменяем цвет переднего плана на белый и создаем радиальный градиент (от цвета переднего плана к прозрачному). 

Нажимаем Ctrl / Cmd + T, чтобы сделать активным инструмент Free Transform и уменьшаем высоту. Уменьшить непрозрачность слоя до 30% и изменяем режим смешивания на Soft Light.

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

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

С помощью инструмента Text (T), создаем некоторые сноски. 

Шаг 6

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

Импорт из файла EPS  иконку синего парня. Увеличиваем его размера и нажмите клавишу Enter  для подтверждения импорта.

Используйте Text Tool (T), чтобы добавить в правый блок текст. Создаем  на правой нижней части блока прямоугольник с закругленными углами  желто цвет # f9a61a и размерами  80 × 22 пикселей (используйте Rounded Rectangle Tool (U) с радиусом 2 пикселя).

На этом прямоугольнике, добавьте 3 стили слоя: Inner Shadow, Gradient Overlay и  stroke), чтобы получить результат, как на изображении ниже. 

Используйте инструмент Текст (T), чтобы добавить к кнопке название. Цвет текста — # 865f11, также к нему добавляем тень. 

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

Настало время, чтобы начать создавать третьего блока. В верхней части блока еще раз создаем название. 

Импортируем два желтые значки. 

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

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

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

Шаг 7

Создать первый синий прямоугольник (# 102d3a), который заполнит нижнюю часть изображения.

Создаем новый слой, который назовем shadow. Изменяем цвет переднего плана на черный и создаем градиент от черного к прозрачному. 

К слою «Тень»  добавляем маску слоя ( (в меню Layer> Layer Mask> Reveal All), с помощью Rectangle Marquee Tool (M) создаем выделение от левой границы к центру и заполняем его нашим градиентом. Аналогичные шаги  делаем для правой стороны. 

Используйте инструмент Текст (T), чтобы создать названия новых блоков. Добавить тень (меню Layer> Layer Style> Drop Shadow).

Используйте Rounded Rectangle Tool (U), чтобы создать белый прямоугольник (280 × 260 пикселей).

Включите режим смешивания blending mode прямоугольника на overlay и уменьшите  непрозрачность до 20%.

За первым прямоугольником, создайте второй белый прямоугольник с размерами 260x150px  и отступом 10px).

Импортируйте изображение в это  блок. Щелкните правой кнопкой мыши на слой с фотографией и и выберите  “create a clipping mask”, чтобы создать обтравочную маску. 

Под изображением с помощью инструмента текст(T) добавляем дату желтого цвета (# fbbf21) и основным текстом (синий # abbfc9). Между датой и текстом оставьте немного места. 

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

Дублируйте желтую кнопку, созданную ранее и переключите цвет ее с желтого на синие  (# 5a91aa, 102b38).

Теперь, первый блок закончен.

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

Шаг 8

Создаем новый слой, который назовем «shadow». Создаем выделение по ширине наших изображений с помощью инструмента Rectangle Marquee, а затем с  помощью Gradient Tool (G), заполняем выделение градиентом, который использовали в предыдущем шаге. 

К слою добавляем маску (layer>blending mask>reveal all). С помощью градиента два градиента — от левой стороны к центру, и правой стороны к центру. 

Шаг 9

С помощью инструмента Text (T) формируем поле для ввода электронного адреса. Для заголовка используем цвет синий ( #9ec4d5), для основного текста (#cce0e9).

С помощью инструмента Rounded Rectangle Tool (U)  с права создаем поле для формы ( прямоугольник цветом # 091a21  и размерами 290x40px), а также кнопку (цвет прямоугольника # 5e96ae, размеры 100x40px).

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

С помощью Text tool (T)  добавляем надпись “Insert your mail…”, цветом  #1d4f66.

Добавить сейчас к кнопке описание, используя цвет # 102d3a (в примере был использован шрифт Helvetica Neue LT Std). Добавляем тень к желтой и синей кнопкам. 

Шаг 10

Создаем футер. С помощью Rectangle Tool (U), создаем синий прямоугольник (# 091a21)  размерами 1000 х 90 пикселей.

С помощью инструмента Текст (T) добавляем авторские права. Используем цвет #cce0e9 и #668491 ( для второй строки).

STEP 11 CREATE A LOGO

To finish this theme, return to the top to create the logo. Then, go back to the group Menu created during the Step 1.

Create first a rectangle with same colour than the one used for the menu. Create it 10pixel more than the menu on the bottom (check the picture below).

Шаг 11

Последним шагом будет создание логотипа. Вернемся к группе Menu, которую создавали в шаге 1. Создаем первый прямоугольника с таким же цветом, как использовали в меню. Размещаем его на 10 пикселей ниже. 

Затем последний раз переходим к файлу your.eps (в Illustrator) и импортируем иконку с человеком. Добавляем некоторые стили слоя.  Layer> Layer Style> Color Overlay. Используем цвет  # Dfecf1.

С помощью  Text Tool (T) добавляем имя для сайта. Шрифт — Helvetica Neue LT Std, цвета — dfecf1 # и # 6187b7.

Создаем новую группу и помещаем в нее иконку и текст.

Шаг 12

Дублируйте группу с логотипом, затем с помощью Move Tool (V) размещаем копию в  правом углу Footer.

 

 

Автор — grafpedia

Перевод — Дежурка

как сделать дизайн и передать исходники верстальщику — статьи на Skillbox

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

Популярный редактор — Adobe Photoshop. Это универсальный инструмент для работы с любой графикой: фотографы обрабатывают там снимки, иллюстраторы занимаются рисунками, а веб-дизайнеры делают макеты. Файл, в который сохраняется макет в Photoshop, имеет расширение .psd. Его отправляют разработчикам как PSD-макет для сайта.

Photoshop — универсальный редактор, и поэтому его довольно непросто освоить. Чтобы не тратить много времени на изучение функций, можно использовать новое поколение программ, предназначенных специально для веб-дизайна: Adobe XD, Figma, Sketch.

Некоторые дизайнеры рисуют макеты в других редакторах. Кто-то пользуется Adobe Illustrator или Adobe InDesign.

Перед тем как выбрать программу для создания макетов, поговорите с верстальщиком. Удобно ли ему будет пользоваться Photoshop или лучше нарисовать всё в Sketch? Или он пользуется Zeplin, поэтому неважно, в какой программе вы рисуете?

Создавайте макет по правилам. Это упростит работу над внешним видом и облегчит процесс вёрстки.

• Выберите цветовую модель RGB перед созданием макета. Это стандарт для мониторов и экранов.
• Пользуйтесь сеткой, чтобы выравнивать контент внутри макета.
• Не увеличивайте маленькие картинки.
• Изменяйте размер изображений с зажатой клавишей Shift, чтобы сохранять пропорции.
• Если нужен наклонный или жирный текст, выбирайте одно из начертаний шрифта. Не пользуйтесь псевдостилями, чтобы изменить внешний вид букв в Photoshop и других редакторах.

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

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

Чтобы создать порядок в слоях:

• удалите скрытые и пустые,
• сгруппируйте по смыслу,
• напишите для каждого название.

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

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

Все элементы, которые нельзя отобразить с помощью HTML и CSS, необходимо вынести на отдельную страницу макета. Обычно так поступают с иконками, карточками и некоторыми кнопками. Чтобы сэкономить время верстальщику, элементы можно сразу экспортировать в формат PNG или SVG.

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

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

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

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

Анимированные макеты используют не только для демонстрации сайта в портфолио или презентации заказчику.

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

Как создать макет сайта: инструкция по созданию прототипа сайта

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

Наши продукты помогают вашему бизнесу оптимизировать расходы на маркетинг

Узнать подробнее

Что такое макет сайта и для чего он нужен

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

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

Преимущества

Разработка макета сайта позволяет:

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

Этапы разработки макета сайта

При разработке макета для сайта: 

1. Определяют цели работы и характеристики сайта.
2. Планируют структуру сайта.
3. Рисуют прототип, чтобы утвердить структуру. Это схема без дизайна, где располагают блоки будущего сайта (шапка, слайдер, кнопки и пр.). Это экономит время на этапе отрисовки макета.
4. Разрабатывают дизайна. В один файл собирают цвета, шрифты, фото и видео, иконки – все то, что задаст настроение будущему сайту.
5. Создают окончательный дизайн-макет страницы, а при необходимости макет для мобильной версии.

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

Способы создания макета сайта

Для разработки макета многие пользуются Фотошопом или инструментами сайтов-конструкторов. Рассмотрим каждый способ подробнее.

Шаблон сайта в Photoshop

С помощью Фотошопа можно разрабатывать простые макеты для проектов заказчиков. Для этого:

1. Создаем документ нужных размеров:

Кликаем на «Файл», затем «Создать». В поле вводим параметры полей. Размер желательно делать на 200 пикселей больше для максимального соответствия с реальным размерам сайта.

1. Включаем линейки и активируем сетку. 

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

1. Прорабатываем фон для будущей страницы. 

Это может быть любой цвет или картинка по теме сайта. Если нужен фон однородного цвета, то в инструментах выбираем «Заливку» и нужный цвет.

1. Вставляем логотип компании при помощи стандартного инструмента.

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

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

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

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

Запишите свои требования перед созданием макета веб-сайта

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

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

.

Холст

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

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

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

Для Интернета разрешение ограничено до 72. В последнее время на iPad и некоторых планшетах появились изображения и страницы с более высоким разрешением. Но это бывает редко, и лучше придерживаться 72, учитывая скорость интернета во всем мире.

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

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

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

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

Учебник поможет вам создать веб-макет с минимальным дизайном.

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

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

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

Этот урок научит вас создавать современный макет портфолио в Photoshop.

Создание очень простого веб-макета портфолио с помощью Photoshop

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

Создание гранжевого полупрозрачного дизайна веб-портфолио

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

Создайте макет Fashion Web (шаблон PSD) с помощью Photoshop

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

Создание веб-макета компании / бизнеса с помощью Photoshop

Это руководство поможет вам создать веб-макет бизнес-типа.

Создание веб-шаблона с использованием «системы сетки 960»

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

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

Вот руководство по созданию веб-макета в оранжевом стиле в Photoshop.

Создайте экологичный / экологичный веб-макет

Это руководство посвящено созданию веб-макета на тему среды.

Создание макета веб-сайта портфолио / бизнеса

Здесь проиллюстрировано еще одно руководство по созданию макета на бизнес-тему.

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

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

Студия графического дизайна Web Layout

Учебное пособие по созданию графического веб-макета в Photoshop.

Создание темы WordPress для журнала с нуля в Photoshop

Создайте макет журнала в Photoshop.

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

Вот еще один урок по созданию красочного веб-макета.

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

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

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

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

Как создать впечатляющий макет блога в Photoshop

Урок посвящен созданию впечатляющего веб-макета в Photoshop.

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

Научитесь создавать элегантные веб-макеты в Photoshop.

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

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

Как создать макет сайта с высокой текстурой в Photoshop

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

Создание веб-макета с 3D-элементами с помощью Photoshop

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

Дизайн макета типографики

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

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

Учебник посвящен созданию современного веб-макета в Photoshop.

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

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

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

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

Дизайн гранж-темы WordPress

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

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

Вот руководство по созданию веб-макета с бумажной тематикой в ​​Photoshop.

Разработка макета портфолио фрилансера

Учебное пособие посвящено созданию веб-макета на тему фрилансера в Photoshop.

Создайте легкую тему WordPress в Photoshop

Этот урок посвящен созданию легкого веб-макета в Photoshop.

Макет портфолио фотографа

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

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

Этот урок посвящен созданию зеленого и гладкого веб-макета в Photoshop.

Создать темную тему WordPress

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

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

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

Учебник по веб-дизайну в стиле гранж

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

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

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

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

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

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

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

Создайте безобразный веб-дизайн

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

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

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

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

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

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

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

8 9000 Учебник

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

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

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

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

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

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

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

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

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

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

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

Учебник по веб-дизайну: Блог / Шаблон портфолио!

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

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

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

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

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

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

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

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

Новый макет направляющих в Photoshop CC

Старый способ добавления направляющих в Photoshop

Прежде чем мы узнаем все о функции New Guide Layout, давайте быстро рассмотрим «старый способ» добавления направляющих.Традиционно мы начинали с включения линейок Photoshop, переходя к меню View в строке меню в верхней части экрана и выбирая Rulers :

Переход к меню «Просмотр»> «Линейки».

Линейки размещаются вдоль верхней и левой стороны документа:

Линейки теперь видны сверху и слева.

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

Перетаскивание вертикальной направляющей из линейки слева.

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

Перетаскивание горизонтальной направляющей из линейки по верху.

Этот способ добавления направляющих путем перетаскивания их за пределы линейки по-прежнему работает даже в последних версиях Photoshop, но в Photoshop CC есть лучший способ — воспользоваться преимуществом опции New Guide Layout.Посмотрим, как это работает.

Плагин шорткодов, действий и фильтров

: ошибка в шорткоде [ ads-basics-middle ]

Новая опция компоновки направляющих

Чтобы получить доступ к опции New Guide Layout, перейдите в меню View в верхней части экрана и выберите New Guide Layout . Опять же, это доступно только в Photoshop CC:

.

Переход к «Просмотр»> «Новый макет направляющей».

Откроется диалоговое окно «Новый макет направляющей». Из этого единственного диалогового окна мы можем легко добавить любое количество строк и столбцов в наш макет.Мы можем указать точную ширину для столбцов или точную высоту для строк или позволить Photoshop разместить их одинаково для нас! Мы можем добавить промежуток между направляющими и поля сверху, слева, снизу и справа от нашего документа. Мы даже можем сохранить наш собственный макет в качестве предустановки, чтобы мы могли быстро загрузить его снова в следующий раз, когда он нам понадобится!

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

Диалоговое окно New Guide Layout.

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

Макет направляющих по умолчанию плюс две исходные направляющие.

Удалить существующие направляющие

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

Выбор «Очистить существующие направляющие».

И теперь эти предыдущие руководства ушли, оставив мне только мой новый макет из восьми столбцов:

Предыдущие направляющие удалены.

Изменение количества столбцов

Чтобы изменить количество столбцов в макете, просто измените значение в поле Number . Понижу значение с 8 до 4 :

Уменьшение количества столбцов с 8 до 4.

Photoshop мгновенно обновляет макет, изменяя количество столбцов и равномерно распределяя их слева направо:

Макет теперь содержит четыре равноудаленных столбца вместо восьми с зазором 20 пикселей между ними.

Вариант предварительного просмотра

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

Следует отметить опцию предварительного просмотра.

Замена желоба

Пространство между столбцами (и строками) называется желобом . Чтобы увеличить или уменьшить желоб, измените значение в поле Желоб . Размер поля по умолчанию составляет 20 пикселей, что добавляет 20 пикселей между столбцами.На самом деле я собираюсь полностью удалить желоб, выделив значение Gutter с помощью мыши и нажав клавишу Backspace (Win) / Delete (Mac) на клавиатуре. Это очищает значение Gutter и оставляет поле пустым:

Удаление промежутка между столбцами путем очистки значения Gutter.

Если поле Gutter пусто, между столбцами больше нет пробела:

Удалено пространство между столбцами.

Загрузите это руководство в виде готового к печати PDF-файла!

Определение ширины столбца

По умолчанию Photoshop автоматически изменяет размер столбцов так, чтобы они равномерно распределялись по документу слева направо, но мы можем сами установить ширину, введя значение в поле Ширина .Например, я введу ширину столбцов 150 пикселей :

Ввод определенной ширины столбцов.

Photoshop снова обновляет макет, на этот раз устанавливая ширину каждого столбца ровно 150 пикселей:

Макет после указания ширины столбцов.

Центровка колонн

Обратите внимание, что столбцы больше не центрируются в документе. Вместо этого они сдвинуты влево. Чтобы центрировать их после того, как вы ввели определенную ширину, выберите опцию Center Columns внизу диалогового окна:

Включение опции «Центральные столбцы».

Если установлен флажок «Центральные столбцы», столбцы снова центрируются в макете:

Макет после центрирования колонн.

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

Чтобы добавить строки в макет, сначала выберите параметр Rows (по умолчанию он отключен):

Включение рядов.

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

В моем случае я собираюсь установить количество строк на 3 , и я также изменю количество столбцов на 3 . Я оставлю поле «Ширина» для столбцов и поле «Высота» для строк пустым, чтобы позволить Photoshop разместить их одинаково, а также оставлю поля «Промежуток» пустыми:

Установка для столбцов и строк значения 3.

Это быстрый и простой способ создания стандартной сетки 3 на 3, которую я, возможно, захочу использовать, чтобы упорядочить и скомпоновать различные элементы в моем документе, используя «правило третей»:

Стандартная сетка 3 на 3, которую легко создать с помощью функции New Guide Layout.

Добавление полей

Чтобы добавить поля по краям документа, сначала выберите параметр Margin , чтобы включить его, затем введите количество места, которое вы хотите добавить, в поля Top , Left , Bottom и Right . В моем случае я установил все четыре значения на 20 пикселей :

Добавление полей к макету.

Это добавляет 20 пикселей пространства вокруг внутренних краев моего документа. Photoshop автоматически изменяет размер столбцов и строк соответственно:

Тот же макет 3 на 3 с добавленными полями.

Мы даже можем добавить отрицательные поля, просто введя отрицательные значения. Отрицательные поля могут быть полезны при добавлении элементов в документ или при выделении большего размера, чем видимая область документа (холст). Я изменю каждое из четырех значений (верхнее, левое, нижнее и правое) на –20 пикселей :

Добавление отрицательных полей к макету.

Это дает мне те же поля шириной 20 пикселей, но перемещает их за пределы видимой области документа. И снова Photoshop автоматически изменяет размер столбцов и строк:

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

Сохранение пользовательского макета руководства как предустановки

Если вы знаете, что в будущем вам потребуется снова создать этот же макет направляющей, вы можете сэкономить время, сохранив макет как предустановку. Щелкните поле Preset в верхней части диалогового окна (где написано «Custom»):

Щелкните поле выбора Preset.

Это открывает меню с несколькими встроенными предустановленными макетами на выбор (8 столбцов, 12 столбцов, 18 столбцов и 24 столбца), но нам нужен вариант Сохранить предустановку :

Выбор опции «Сохранить предустановку».

Когда появится диалоговое окно «Сохранить», введите описательное имя для новой предустановки в поле Сохранить как . Я назову свой «cols-3-rows-3-margins-neg20px». Затем нажмите кнопку Сохранить :

Присвоение имени и сохранение новой предустановки.

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

Пользовательская предустановка появится в списке.

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

Щелкните OK, чтобы принять новый макет.

Скрытие и очистка направляющих

Чтобы временно скрыть макет направляющей от просмотра в документе, перейдите в меню Просмотр , выберите Показать , затем выберите Направляющие . Сделайте то же самое снова, чтобы снова включить его. Или просто нажмите Ctrl +; (Победа) / Command +; (Mac) на клавиатуре для включения и выключения направляющих:

Переход к «Просмотр»> «Показать»> «Направляющие» для включения и выключения макета.

Чтобы полностью очистить макет направляющих, перейдите в меню View и выберите Clear Guides :

Переход к меню «Просмотр»> «Очистить направляющие».

Научитесь создавать игровой макет в Photoshop

Что мы будем создавать

ресурсов, используемых в этом учебном пособии

Начиная с фона

Создайте новый документ (Ctrl + N) размером 1200 x 1340 пикселей с черным цветом фона # 000000. Скачайте и скопируйте обои от «Taenaron» на свой холст.

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

Related : 10 лучших игровых маршрутизаторов для PS4, Xbox one, Xbox 360 и Call of Duty

Создание заголовка

Выберите инструмент «Прямоугольник со скругленными углами» (U) с радиусом 10 пикселей (по умолчанию должно быть 10 пикселей), затем растяните белый прямоугольник #ffffff в верхнем левом углу холста.

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

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

Внутри прямоугольника добавьте заголовок и слоган веб-сайта с помощью инструмента «Текст» (T).

Теперь добавьте следующие стили слоя к первому слову «Gaming» в заголовке.

Теперь добавьте следующие стили слоя ко второму слову «Портал» в заголовке.

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

Создание навигации

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

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

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

Теперь нам нужно создать наш собственный узор диагональных линий. Создайте новый документ (Ctrl + N) 9 × 9 пикселей, выберите «Инструмент масштабирования» (Z) и увеличьте масштаб холста настолько, насколько сможете. После увеличения выберите «Pencil Tool» (B) и скопируйте изображение ниже.

После репликации перейдите в «Редактировать> Определить узор», сохраните узор и вернитесь к своему макету.Выберите слой с прямоугольником навигации, затем загрузите выделение вокруг него.

Быстрый совет:

Чтобы загрузить выделение, щелкните маленькую миниатюру в окне слоев на нужном слое, удерживая нажатой клавишу CTRL на клавиатуре.

Теперь выберите инструмент «Заливка» (G), затем выберите диагональный узор из списка узоров.

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

Выберите «Инструмент ввода» (T), затем просто введите желаемую навигацию.

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

Теперь выберите «Elliptical Marquee Tool» (M) и нарисуйте небольшой эллипс в правой части навигации. Залейте эллипс (G) белым цветом #ffffff, затем добавьте размытие по гуасу к эллипсу «Фильтр> Размытие> Размытие по Гуасу», размыте эллипс примерно на 5 пикселей.

Добавьте «Внешнее свечение» к слою эллипса, используя настройки ниже.

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

Создание полей содержимого

Выберите инструмент «Прямоугольник со скругленными углами» (U), затем создайте 3 поля друг над другом.

В каждое поле добавьте следующие стили слоя.

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

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

Рекомендуемая коробка

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

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

Теперь с правой стороны трех изображений меньшего размера создайте белый жирный заголовок #ffffff с фиктивным текстом.Повторите это для всех трех изображений, затем разделите каждый слайд разделителем, используя «Дефисы» (—-).

Связанные : Лучшие игровые маршрутизаторы до 200 долларов

На большом изображении теперь собирались добавить простой блок подписи. Выберите инструмент «Rectangular Marquee Tool» (M), затем растяните прямоугольник над большим изображением. Как только вы создали прямоугольник, залейте его черным цветом # 000000 и установите непрозрачность на 75%.

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

в смеси

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

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

Наконец, под каждым изображением добавьте название игры и платформу.

Поле содержимого 3

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

Создание нижнего колонтитула

Выберите инструмент «Прямоугольник со скругленными углами» (U), затем вытяните прямоугольник такого же размера, как и прямоугольник навигации.

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

Внутри прямоугольника нижнего колонтитула добавьте информацию об авторских правах и некоторые значки социальных сетей из «Icon Shock Icon Pack».

• Социальные иконки от Iconshock

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

Заключение

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

Приобрести Psd сейчас

ЭТОТ ЗАПИСЬ МОЖЕТ СОДЕРЖАТЬ ПАРТНЕРСКИЕ ССЫЛКИ. ПОЖАЛУЙСТА, ПРОЧИТАЙТЕ РАСКРЫТИЕ ДЛЯ БОЛЕЕ ПОДРОБНОЙ ИНФОРМАЦИИ.

Ричард — креативный дизайнер и блогер. Он пишет для Crayonify о графике, креативности и UX-дизайне.Ричард любит раскрывать свои творческие способности с помощью письма.

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

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

Как создать чистый макет веб-сайта в PhotoshopЧасть 2Шаг 9 Создайте новую форму: ширина 940 пикселей, высота 372 пикселей. Убедитесь, что вы заполните его, иначе следующий слайд не будет работать.

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

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

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

Шаг 11: добавьте дополнительные значки. Добавьте их в наш дизайн.

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

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

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

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

Шаг 14 Создайте кнопку «Подробнее» с помощью инструментов, которые мы использовали ранее. Параметры наложения -> Внутренняя тень, Тень, Наложение цвета (# 919392).

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

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

Step 17

Вашим следующим блоком может быть раздел под названием «Партнеры», или вы можете захотеть продемонстрировать свои последние сообщения в блоге.Используйте инструмент Прямоугольник со скругленными углами, чтобы создать квадрат (удерживайте кнопку Shift). Радиус — 3 пикселя, ширина и высота — 138 пикселей.

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

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

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

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

Step 19

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

Шаг 20

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

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