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


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

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

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

  1. Набор иконок (wefunction.com)
    Альтернативный набор иконок
  2. Иконка Twitter (iconeden.com)
  3. Шрифт 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

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

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

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

Урок 1: Создание уникального заголовка веб-сайта
Урок 2: Создание макета веб-сайта в Photoshop
Урок 3: Нарезка макета в Photoshop
Урок 4: Создание веб-сайта в Dreamweaver

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

Помните, что при разработке макета вам необходимо определить пространства для следующих элементов:

Никакая часть этих материалов не может быть воспроизведена каким-либо образом без явного письменного согласия Entheos. Любое несанкционированное использование, совместное использование, воспроизведение или распространение этих материалов любыми средствами, электронными, механическими или иными, строго запрещено.

.

48 отличных руководств по созданию веб-сайтов в Photoshop

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

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

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

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

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

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

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

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

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

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

Создайте элегантный и темный веб-сайт мобильного приложения

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

Узнайте, как создать стильный веб-макет фотографии

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

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

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

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

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

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

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

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

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

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

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

Создание элегантного макета блога в Photoshop

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

Создание простого портфолио на основе Instagram в Photoshop

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

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

Это руководство включает процесс проектирования в Photoshop, а также преобразование PSD в HTML. Иногда становится действительно сложно отсортировать всю информацию из профессиональной базы данных на одной странице. Вы можете набросать веб-макет в уме или на листе бумаги. Затем вы можете использовать несколько простых приемов фотошопа для создания фантастического веб-макета.

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

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

Создание иллюстративной целевой страницы iPhone / iPad в Photoshop

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

Разработка семейства веб-сайтов

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

.

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

25 Excellent Photoshop Web Design Layout Tutorials

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

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

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

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

Clean Style Portfolio Layout

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

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

Clean Blog Layout in Photoshop

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

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

Create a Portfolio Web Layout in Photoshop

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

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

How to Make a Vibrant Portfolio Web Design in Photoshop

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

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

Create an Elegant Photography Web Layout in Photoshop

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

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

Photo Gallery Website Layout in Photoshop

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

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

Create a Movie Video Streaming Website

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

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

How to Build a Stylish Portfolio Web Design Concept

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

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

Create a Modern Lab Theme Web Design in Photoshop

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

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

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

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

How to Create a Sleek Grid Based Website Design

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

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

How to Create a Vintage Photoshop Website Layout

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

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

Create a Simple Clean Portfolio Layout in Photoshop

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

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

3D Portfolio Dark Layout in Photoshop

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

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

Design a Clean and Colorful Ecommerce Layout in Photoshop

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

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

Design an Innovative Portfolio Site Using Alternative UI/UX

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

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

Design a Sleek Mobile App Website

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

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

Design a Warm, Cheerful Website Interface in Adobe Photoshop

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

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

Impressive Videographer Website Portfolio Layout in Photoshop

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

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

How to Create a WordPress Theme in Photoshop

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

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

Design a Bold and Vibrant Portfolio

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

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

Create an Elegant Patterned Web Design in Photoshop

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

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

Design a Clean Corporate Website Layout

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

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

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

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

Design a Textured "Coming Soon" Web Page in Photoshop

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

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

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

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

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

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

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

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

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

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

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

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

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

Плагин шорткодов, действий и фильтров: ошибка в шорткоде [ ads-basics-middle ]

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

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

.

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

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

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

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

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

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

Очистить существующие направляющие

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

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

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

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

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

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

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

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

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

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

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

Должна быть отмечена опция предварительного просмотра.

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

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

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

.

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

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий