Как сделать макет в фотошопе
Обновлено: 02.07.2024
В этом уроке мы узнаем, как использовать параметр «Новый макет направляющей» в Photoshop CC, чтобы легко создавать собственные макеты направляющих.
С помощью одного простого диалогового окна функция «Новый макет направляющей» позволяет нам создавать любое количество строк и столбцов, добавлять промежутки, поля и даже сохранять наши макеты направляющих в качестве предустановок!
Параметр «Новый макет направляющей» доступен только в Photoshop CC и впервые был представлен в обновлениях Creative Cloud 2014 года. Чтобы использовать эту функцию, вам необходимо быть подписчиком Adobe Creative Cloud и убедиться, что ваша копия Photoshop CC обновлена.
Чтобы следовать этому руководству, вам не нужно ничего особенного. Вы можете использовать любое изображение, которое уже открыто в Photoshop, или просто создать новый документ Photoshop. Вот изображение, которое я открыл на своем экране. Я выбрал этот просто потому, что это интересная текстура, красивая и темная, что позволит нам легко увидеть направляющие (текстура стены в стиле гранж от Shutterstock):
Старый способ добавления направляющих в Photoshop
Прежде чем мы узнаем все о функции "Новый макет направляющей", давайте кратко рассмотрим "старый способ" добавления направляющих. Традиционно мы начинали с включения линеек Photoshop, переходя в меню «Вид» в строке меню в верхней части экрана и выбирая «Линейки»:
Это помещает линейки вдоль верхней и левой стороны документа:
Чтобы добавить вертикальную направляющую, мы щелкнули внутри линейки слева и, не отпуская кнопку мыши, перетащили направляющую с линейки в документ:
Чтобы добавить горизонтальную направляющую, мы щелкаем внутри линейки вверху и, снова удерживая нажатой кнопку мыши, перетаскиваем направляющую вниз с линейки в документ:
Этот способ добавления направляющих путем перетаскивания их с линеек по-прежнему работает даже в последних версиях Photoshop, но в Photoshop CC есть способ получше, а именно использование параметра «Новый макет направляющей». Давайте посмотрим, как это работает.
Плагин Shortcodes, Actions and Filters: ошибка в шорткоде [ads-basics-middle]
Новый вариант макета руководства
Чтобы получить доступ к параметру «Новый макет направляющей», перейдите в меню «Вид» в верхней части экрана и выберите «Новый макет направляющей». Опять же, это доступно только в Photoshop CC:
Откроется диалоговое окно "Новый макет направляющей". Из этого диалогового окна мы можем легко добавить любое количество строк и столбцов в наш макет. Мы можем указать точную ширину для столбцов или точную высоту для строк, или позволить Photoshop распределить их одинаково для нас! Мы можем добавить желоб между направляющими и добавить поля сверху, слева, снизу и справа нашего документа. Мы даже можем сохранить наш пользовательский макет в качестве предустановки, чтобы быстро загрузить его в следующий раз, когда он нам понадобится!
Если вы ранее не использовали функцию «Новый макет направляющей», появится диалоговое окно с настройками по умолчанию, которые добавляют в документ восемь столбцов, каждый из которых разделен отступом в 20 пикселей. С настройками по умолчанию строки не добавляются, но позже мы увидим, как легко добавить строки:
Вот как выглядит макет руководства по умолчанию. Однако обратите внимание, что две исходные направляющие (вертикальную и горизонтальную направляющие, которые я вытащил из линеек) все еще на месте и проходят через центр документа:
Удалить существующие руководства
Чтобы удалить все предыдущие направляющие и оставить только новый макет направляющих, выберите параметр "Удалить существующие направляющие" в нижней части диалогового окна:
И теперь эти предыдущие руководства ушли, остался только мой новый восьмиколоночный макет:
Изменение количества столбцов
Чтобы изменить количество столбцов в макете, просто измените значение в поле "Число". Я уменьшу значение с 8 до 4:
Photoshop мгновенно обновляет макет, изменяя количество столбцов и равномерно распределяя их слева направо:
Макет теперь содержит четыре столбца с одинаковыми интервалами вместо восьми, с отступом 20 пикселей между каждым.
Вариант предварительного просмотра
Если вы не видите предварительный просмотр своих изменений в реальном времени, убедитесь, что параметр «Предварительный просмотр» в диалоговом окне включен (отмечен флажком):
Изменение желоба
Пространство между столбцами (и строками) называется промежутком. Чтобы увеличить или уменьшить желоб, измените значение в поле Желоб. Размер поля по умолчанию составляет 20 пикселей, что добавляет 20 пикселей пространства между каждым столбцом. На самом деле я собираюсь полностью удалить желоб, выделив значение Gutter с помощью мыши и нажав клавишу Backspace (Win) / Delete (Mac) на клавиатуре. Это очистит значение Gutter и оставит поле пустым:
Если поле Gutter пусто, между столбцами больше нет пробела:
Указание ширины столбца
По умолчанию Photoshop автоматически изменяет размер столбцов таким образом, чтобы они были равномерно распределены по всему документу слева направо, но мы можем установить ширину самостоятельно, введя значение в поле «Ширина». Например, я введу ширину для своих столбцов 150 пикселей:
Photoshop снова обновляет макет, на этот раз устанавливая ширину каждого столбца ровно 150 пикселей:
Центрирование столбцов
Обратите внимание, что столбцы больше не центрируются в документе. Вместо этого они смещены влево. Чтобы расположить их по центру после того, как вы ввели определенную ширину, выберите параметр «Центрировать столбцы» в нижней части диалогового окна:
Если флажок «Центрировать столбцы» установлен, столбцы снова центрируются в макете:
Добавление строк
Чтобы добавить строки в макет, сначала выберите параметр "Строки" (по умолчанию он отключен):
Затем просто введите необходимое количество строк в поле "Число". Вы можете ввести определенную высоту для каждой строки в поле «Высота» или оставить его пустым и позволить Photoshop распределить их одинаково. Вы также можете ввести значение Gutter, чтобы добавить пространство между строками.
В моем случае я установлю количество строк равным 3, а также изменю количество столбцов на 3. Я оставлю поле "Ширина" для столбцов и поле "Высота" для строк. пустым, чтобы позволить Photoshop распределить их одинаково, и я также оставлю поля Gutter пустыми:
Это быстрый и простой способ создания стандартной сетки 3 на 3, которую я могу использовать, чтобы упорядочить и скомпоновать различные элементы в моем документе, используя "правило третей":
Добавление полей
Чтобы добавить поля по краям документа, сначала выберите параметр «Поле», чтобы включить его, а затем введите количество места, которое вы хотите добавить, в поля «Сверху», «Слева», «Снизу» и «Справа». В моем случае я установлю все четыре значения на 20 пикселей:
Это добавит 20 пикселей пространства вокруг внутренних краев моего документа. Photoshop автоматически изменяет размеры столбцов и строк соответствующим образом:
Мы можем даже добавить отрицательные поля, просто введя отрицательные значения.Отрицательные поля могут быть полезны при добавлении элементов в документ или при выборе объектов, размер которых превышает видимую область документа (холст). Я изменю каждое из четырех значений (сверху, слева, снизу и справа) на -20 пикселей:
Это дает мне те же поля шириной 20 пикселей, но перемещает их за пределы видимой области документа. И снова Photoshop автоматически изменяет размеры столбцов и строк:
Сохранение пользовательского макета направляющей в качестве предустановки
Если вы знаете, что в будущем вам нужно будет снова создать такой же макет руководства, вы можете сэкономить время, сохранив макет в качестве предустановки. Щелкните поле «Предустановка» в верхней части диалогового окна (где указано «Пользовательский»):
При этом открывается меню с несколькими встроенными предустановленными макетами на выбор (8 колонок, 12 колонок, 18 колонок и 24 колонки), но нам нужен вариант "Сохранить предустановку":
Когда появится диалоговое окно "Сохранить", введите описательное имя нового стиля в поле "Сохранить как". Я назову свой "cols-3-rows-3-margins-neg20px". Затем нажмите кнопку Сохранить:
Поскольку макет сохранен как предустановка, в следующий раз, когда он понадобится, вы сможете быстро выбрать его из списка предустановок:
После создания нужного макета направляющей нажмите кнопку "ОК", чтобы закрыть диалоговое окно "Новый макет направляющей":
Скрытие и очистка направляющих
Чтобы временно скрыть макет руководства от просмотра в документе, перейдите в меню «Вид», выберите «Показать», затем выберите «Направляющие». Сделайте то же самое еще раз, чтобы снова включить его. Или просто нажмите Ctrl+; (Победа) / Команда+; (Mac) на клавиатуре для включения и выключения направляющих:
Чтобы полностью очистить макет направляющей, перейдите в меню «Вид» и выберите «Очистить направляющие»:
Что делать дальше.
И вот оно! Вот как можно воспользоваться функцией «Новый макет направляющей», чтобы легко создавать и сохранять собственные макеты направляющих в Photoshop CC (Creative Cloud)! Посетите наш раздел «Основы Photoshop», чтобы узнать больше о Photoshop!
Начните создавать раньше с помощью сотен профессиональных шаблонов из Adobe Stock или предустановок для пустых макетов.
Что вам понадобится
Примечание. Чтобы увидеть эти улучшения, вам потребуется последняя версия Adobe Photoshop (2017 года).
Начать с нового документа
Запустив Photoshop, нажмите «Создать» или нажмите «Control+N» (Windows) или «Command+N» (Mac OS). Вы также можете выбрать «Файл» > «Создать». Затем щелкните вкладку категории вверху, чтобы просмотреть параметры, подходящие для вашего проекта. Вы можете начать с шаблона с богатым визуальным оформлением или набора настроек, который открывает предварительно отформатированный пустой документ.
Скачать и открыть шаблон
Выберите шаблон и нажмите «Просмотреть предварительный просмотр», чтобы просмотреть его компоненты, размер файла и другие сведения. Если вам нравится то, что вы видите, нажмите «Загрузить». После завершения загрузки нажмите «Открыть». В следующий раз, когда вы откроете диалоговое окно «Новый документ», шаблон появится на вкладке «Сохраненные».
Совет. Во время загрузки шаблона продолжайте просматривать шаблоны или выполнять другие задачи в диалоговом окне "Новый документ".
Или начните с набора настроек
Чтобы начать с готовой предустановки вместо шаблона, выберите ее и настройте ее параметры, такие как имя предустановки, ориентация и разрешение. Нажмите «Дополнительные параметры», если вам нужно изменить цветовой профиль и соотношение сторон в пикселях. Когда закончите, нажмите «Создать».
Создайте собственный дизайн
После того как вы откроете шаблон или пресет, отредактируйте его по своему усмотрению. В этом примере мы добавили собственное изображение в бесплатный шаблон, а затем разместили его в пользовательском музыкальном постере.
Дополнительные шаблоны в Adobe Stock
Что еще вы можете создать? Ищите в Adobe Stock дополнительные шаблоны, макеты, наборы значков и визуальные элементы дизайна. Нажмите «Перейти», чтобы просмотреть все шаблоны Photoshop на сайте Adobe Stock, или введите поисковый запрос и нажмите «Перейти». Когда вы найдете понравившийся шаблон, лицензируйте его и загрузите на свой компьютер.
Вернуться к старому Новому?
Если вы предпочитаете открывать новый документ по-старому, выберите «Правка» > «Установки» > «Основные» (Windows) или «Photoshop» > «Установки» > «Основные» (Mac OS). Выберите «Использовать устаревший интерфейс «Новый файл».
В этом пошаговом руководстве я покажу вам, как просто и увлекательно создать собственный пользовательский макет страницы в шаблоне Photoshop, куда вы можете легко перетаскивать изображения, а затем использовать их для печати или в Интернете! Самое приятное то, что вы можете сохранить свой шаблон, чтобы использовать его снова и снова.
Примечание. Если вы планируете использовать этот учебник для создания шаблонов для социальных сетей, обязательно загрузите и используйте нашу бесплатную памятку по размерам изображений для социальных сетей здесь.
Шаг 1. Создайте новый документ в Photoshop
В этом уроке мы будем создавать документ для печати, однако вы также можете применить его к чему угодно, будь то для печати или в Интернете. Во-первых, с открытым Photoshop, перейдите в верхнюю строку меню и нажмите «Файл»> «Создать», чтобы открыть новый документ и назвать его — здесь я назову свой «Красивый шаблон».
При создании документов для печати ширина и высота устанавливаются в дюймах. Я собираюсь оставить этот конкретный размер документа на уровне 11 дюймов по ширине и 14 дюймов по высоте. Я бы изменил это на пиксели, если бы работал над документом для Интернета.
Имейте в виду, что что касается разрешения, когда вы создаете что-то для печати, в идеале вам нужно иметь 300 пикселей на дюйм. Если шаблон предназначен для использования в Интернете, приемлемо от 72 до 150 пикселей. Фоновое содержимое будет белым. Нажмите ОК.
Шаг 2. Активируйте функцию линейки Photoshop
Необходимо включить функцию линейки Photoshop, так как она поможет вам создавать формы, необходимые для шаблона. Если вы не видите линейку в Photoshop прямо сейчас, перейдите в строку меню в верхней части экрана и выберите «Просмотр»> «Линейки». Теперь вы должны увидеть линейки Photoshop. Очевидно, что если вы хотите отключить его позже, вы можете просто снова нажать «Линейки» в меню, чтобы снять флажок.
Шаг 3. Создайте фигуры на шаблоне Photoshop
Теперь нам нужно создать макет различных форм для нашего шаблона, который мы будем использовать для добавления изображений позже. В Photoshop вы хотите работать с отдельными слоями для каждой создаваемой фигуры. Здесь, в моей панели слоев, я собираюсь спуститься вниз и щелкнуть значок нового слоя. Вы увидите, что это маленький квадрат со сложенным углом. Вы также можете нажать Layer>New>Layer в верхнем меню.
Наш новый слой полностью пуст. Что нам нужно сделать, так это создать фигуру на этом слое. Это будет форма, в которую мы поместим наше изображение позже. Активируйте инструмент выделения. Это второй инструмент сверху.
Если щелкнуть правой кнопкой мыши инструмент выделения, вы сможете выбрать различные фигуры. У меня выбран прямоугольный инструмент выделения. Я собираюсь щелкнуть и перетащить фигуру примерно 5 дюймов в ширину и 5 дюймов в высоту, используя мою линейку, чтобы направлять меня.
После того как вы создали фигуру, вы увидите марширующих муравьев (как я люблю их называть), идущих по краям. Теперь мы собираемся заполнить нашу форму. Перейдите в верхнюю строку меню, выберите Edit>Fill. Убедитесь, что «Цвет» выбран в верхнем раскрывающемся списке. Подойдет любой цвет. Я выберу красивый голубой цвет и нажму OK. Теперь мы можем либо просто щелкнуть, чтобы отменить выделение, либо в строке меню нажать «Выбрать»> «Отменить выбор».
Вам нужно будет повторить эти инструкции (только на шаге 3) для каждой фигуры, которую вы добавляете в свой шаблон. Важно: Убедитесь, что каждая фигура находится на новом слое.
Если ваша фигура имеет неправильный размер или вы хотите изменить ее позже, просто активируйте инструмент «Перемещение» (V) и выберите слой с фигурой, размер которой нужно изменить. Используйте маркеры преобразования вокруг фигуры, чтобы настроить ее. Совет: вы можете удерживать клавишу Shift при изменении размера изображения, чтобы сохранить исходное соотношение. Затем нажмите Enter/Return, чтобы установить новый размер фигуры.
СОВЕТ. Если вы не видите маркеры изменения размера, убедитесь, что флажок «Показать элементы управления преобразованием» установлен в параметрах инструмента в верхней части Photoshop.
Если вам нужны две коробки одинакового размера и формы для вашего макета Photoshop, вы можете легко дублировать слой, выбрав «Слой»> «Дублировать», или щелкните и перетащите слой, который вы хотите дублировать, на значок нового слоя в нижней части «Слои». Panel и она будет автоматически продублирована.
Шаг 4. Добавьте изображения в шаблон Photoshop
Одна из основных причин для создания шаблона Photoshop – возможность многократного использования макета, в который можно очень быстро и легко помещать изображения.
Чтобы добавить изображение, сначала выберите слой, к которому вы хотите применить изображение. Итак, если я хочу, чтобы мое изображение появилось в верхней левой части, я нажму на этот конкретный слой. Затем я выберу «Файл»> «Поместить» или «Поместить встроенный», в зависимости от того, какую версию Photoshop вы используете.
Затем перейдите к изображению, которое хотите применить в шаблоне. Нажмите на это изображение и нажмите «Поместить». Вначале это может показаться немного странным. Это нормально. Просто нажмите Enter или Return.
Теперь о волшебстве! В главном меню выберите «Слой»> «Создать обтравочную маску», и ваше изображение будет обрезано прямо по форме!
С помощью инструмента Photoshop Move теперь вы можете щелкнуть и перетащить изображение или изменить его размер, чтобы оно соответствовало фигуре именно так, как вам нравится.
Повторите шаги "Добавить изображение" для каждого слоя-фигуры.
Шаг 5. Сохраните шаблон
Когда вы закончите, сохраните файл в формате PSD, чтобы убедиться, что все ваши слои сохранены для следующего раза, когда вы захотите использовать свой шаблон. Если вы хотите распечатать этот файл, выберите «Файл»> «Сохранить как» и сохраните свою работу в формате JPEG.
Поздравляем! Готово!
Вы можете создавать неограниченное количество пользовательских шаблонов для своих изображений и использовать их столько раз, сколько захотите. Это очень просто, и небо — это предел того, что вы можете создать. Надеюсь, вам понравится создавать собственные шаблоны перетаскивания в Photoshop.
БОНУС: в этой записи блога есть потрясающий шаблон сетки Photoshop, который вы загружаете БЕСПЛАТНО и используете для перетаскивания ваших собственных изображений прямо сейчас!
Нужна дополнительная помощь в понимании каждого из этих шагов? Посмотрите видео ниже:
Как сделать шаблоны Photoshop — видеоурок
У вас есть вопросы о том, как создать шаблон Photoshop? Оставьте нам комментарий ниже - мы будем рады услышать от вас! И ПОЖАЛУЙСТА, ПОДЕЛИТЕСЬ этим уроком, используя кнопки социальных сетей (мы очень ценим это)!
< бр />
Аманда Глиссон
Я мама четверых детей, и, как и многие другие мамы, я полюбила фотографию, фотографируя своих прекрасных детей. С тех пор, как я впервые взял в руки камеру более 9 лет назад и профессионально сфотографировал все виды предметов и мест, я пришел к выводу, что я больше всего увлечен фотографией новорожденных и детей, и мне повезло, что я могу специализироваться в этой области!
Президент WebFX. Билл имеет более чем 25-летний опыт работы в индустрии интернет-маркетинга, специализируясь на SEO, UX, информационной архитектуре, автоматизации маркетинга и многом другом. Опыт Уильяма в области научных вычислений и образование в Шиппенсбурге и Массачусетском технологическом институте послужили основой для MarketingCloudFX и других ключевых проектов исследований и разработок в WebFX.
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. Создание веб-дизайна в стиле Modern Lab в Photoshop
В этом учебном пособии вы познакомитесь с приемами проектирования для создания привлекательных веб-макетов.
10. Создайте очень простой темный веб-дизайн в Photoshop
В этом уроке вы узнаете о множестве приемов, например о том, как сделать веб-кнопку.
11. Как создать элегантный веб-сайт с сеткой
От бумаги до Photoshop: узнайте, как размещать веб-дизайн на сетке.
12. Как создать винтажный макет сайта в Photoshop
Создайте стильный винтажный дизайн, прочитав этот замечательный учебник по Photoshop.
13. Создайте простой чистый макет портфолио в Photoshop
Это руководство по макетированию в Photoshop идеально подходит для сайтов-портфолио, а также сайтов веб-приложений.
14. 3D Portfolio Dark Layout в Photoshop
В этом руководстве по веб-дизайну вы будете использовать руководства Photoshop, стили слоев и многое другое.
15. Создайте чистый и красочный макет электронной коммерции в Photoshop
Это руководство поможет вам создать дизайн страницы продукта в электронном магазине.
16. Создайте инновационный сайт-портфолио с альтернативным UI/UX
В этом руководстве показано, как создать веб-страницу с уникальным пользовательским интерфейсом.
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 вы научитесь создавать простой веб-дизайн с красивыми текстурами.
Читайте также: