Как сделать оформление в фотошопе

Обновлено: 07.07.2024

Быстро создавайте творческие проекты с использованием большой коллекции шаблонов из Adobe Stock и чистых наборов.

Впервые реализовано в версии Adobe Photoshop 2017


Создавая документ в Photoshop, вместо чистого холста можно выбрать любой шаблон из большой коллекции в Adobe Stock. Шаблоны содержат ресурсы и иллюстрации, используя которые можно оформить проект. Можно открыть шаблон в Photoshop и работать с ним так же, как с любым другим документом (. psd ).

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

обеспечат источник вдохновения и предоставят готовые элементы для использования в документах. Можно загружать шаблоны из Adobe Stock, которые включают качественную графику и иллюстрации прямо через Photoshop. Затем на основе этих шаблонов можно без труда создавать документы с общими настройками и элементами дизайна. Шаблоны открываются как файлы psd в Photoshop и обычно включают несколько монтажных областей.

Пустые наборы настроек документов

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

Шаблоны и наборы настроек делятся на следующие категории:

  • Фото
  • Печать
  • Графика и иллюстрации
  • Интернет
  • Мобильные телефоны
  • Фильмы и видео

Выполните одно из следующих действий.

  • Используйте следующее сочетание клавиш.
    • (Mac) Cmd+N
    • (Windows) Ctrl+N


    Обзор: диалоговое окно «Новый документ»

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

    • Создавайте документы с использованием выбранных шаблонов из Adobe Stock в разных категориях: Фото , Печать , Графика и иллюстрации , Интернет , Мобильные телефоны и Фильмы и видео .
    • Находите дополнительные шаблоны и создавайте с их помощью документы. См. раздел Поиск других шаблонов на Adobe Stock.
    • Быстро открывайте файлы, шаблоны и недавно использованные элементы (вкладка Недавние ).
    • Сохраняйте собственные наборы настроек для последующего использования и быстро находите их в дальнейшем (вкладка Сохраненные ).
    • Создавайте документы с использованием Пустых наборов настроек документов для самых разных категорий форм-факторов устройств. Перед открытием наборов можно изменить их настройки.


    Вкладка «Фото» | Диалоговое окно «Новый документ»

    В диалоговом окне Новый документ выберите вкладку нужной категории: Фото , Печать , Графика и иллюстрации , Интернет , Мобильные телефоны и Фильмы и видео .

    Выберите набор настроек.

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

    Изменение наборов настроек

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

    Укажите имя файла для нового документа.


    Панель «Сведения о наборе настроек»

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

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

    Ориентация : укажите ориентацию страницы для документа: альбомная или книжная.

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

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

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

    Содержимое фона : задайте цвет фона для документа.

    Чтобы задать следующие дополнительные параметры, щелкните Дополнительные параметры.


    Цветовой профиль : укажите цветовой профиль документа из широкого диапазона параметров.

    Попиксельная пропорция : задайте соотношение ширины и высоты одного пикселя кадра.


    Это перевод статьи «Master Hot Design Trends (with Photoshop Tutorials)». Автор оригинала — Миклош Филипс (Miklos Philips) — UX-дизайнер с опытом более 16 лет.

    Повседневная жизнь полна ярких визуальных образов. Из экспериментов в области графического дизайна рождаются горячие тренды и — внезапно — проникают всюду. Мы видим броские дизайнерские решения на автобусах, билбордах, в телерекламе, журналах и, конечно, в цифровом контенте. Приемов много: двойная экспозиция, глитч (glitch — цифровые помехи, сбой, ошибка), цветовые каналы, фотомаски, смазанность, ультраяркие цвета или «ошибки печати» (misprint).


    Трендовый эффект «глитч» на рекламе в метро Нью-Йорка

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

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

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

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

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


    Прием двойной экспозиции украсил вступительную заставку сериала «True Detective» от HBO.

    Ниже мы рассмотрим несколько модных дизайнерских приемов и поделимся уроками по созданию эффектов в Photoshop.

    Горячий тренд №1: двойная экспозиция

    Этот прием позволяет создавать эффектные визуальные сочетания. Название пришло из пленочной фотографии, где можно сделать два или три снимка без прокрутки пленки — и кадры накладываются друг на друга. Эффект часто используют на киноафишах и в рекламных роликах на ТВ. Выше вы видели кадр из заставки сериала “True Detective”: сочетание двойной экспозиции с анимацией усиливает впечатление.



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

    А вот несколько хороших уроков, как сделать подобное в Photoshop:

    Эффекты «глитч», «ошибка печати» и «визуальные помехи»

    Это приемы одного ряда. С ними изображение притягивает взгляд, потому что выбивается из потока «идеальных картинок». В основе — цифровые искажения, или глитч. Когда все вокруг отфотошоплено до безупречности (кто-то назовет это фальшивым или «эстетически загрязненным»), хочется взглянуть на что-то более реалистичное, естественное и неприлизанное.

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

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


    На постере к сериалу «Мистер Робот» несколько разновидностей глитч-эффекта подчеркивают контркультурный антураж.


    Цветовой сдвиг + «ошибка печати» + цифровые помехи.


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

    Добиться подобных результатов можно разными способами — осмотритесь на YouTube и выберите, что вам понравится. Есть даже готовые Photoshop Actions, которые можно купить, чтоб накладывать глитч в один клик.

    Парочка крутых Photoshop-уроков по этому тренду:

    Вы даже можете создавать glitch-эффект средствами CSS. Вот примеры слайдшоу и лендинга.

    Двухтоновые эффекты

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


    Рисунки сангиной, созданные да Винчи и мадемуазель де Мондран (de Mondran), а также современное фото в двухтоновой технике.

    Дуплекс сегодня используют всюду: от постеров к голливудским блокбастерам до рекламы Apple и Spotify. Смысл — выделиться, выглядеть иначе. И здесь на помощь приходят Photoshop Actions и мобильные приложения.





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

    Разделение RGB-каналов, цветовые каналы, двухцветная двойная экспозиция

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




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

    Двухцветная двойная экспозиция в Photoshop

    Двухцветная двойная экспозиция в Affinity Photo

    Яркие, кричащие цвета и флуоресцентный дуплекс

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



    Флуоресцентный дуплекс в дизайне сайта компании New Deal Design.


    Тот же веб-дизайнерский тренд использовали при создании календаря для AfriSam 2018 Corporate Stationery.


    По моде — в ярких насыщенных цветах — оформлен и сайт дизайнерского агентства ELJE Group.


    Сайт Hackernoon использует сочные флуоресцентные тона, чтобы стать заметнее.

    Главное в этом деле — уместная смелость, готовность рискнуть и попробовать кричащие цвета в дизайне сайта, на обложке альбома или на постере.

    Маски, вырезки, абстракционизм, кубизм

    Бесконечно возвращающийся тренд, который прочно закрепился в графическом дизайне. Это может быть сочетание жирного шрифта, плоских цветных поверхностей, монтажа и маскирования. Этой технике почти 100 лет, как и выполненным ее средствами советским пропагандистским плакатам 1920-х годов. (На самом деле нам показывают афиши к раннесоветскому кино — прим. пер.)


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

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


    Иногда современные эффекты визуального наслоения напоминают коллажи Матисса.


    Интересный эффект фотомаски можно получить за счет игры со шрифтами и простыми геометрическими фигурами.


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

    Тем не менее есть пара классных уроков Photoshop, которые на примере показывают, как создать подобные эффекты:

    Как создать портрет из текста в Photoshop

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

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


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

    Анализируйте, будьте смелыми и прокладывайте свою колею

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

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

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

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


    Живой пример можете посмотреть, перейдя непосредственно на мой канал.

    И так, приступим! Первым делом необходимо открыть фотошоп и создать новый новый документ, для этого в верхнем меню выбираем "Файл" - "Создать". В появившемся окошке необходимо задать размеры документа, по требованиям YouTube размер должен быть не менее 2120px по ширине и не менее 1152px по высоте. Именно такие параметры размера мы и зададим новому документу.


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


    То при установке ее на оформление канала YouTube обрежет ее вот так:


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

    Для этого создаем новый слой, кликая левой кнопкой мыши по значку "Создать новый слой" в панели слоев.


    И выбрав инструмент "Прямоугольник" в левой боковой панели программы, рисуем прямоугольник на новом слое, по центру нашего холста. Прямоугольник должен быть шириной с холст (2120px) и высотой 351px. Чтобы прямоугольник нам был лучше виден, можете отключить нижний слой, кликнув левой кнопкой мыши по значку "глаз", расположенного в панели слоев, слева от данного слоя.

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

    После того, как вы отцентрировали прямоугольник на холсте, в нем самом и создаете нужное вам изображение (коллаж), после чего сохраняете картинку в формате jpg (она весит меньше чем png) и устанавливаете это дело на канал в Ютуб!

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


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

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

    Продолжение

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

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


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

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

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

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

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

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


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

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


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


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


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


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



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


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

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

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

    Важно!

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

    Группы

    doc

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


    Верхнее меню

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








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


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


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

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



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


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

    Логотип


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

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





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


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

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

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





    Контент

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

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


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


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


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

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


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

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

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


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


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


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



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


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


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




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


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


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


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



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





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




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


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

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

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



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


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


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

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

    Читайте также: