Новогодний фон для фотошопа
Яркий разноцветный новогодний фон — много елочных игрушек на белоснежной вате.
Золотой фон для фотографий удачного праздника.
Зеркальные игрушки на нежно-розовом фоне создают праздничное настроение.
Большой золотой шар на коричневой ткани с новогодними узорами на фоне вечнозеленых елочных иголок.
Золотисто-белая открытка для фотошоп с елочными шариками и красной ленточкой.
Лучший новогодний фон для самых искренних поздравлений.
Веселый ватный снеговик в сине-полосатом шарфике и лыжной шапочке на фоне голубого снегопада.
Заготовка для новогоднего поздравления в обрамлении еловой ветки с шишками и игрушками.
Горящая золотая свеча, украшенная звездочками и веткой шиповника, нарисована на бордовом фоне.
Снежная фоторамка для фотошопа, словно припорошенная по краям.
Строгий новогодний фон — красный бархат.
Малиновый сверкающий фон — оберточная бумага для новогодних подарков.
Яркий праздничный шаблон — новогодние игрушки на зеленом фоне.
Винтажная новогодняя открытка — поздравление в ретро стиле.
Детский новогодний фон для фотошопа — рождественские золотые колокольчики разбросаны среди алых ягод остролистного падуба.
Позолоченное украшение из бус, шариков и шишек обрамляет пространство с морозными узорами песочного цвета.
Красивая круглая рамочка в виде рождественского венка.
Коричневая праздничная подложка под открытку.
Создаем дизайн веб-страницы с помощью 960 Grid
В этом уроке мы разработаем дизайн веб-страницы, используя 960 Grid System. Вы увидите, как работая с этой системой можно рационализировать процесс веб-разработки и как пользоваться системой сетки:
Начнем с создания нового документа в Photoshop, шириной 1680 px и высотой 1100 px. Фон заливаем светло-серым цветом (# F9F9F9).
В сети доступно множество систем для создания сеток, а также примеров по созданию своих собственных систем. Цель данного руководства состоит в том, чтобы облегчить создание системы на первоначальных этапах.
Все это поможет провести рабочий процесс на одном дыхании, и прекрасно подходит для создания прототипов ваших макетов.
Для начала скачайте 960 grid system.
После этого распакуйте 960 Grid System Натана
Смита в папку с шаблонами. Открываем 12 столбцовый макет 960 grid в Adobe Photoshop:
Теперь нам нужно создать базовую сетку. Базовая сетка поможет с промежутками между элементами и высотой линий. Создадим новый документ 24 на 24 пикселя, удалим фон, нарисуем линию, толщиной 1 px в нижней части документа.
Мы определим этот документ как шаблон: Edit > Define Pattern и присвоим ему запоминающееся название:
Далее возвращаетесь к нашему документу и создаете новый слой. Заполняете этот слой шаблоном, Edit> Fill. Так мы создадим базовую сетку:
И наконец, мы выделим нашу рабочую область, используя направляющие. Создаем новую направляющую View > New Guide, выбираем вертикальный тип и создаем направляющие в точках 360px, 840px и 1320px.
Мы выбрали именно эти точки, потому как при ширине рабочей области в 960px, между точками 360px и 1320px — центральная 840px.
Если вы работаете напрямую из файла 960 Template, направляющие уже созданы, и их необходимо только отобразить через меню View > Show > Guides:
Вы можете сохранить этот документ в качестве шаблона и использовать по мере необходимости.
Высоту холста всегда можно изменить под свои нужды. И опять же, со временем вы, вероятно, отдадите предпочтение полноценной системе с дополнительными направляющими.
Теперь, когда у нас настроен шаблон, мы можем приступить непосредственно к дизайну.
Мы разделим страницу на пять секций:
- Header;
- Callout;
- Content – Left;
- Content – Right;
- Footer.
Мы начнем с верха страницы и будем двигаться к низу, потому заголовок будет первым элементом, с которым мы работаем.
С помощью Rectangular Marquee Tool выбираем область шириной во весь документ и высотой в 120px — вам могут помочь направляющие или же тяните за край прямоугольного выделения до тех пор, пока не заполните пять горизонтальных маркеров, затем заливайте выделенную область серым цветом (#2C2C2C).
Эта область будет использоваться под лого и панель меню:
Далее вставляем лого в левый верхний угол, равняем его по второму столбцу сетки, оставляя отступ в 40px.
Для этого проекта я использовал лого, основанное на шрифте 50 pt Century Gothic.
Первое слово — залито светло-голубым (#ADC7D9), второе выделено жирным и залито белым (#FFFFFF). Далее применяем внутреннюю тень к элементам лого.
Я уменьшил внутреннюю непрозрачность до 25%, поставил значения Distance равное 2px , Choke равное 0% и Size — 5px:
Меню. Чтобы сохранить простой и строгий вид, мы будем использовать текст в основе меню. Выбираем для меню шрифт 18pt Arial.
Цвет активной ссылки, которая, в нашем случае, Home, имеет белый цвет (#FFFFFF), а остальные заполняем серым (#BBBBBB). Совмещаем эти элементы и помещаем их в центре верхней части заголовка:
Я назвал эту секцию Выкладка потому как на самом деле это именно то, что она делает — выкладывает информацию о странице.
Повторим действия на примере тех, что выполнили, создавая заголовок. С помощью инструмента Rectangular Marquee, выбирая высоту, равную 240px и заполняя голубым цветом (#ADC7D9), как и лого, делаем прямоугольник.
Мы добавим градиент в этой секции. Двойной клик для вызова Layer Style Panel и выбор Gradient Overlay. Тип окрашивания выставляем равным transparent overlay и меняем blend mode на overlay, уменьшаем opacity до 30%:
Так как мы назвали компанию «blue grid», добавим фон для секции Callout в стиле решетки. Для этого будем использовать технологию, схожую с той, которой пользовались, добавляя горизонтальные линии.
Для начала создаем документ размерами 25px на 25px. Снова удаляем фон, делая документ прозрачным, и рисуем одиночную линию шириной в 1px вдоль нижней части и еще одну в верхней части.
Завершаем этот шаг, присваивая этому документу вид шаблона путем Edit > Define Pattern:
Создайте новый слой поверх слоя Callout и заполните его созданным на шаге 8 паттерном с помощью меню Edit > Fill:
Поверните этот слой на 15 градусов, примените к нему наложение белого цвета и поместите его над секцией callout. Затем создайте новый слой и объедините его с белым решетчатым слоем.
Примените режим наложения Soft Light к этому слою. Выберите область callout также с помощью инструмента Rectangular Marquee Tool или клавишей CTRL + клик мышкой на слое.
Затем выберите Rectangular Marquee Tool правым кликом мыши (CTRL + клик мышкой) и выберите select inverse и затем Delete. Эти действия уберут всю сетку, которая не находится в области блока callout:
Следующее, что мы должны сделать — убедиться в том, что решетчатый участок распространяется только на область рабочей зоны шириной в 960px. Используйте View > Show > Guides, затем добавьте маску слоя к решетчатому слою:
Выберите маску слоя, щелкнув по ней, затем, используя инструмент Gradient Tool (G), выберите градиент от черного к прозрачному.
Убедитесь, что тип градиента — Linear, и он установлен от черного к прозрачному. Начинайте от края и перетаскивайте градиент к началу решетки.
Повторяйте это до тех пор, пока не будете удовлетворены результатом. Заметьте, что маска слоя показывает черный градиент вокруг наружных граней:
Область callout необходимо наполнить контентом, который будет выполнен шрифтом Arial 45pt (#2C2C2C) и выделить необходимые слова жирным.
Под этим местом сделаем небольшое вводное предложение шрифтом 17pt и поместим его в левой части области:
Берите в руки Rectangular Marquee Tool и растягивайте прямоугольник между крайними правыми и средними направляющими, ставьте высоту в 8 линий, оставляя 1 линию вверху и 1 линию внизу, и заливайте темно-серым цветом (#2C2C2C).
Это фон к слайдшоу:
Добавьте тень к фону, дважды кликнув на панели Layer style и выбрав drop shadow, изменив цвет на # (2C2C2C) и выбрав Distance равный 1px и size, равный 10px:
Далее вам понадобится некий фиктивный контент для размещения в слайд-шоу. Я использовал скриншот моего блога. Размер меняем под размер области слайд-шоу с помощью меню Select> Modify> Contract 10px, выбрав инверсию, как ранее, далее delete:
Для начала добавим легкий градиент в этой секции.
Сначала используйте Rectangular Marquee Tool, чтобы выбрать область для размещения контента, затем — Gradient Tool (G).
Выберите градиент от цвета (# f0f0f0) к прозрачности и перетащите его вниз. Не заходите слишком далеко. Фон у границы нижней части страницы должен вернуться к цвету (# F9F9F9):
Добавьте параграф описания шрифтом Arial 18pt #9C9C9C и со стилем ссылки Underlined #A3BBCC:
Для начала добавьте заголовок шрифтом Arial 25pt Bold #262626, затем добавьте элементы списка шрифтом Arial, цветом # 9C9C9C и величиной в 18 пунктов.
Пункт маркированного списка можно иллюстрировать с помощью Elliptical Marquee Tool или же использовать комбинацию клавиш Alt +7.
Выкрасите все пункты списка в светло-голубой цвет (# A4BCCD) и выровняйте по сетке:
Повторяйте этот шаг для добавления данных:
Наш последний раздел — подвал. Он будет содержать форму для авторизации, контактные данные и несколько ссылок. Начните с выбора нижней секции инструментом Rectangular Marquee Tool и залейте её темно-серым цветом (# 262626):
Добавим форму.
Создайте заголовок шрифтом Arial 20pt Bold (#FFFFFF) и поместите в левую часть подвала. Затем с помощью инструмента Rectangular Marquee Tool нарисуйте два прямоугольника, которые будут полями для ввода данных.Добавьте описания этим полям шрифтом Arial 16pt #9C9C9C:
Добавьте кнопку подтверждения ввода подобным же образом, но используя инструмент Rounded Rectangle Tool(U), затем добавьте Inner shadow к созданным элементам, установите значения параметра opacity в 30%, а size и spread в «0» и distance в 10px.
Добавьте ссылку «восстановить пароль» шрифтом Arial 13pt Underline #A4BDCD:
И наконец. Давайте закончим наш дизайн, добавив информацию о наших контактах. Заголовок исполните шрифтом Arial 20pt Bold (#FFFFFF) и подчеркните его, и ниже добавьте сами контакты шрифтом Arial 16pt #FFFFFF:
Используя сетку и направляющие, проверьте, что все выровнено и сбалансировано. Если нет — подстройте:
Надеюсь, вы получили понимание того, как можно работать с системой сеток, а также как настроить базовую систему самостоятельно.
Я настоятельно рекомендую вам экспериментировать с этими системами до тех пор, пока работа с ними не станет вашей второй натурой. Со временем, система сеток значительно облегчит вам вашу работу в качестве дизайнера!
Скачать PSD-файл
Данная публикация является переводом статьи «Design a Clean Web Layout with the 960 Grid» , подготовленная редакцией проекта.
Чёрный фон, белый шрифт. Как должны выглядеть слайды? Этому… | by Arseniy Ashomko | Следующий слайд, пожалуйста
Как должны выглядеть слайды?
Этому посвящены многие книги по презентациям. И всё же ни одна не говорит про главное.
В презентации, с которой вы будете выступать, должен быть тёмный фон (в идеале чёрный) и светлые шрифты, линии, графика (оптимально — белые).
Это главная визуальная заповедь.
А теперь придётся её обосновать.
Презентация на чёрном фоне — крайне непопулярное решение.
Дизайнеры фыркнут, что это похерит весь фирменный стиль и шаблоны вашей компании.
Непродвинутые пользователи MS PowerPoint возмутятся, что тяжело найти на иллюстрации картинки без фона.
Ехидные товарищи заметят, что вы пересмотрели презентаций Apple.
Начитанные — что белый текст на чёрном воспринимается хуже, чем чёрный на белом.
И всё же я настаиваю
Дело в том, что презентация если и вид искусства, то искусства прикладного. То есть всё должно быть подчинено практической цели — донести до аудитории информацию. А чтобы информацию хорошо воспринять, люди должны не только слушать, но и смотреть — на экран, перед которым (или рядом с которым) выступает спикер.
И вот какое дело: на любом экране чёрный — это отсутствие света, а белый — его максимальная интенсивность. Смотреть в течение получаса на залитый светом экран, строго говоря, не очень полезно. И не очень приятно для глаз.
Если изображение проецируется, то спикеру ещё и нельзя ходить перед всем экраном (а то тени, засвеченные части тела и прочие несуразности). Если экран светодиодный или состоит из ЖК-панелей, то стоящий перед ним спикер будет подсвечиваться белым фоном как сошедший на землю представитель небесного воинства.
Глупо, некрасиво, больно и вредно для глаз — это первое.
Второе — следствие и продолжение.
Если экран будет светлым пятном, то спикера надо подсвечивать отдельно и специально. Скорее всего, этого не будет, а значит, спикер станет тёмным силуэтом — лишённым возможности играть мимикой, взглядом, да и просто не привлекающим основное внимание тёмным кусочком сцены.
Третье — с белым фоном вы теряете эффектный и эффективный инструмент. После тёмных слайдов светлая картинка натурально зажигается и привлекает внимание даже давно уткнувшихся в телефоны зрителей, которые видят вспышку периферийным зрением.
После “светлого постоянного” “тёмное исключение” наоборот будет восприниматься подсознательно как отдых, передышка — это смажет вам весь акцент “другого” слайда и лишит возможности как следует сыграть на контрасте.
Это основные аргументы за тёмный фон.
Есть что возразить?
Не по шаблону?
Прекрасно!
Я не против фирменного стиля, но часто все эти рамочки и многочисленные рюши и логотипы в углах отвлекают от главного — содержания.
Сконцентрируйтесь сами и сконцентрируйте внимание аудитории на том, что вы хотите рассказывать, а не на ©️™️ All Rights Reserved IP PIOTR FYODOROVICH IVANOFF 2019.
Эффективнее будет — для вас и вашей компании.
Белое на чёрном тяжелее читается?
Есть такой факт. Поэтому белым по чёрному писать большие тексты нельзя.
Так и не надо!
Удавите тех, кто размещает на слайдах для рассказа три абзаца текста. Должно быть написано три слова, а остальное — вы расскажете вслух. Чтобы людям не приходилось выбирать: читать или слушать.
Где взять картинки без белого фона?
Да, более строгие требования задирают планку качества в работе с иллюстрациями. Нужно либо искать PNG без фона, либо осваивать Photoshop, привлекать дизайнера… Но это и хорошо: меньше халтуры — лучше продукт.
Сдаётся мне, именно поэтому в Apple создали и культивировали такую тёмную минималистичную эстетику презентаций.
Не просто так, а для удобства зрителей и конечной эффективности такого жанра, как публичная презентация.
Но ведь Google…
Да, они делают по-другому.
Боюсь, ребята обречены страдать, будучи заложниками ситуации.
Повторять за главным конкурентом им нельзя.
Свайп для разблокировки смартфона тоже чрезвычайно удобен, но если он запатентован для iOS, то Android приходится искать лучшее из оставшихся иных решений. Либо обжаловать в суде, что с патентом — вариант, а вот в маркетинге вряд ли.
Посмотрите на другие большие компании — все пытаются, ищут свой стиль, но в рамках общего тёмного концепта. Потому что информация на сопровождающих презентацию слайдах так лучше выглядит и лучше воспринимается зрителями.
Создай строгий дизайн для текста в Фотошоп
Гуляя по интернету, автор данного урока наткнулся на дизайн текста, который показался ему крайне простым, но в то же время интересным, стильным и просто оригинальным. И он, вооружившись своими навыками по работе с Фотошоп, решил повторить увиденное.
Итоговое изображение:
Шаг 1 – Создать новый документ
Задайте ширину 540 pixels и высоту 340 pixels.
Название нашему документу дадим «avian studios. Нажимаем на OK.
Двойной клик по заднему слою – «background layer», чтобы открыть его.
Шаг 2 – Создать фон
В каждой работе задний фон всегда усиливает впечатление от элементов, находящихся на переднем плане. Но все же, он должен быть простым и не загроможденным. Сейчас мы такой и создадим. Берем Градиент из набора. Также можно использовать клавишу на клавиатуре «g».
Потом нажмите на Выбрать фоновый цвет
что откроет окно Палитру цветов ( Colour-Picker window). В этом окне поставьте «RGB» параметрыas R-215,G-204,B-179. Потом нажмите Ok.
Шаг 3 – Дополнительная сетка и создать новые направляющие.
«Направляющая» это «видимая линия», которая может быть перемещена вертикально или горизонтально на нашем изображении. Это незаменимый помощник для графического дизайнера, если он хочет идеально выровнять различные элементы.
Но имейте в виду, что «guide» нельзя распечатать; на вашем изображении его просто не будет.
«Линейка» показывает размер нашего полотна в пикселях, дюймах, сантиметрах и т.д. Это еще один помощник касаемо выравнивания.
Для начала добавим Линейки (Rulers) на изображение. Идем в Просмотр (View) и выбираем Линейки (Rulers). Если он активирована, то напротив должна стоять галочка.
Вот как они выглядят:
Теперь добавим вертикальные и горизонтальные направляющие. Только сначала убедитесь, что напротив Вспомогательных элементов (Extras), Линеек (Rulers) и Привязки (Snap) стоит галочка. Если не стоит, то поставьте. И конечно же напротив Новая направляющая тоже должна стоять галочка. Активировать Направляющие «Guides» можно двумя способами.
Идем в Просмотр «View» и жмем Новая направляющая «New Guide» , находится ближе к концу списка.
Теперь окно «Новая направляющая» открыто. Здесь вы можете выбрать опцию Горизонтальная «Horizontal» или Вертикальная «Vertical». Также можете задать точное расположение направляющей.
Сначала вставим Горизонтальную направляющую. В открытом окне Новая направляющая в Ориентации выберите Горизонтальная, а в положении – 4.3 см.
Нажмите на ОК.
Эта «голубая» цветная линия – наша первая горизонтальная направляющая. Добавим еще одну, положение которой будет теперь 7.06 см.
и приступим к Вертикальным направляющим.
Измените Ориентацию на Вертикальную и в позиции поставьте 3.77 cm.
Добавим еще одну вертикальную линию с положением 15.20 cm
Ok. Теперь мы подготовили все, чтобы выполнить выравнивание элементов.
Приступаем к следующему шагу, в котором мы вставим текст между Направляющими. Но прежде, позвольте рассказать о втором способе их добавления. Мы тянем горизонтальную линейку, чтобы получилась еще одна, и тянем за вертикальную линейку, чтобы получилась вертикальная направляющая.
Мы создали горизонтальную направляющую нажатием и перетаскиванием Горизонтальной линейки. Можете проделать то же самое для создания вертикальной направляющей. Теперь вы знаете два способа добавления Направляющих в свою работу. Переходим к следующему шагу.
Шаг 3 – Добавить текст
Сейчас добавим надпись «avain». Это достаточно длинный шаг, поэтому можно выпить чашечку чая для подзарядки.
Ok. Для начала выберите инструмент Горизонтальный текст «Horizontal Type» в панели инструментов.
В опциях сверху поставьте следующие параметры: измените гарнитуру на Dotum, размер кегля 106 pt, метод сглаживания – плавное (smooth) и цвет текста черный.
Нажмите «caps lock», так как все буквы в тексте должны быть заглавными. Кликните где-нибудь рядом с вертикальной направляющей и напишите букву «V».
Берем инструмент Перемещение «Move» (клавиша «V» на клавиатуре).
Правым кликом по новому слою,
Открыто новое окно и там выберите Дублировать слой «Duplicate Layer».
В окне измените имя на «Ist A» и нажмите OK
Правым кликом по слою «Ist A» и нажмите дублировать слой
Измените имя на «2nd A» и нажмите Ok.
Удерживая «Shift» на клавиатуре, выделите слой «Ist A» и «2nd A на панели слоев. Shift используется, когда нужно выделить больше одного слоя.
Теперь нажмите «Ctrl» и на слой с буквой «t» на клавиатуре вместе.
Это активирует режим Трансформирование.
Правым кликом по окну Трансформирования и выберите Отразить по вертикали «Flip Vertical».
Получится следующее.
Нажмите «Enter»для завершения трансформирования. Потом нажмите на слой «2nd A» в палитре слоев. Нажмите «V» для активации инструмента Перемещение «Move». Кликните где-нибудь по работе и потяните вправо. Это заставит букву переместиться вправо. Получится вот так.
Повторите то же самое с «Ist A» но нажмите и потяните влево.
Теперь добавим букву «I». Нажмите клавишу «t» на клавиатуре и активируется Текстовый интрумент «Type», кликните где-нибудь рядом со второй буквой «A». Напишите букву «I».
Добавим букву «N». Возьмите инструмент Перемещение «Move» чтобы это осуществить.
(не пытайтесь активировать его с помощью клавиатуры). Вы получите другую букву «V», если Вы сделаете это. Затем нажмите букву «t» на клавиатуре для активации инструмента «Type». Мы делаем этот дополнительный шаг выбора инструмента «Move», чтобы получить букву «N» на новом слое. Получилось?
Нажмите где-нибудь рядом с буквой «I» и напишите букву «N». Убедитесь, что «caps-lock» включен.
Шаг 4 – Выравнивание текста
Итак. Теперь мы займемся идеальным выравниванием текста при помощи «Guides». Нажмите на букву «v» на клавиатуре, чтобы активировать инструмент Перемещение «Move». В панели опций нажмите на опцию «Auto Select Layer» Автовыбор, чтобы включить. Эта функция очень удобна для выделения любого элемента на вашем рабочем пространстве без перехода на палитру слоев.
Просто нажмите на любой видимый элемент и как только вы потяните за него, элемент начнет двигаться.
Ok. Используя инструмент «Move» выровняйте все элементы внутри Направляющих «Guides».
Теперь они по направляющим «Guides». Но посмотрите на букву «N». Она немного меньше, чем другие. Исправим это. Нажмите на букву. Затем Ctrl+t на клавиатуре, чтобы трансформировать ее. Трансформационная сетка появится вокруг буквы, используя контрольные точки, измените размер.
Нажмите «Enter» для подтверждения трансформации. Теперь ширина буквы подходящая.
Теперь выстроим все буквы точно по Направляющим. Выделите все слои кроме «Layer 0». Можно использовать клавишу Shift для выделения больше одного слоя.
Затем Ctrl+t , чтобы активировать Трансформирование. Трансформационная сетка появилась вокруг букв. Используйте контрольную точку для перемещения букв вправо.
Пока не коснетесь Вертикальной направляющей «Vertical Guide».
Вы можете также сделать некоторые корректировки как например отрегулировать расстояние между буквами при помощи инструмента Перемещение «Move» и ширину букв, используя Трансформирование. И продолжайте до тех пор, пока все буквы не будут гармонировать между собой. Я тоже внесла некоторые изменения.
Мы выровняли идеально наш текст. В следующем шаге мы добавим подтекст к уже имеющемуся.
Шаг 6 – Добавить текст “studios”
Убедитесь, что включен Caps-Lock. Включите инструмент Текст «Type tool» нажатием клавиши «t», и в функциональной панели «Options bar» задайте гарнитуру «Microsoft Yi Baiti», размер кегля 34.
74 pt и метод сглаживания Плавный.
Напечатайте слово «STUDIOS» прямо ниже слова «AVAIN» и в направлении к правой вертикальной направляющей.
Ok, теперь мы можем подкорректировать размер слова и точно его выпрямить. Просто щелкните по слою «STUDIOS» в палитре слоев и нажмите «V» для активации инструментаПеремещение «Move», затем Ctrl+t, чтобы привести в действие Трансформирование. Вокруг слова появилась сетка. При помощи контрольных точек измените ширину и высоту слова. Также Вы можете использовать контрточку внизу сетки для изменения высоты.
У нас получилось следующее…
Снова берем инструмент Текст «Type», выделите слово «studios», используя его, и затем после нажмите правой кнопкой мыши внутри выделения. Откроется меню, оттуда выберите опцию «Faux Bold» Псевдополужирный.
Измените размер текста для того, чтобы он балансировал с основным текстом.
Можете использовать для этого тот же инструмент Перемещение «Move», если хотите подвинуть слово. Я внесла некоторые изменения.
Мы разобрались с основным текстом и дополнительным. Нужно теперь придать им правильный цвет. Применим красивый градиентный эффект к основному тексту. Перейдем к следующему шагу.
Шаг 7 – Создать градиент для текста
В этом шаге мы собираемся создать градиент для основного текста. Сперва выберите инструмент Градиент «Gradient Tool».
Сделайте основной цвет белым, а фоновый – черным.
В строке опций градиента щелкните по месту, где редактируется градиент.
Это откроет окно Редактор градиента. Надо изменить два ограничителя цвета. Здесь мы видим градиент от белого к черному. Нажмите на белый ограничитель. На ограничителях можно увидеть выбранный текущий цвет, в нашем случае белый.
Кликните по цвету цветового ограничителя.
Откроется окно палитры цветов. Поставьте «RGB» параметры на R-65,G-51,B-43. Подтвердите.
Теперь работаем со вторым ограничителем.
RGB параметры здесь R-157,G-136,B-125
Мы создали новый градиент. Измените название «brown gradient» и кликните «new», что сохранит новый градиент. Ok.
И так, красивый градиент создан. На этом этапе мы добавим градиент к нашему тексту.
Шаг 8 – Применить градиент к тексту
Двойной щелчок по слою «Ist A»
Это откроет окно стиля слоя «layer style», нажмите на Перекрытие градиента «gradient overlay» слева. Справа будут отображены дополнительные опции по перекрытию градиента.
Нажмите на маленькую стрелочку позади градиентной доски, другое маленькое окошко появится, на котором будут изображены различные градиенты. Внизу окна есть темно-коричневый градиент. Выберите его.
Измените другие параметры как показано на картинке ниже.
Мы закончили с буквой «A»
Шаг 9 – Скопируйте градиент на остальные слои
Правым кликом по слою «Ist A» и выберите «Copy Layer Style» (копировать стиль слоя)
…теперь правым кликом по слою «V» и «Paste Layer Style» (Вставить стиль слоя)
Это установит градиент на слой «V»
Сделайте то же самое для всех оставшихся букв
С основным текстом мы разобрались.
Сейчас изменим цвет дополнительного текста «studios».
Шаг 10 – Лента
В этом важном шаге нам нужно будет создать ленту, которая будет проходить между буквами, что значительно украсит наш текст «avain». Особое внимание следует уделить изгибам ленты. Они должны быть плавными и динамичными. Все должно быть сделано идеально. Если лента будет идеально красивой, то и все будет отлично. Приступим наконец таки.
Возьмем инструмент Овальная область.
Нарисуйте вытянутый овал по всему центру текста
Чтобы аккуратно нарисовать ленту нам нужно увеличить изображение до определенной степени.
Поставьте значение 300 в маленьком окне, размещенном в нижнем левом углу окна, отвечающего за Зумирование.
Вам нужно переместить ползунок, чтобы увидеть конкретную часть.
Нажмите «Ctrl+T» для трансформирования формы. Из окошка выберите опцию «warp» (Деформация).
Деформация имеет несколько контрольных точек слева и справа. Переместите контрточки на левую сторону вниз. На следующем изображении уже показана одна перемещенная вниз точка.
У вас получится следующее……
Сделайте то же самое для правой стороны, но тяните точку уже вверх. Здесь вам не нужно двигать все точки к верхней направляющей, как вы делали с левой стороны ленты.
Вот, что имеем….
Нажмите «Enter» для подтверждения трансформирования, затем двойной щелчок по инструменту Масштаб «zoom» , чтобы вернуться к режиму 100%.
Введите размер в маленькое масштабное окно, при помощи которого вы можете лучше видеть левую сторону нашей работы.
И используйте ползунок для изменения вида.
«Ctrl+T» и выберите «warp» – Деформация.
Затем потяните горизонтальные контрольные линии вверх.
При помощи чувствительности инструмента сделайте линию гладкой и идентичной..
Продолжайте, пока не будете удовлетворены результатом.
Проделайте то же с правой стороной, только к низу.
Сделайте линию плавной. Можно использовать вертикальную контрольную линию для контроля за процессом движения.
Следите за шириной формы……….
Передвиньте правый конец формы немного к центру.
Постарайтесь получить идеальные линии. Если Вас все устраивает, нажмите «Enter» для применения трансформирования и двойной щелчок на масштаб для 100% вида.
Тяжелая часть урока позади. В следующем шаге создадим эффект, использую ленту.
Шаг 12 – Добавить градиент на ленту
Раскрасим ленту.
Выбираем инструмент Градиент «gradient tool» и кликаем по градиентной доске.
Откроется цветовая палитра.
Ok. Имеем два цветовых ограничителя. Первый цветовой ограничитель и его цвет показаны в красных рамочках.
Нам нужны еще цветовые ограничители. Можете добавить их, нажав где-нибудь ниже цветовой шкалы.
Добавим 4 цветовых ограничителя,
Нажмите на первый и измените цвет на r-191, g-223, b-249
Второй: r-127, g-215, b-247
Для третьего: r-171, g-229, b-250
Четвертый ограничитель: r-136, 204, 233
Пятый: 142, 216, 248
И последний: 195, 229, 250
Изменим положение каждой точки.
Сначала нажмите на первую точку и измените ее положение (location)до 80%
Для четвертой – 63%
Для третьей – 50%
Для второй – 36%
Измените название на «ribbon colour» и нажмите «new» и «OK» , что сохранит только что созданный градиент.
Наложим градиент на ленту.
Выделите слой с формой(лентой) и двойным кликом щелкните по нему. Нажмите на «gradient overlay» (Перекрытие градиента) и выберите градиент «ribbon colour» из окна градиентов.
Затем измените настройки как показано ниже…..угол-0, масштаб-105 и OK…
Готово.
Шаг 13 – Добавить тень на ленту
Добавим немного теней в необходимых местах на ленте…..
Нажмите на слой «v» и выберите дублировать слой.
Также дублируйте слои «n» и «i».
Теперь переместите дублированные слои ниже их оригиналок один под другим.
Измените непрозрачность родных слоев «v»,»n»,»i» до 10%
Теперь растрируйте все дублированные слои правым нажатием мыши по слоям и выбрав «rasterize type» (Растрировать текст).
Выберите Многоугольное лассо из набора инструментов.
Нажмите на слой «v copy layer» и на холсте произведите выделение, как показано ниже, используя как раз этот инструмент.
Потом просто удалите выделение…
Теперь нижняя часть….
Нам нужна только та часть буквы, которая примыкает к ленте. Повторите то же самое для букв «n» и «i».
Ok..
Измените непрозрачность для оригиналов с 10% до 100%.
Ok..
Двойной щелчок по любому дубликату (ncopy vcopy icopy) и нажмите на эффект тени. Измените параметры как показано ниже..
Если все сделали, то нажмите «OK»
Правым кликом по слою дубликату, к которому мы добавили тень и из меню Параметров наложения выберите «copy layer style» (копировать стиль слоя).
Правым щелчком по другим дубликатам и из меню выберите «paste layer style» (вставить стиль слоя).
У вас получится следующее….
Шаг 14 – Добавить границу
Двойной щелчок по заднему слою «layer 0», из появившегося окна нажмите на «stroke» (Обводка) для активации эффекта. Измените настройки как на изображении ниже. Цвета R-91,G-75,B-66, click OK….
Ok….
Вы конечно же можете сделать какие-то свои изменения в последнем шаге как, например, корректировка размера, цвета градиента и направление ленты. Также можно придумать что-то свое с опцией трансформирования. Вот, что получилось у меня.
Конечный результат
| Английское название команды | Перевод на русский язык |
|---|---|
| «A» | |
| Actions | Экшены (Операции) |
| Adjustment Layer | Слой-настройки |
| Adjustments | Настройки |
| Advanced Blending | Дополнительные параметры смешивания |
| Airbrush | Аэрограф |
| All Caps | Все прописные |
| Alpha-channel | Альфа-канал |
| Altitude | Высота |
| Amount | Количество |
| Amplitwist | С поворотом |
| Anchor | Расположение |
| Angle | Угол |
| Angular | Угловой |
| Anti-aliasing | Сглаживание |
| Arbitrary | Произвольно |
| Arrange | Упорядочить |
| Attributes | Панель параметров |
| Audio Annotation | Звуковое примечание |
| Auto Contrast | Автоконтраст |
| Automate | Автоматизация |
| «B» | |
| Background | Фон |
| Background Eraser Tool | Инструмент «Фоновый ластик» |
| Batch | Пакетная обработка |
| Bicubic | Бикубическая интерполяция (наилучшая для плавных градиентов) |
| Bicubic Sharper | Бикубическая интерполяция, четче (наилучшая для уменьшения) |
| Bicubic Smoother | Бикубическая интерполяция, глаже (наилучшая для увеличения) |
| Bilinear | Билинейная интерполяция |
| Bitmap | Цветовой режим Битовый формат |
| Black Matte | Черная подложка |
| Black & White | Черно-белое |
| Blend Mode | Режим наложения (смешивания) |
| Blur | Размытие |
| Bounding Box | Габаритная рамка |
| Brightness | Яркость |
| Bring Forward | Переложить вперед |
| Bring to front | На передний план |
| Brush | Инструмент Кисть |
| Burn | Затемнение |
| «С» | |
| Canvas | Холст |
| Canvas Extension Color | Цвет расширения холста |
| Canvas Size | Размер холста |
| CCW | Против часовой стрелки |
| Channel Mixer | Смеситель (микшер) каналов |
| Channels | Каналы |
| Character | Палитра Символ (шрифт) |
| Choke | Уменьшение |
| Clear | Очистить/Удалить |
| Clipboard | Буфер обмена |
| Clipping Group | Группа обтравки |
| Clone | Клонирование |
| Close | Закрыть |
| CMYK (Cyan-Magenta-Yellow-blacK) | Цветовой режим «CMYK» (Голубой-пурпурный-желтый-черный) |
| Color | Цвет Режим наложения Цветность |
| Color Balance | Цветобаланс |
| Color Burn | Режим наложения Затемнение основы |
| Color Dodge | Режим наложения Осветление основы |
| Color Mode | Цветовые режимы |
| Color Picker | Выбор цвета (Пипетка) |
| Color Range | Диапазон цветов |
| Color Sampler | Инструмент «Цветовой эталон» |
| Colorize | Тонировать |
| Constrain Proportions | Сохранять пропорции |
| Content-Aware Scale | Масштаб с учетом содержимого |
| Contour | Контур |
| Contrast | Контраст |
| Crisp | Четкий |
| Crop | Кадрирование |
| Crop and Straighten | Кадрировать и выпрямить фотографию |
| Crop Tool | Инструмент Рамка |
| Cropped Area | Отсеченнное |
| Cursors | Категория настроек «Курсоры» |
| Current Size | Текущий размер |
| Curves | Кривые |
| Custom Shape | Произвольная фигура |
| CW | По часовой стрелке |
| «D» | |
| Darken | Режим наложения Затемнение |
| Darker Color | Режим наложения Темнее |
| Decontaminate Colors | Очистить цвета |
| Delete | Удалить |
| Depth | Глубина |
| Desaturate | Уменьшение насыщенности (Денасыщение) |
| Deselect Linked Layers | Отменить связь слоев |
| Diameter | Диаметр |
| Diamond | Ромбовидный |
| Difference | Режим наложения Разница |
| Dissolve | Режим наложения Затухание или Растворение |
| Distanсе | Расстояние |
| Distort | Искажение |
| Divide | Режим наложения Разделить |
| Document Size | Размер печатного оттиска |
| Dodge | Осветление |
| Don’t show again | Не показывать снова |
| Drop Shadow | Отбрасывание тени |
| Droplet | Дроплет |
| Duplicate Layer | Создать дубликат слоя |
| «E» | |
| Edit | Правка |
| Effects | Эффекты |
| Elliptical Marquee Tool | Инструмент Овальная область |
| Emboss | Тиснение |
| Equalize | Выравнивание |
| Erase Refinements | Стереть уточнение |
| Eraser | Инструмент Ластик |
| Exclusion | Режим наложения Исключение |
| Export Layers To File | Экспортировать слои в файлы |
| Exposure | Воздействие (Выдержка) |
| Extract | Извлечь |
| Eyedropper | Инструмент «Пипетка» |
| «F» | |
| Faux Bold | Псевдожирный |
| Faux Italic | Псевдокурсив |
| Feather | Растушевка |
| File | Файл |
| File Handling | Категория настроек «Обработка файлов» |
| File Info | Сведения о файле |
| Fill | Заливка |
| Filter | Фильтр |
| Flatten Image | Объединить слои |
| Flip Canvas | Перевернуть холст (отразить холст) |
| Flip Horizontal | Отразить по горизонтали |
| Flip Vertical | Отразить по вертикали |
| Free Transform | Свободное трансформирование |
| Freeze | Заморозить |
| Frequency | Частота |
| Fuzziness | Разброс |
| «G» | |
| Gamut | Гамма |
| Gaussian Blur | Размытие по Гауссу |
| General | Категория настроек «Основные» |
| General Blending | Общие параметры смешивания |
| Glyph | Глиф (символ) |
| Gradient | Градиент |
| Gradient Editor | Редактор градиента |
| Gradient Type | Тип градиента |
| Grayscale | Цветовой режим «В градациях серого» |
| Grid | Сетка |
| Group Layers | Сгруппировать слои |
| Guides | Направляющие |
| Guides, Grid & Stices | Категория настроек «Направляющие, сетка и фрагменты» |
| «H» | |
| Hand | Рука |
| Hardness | Жесткость |
| Hard Light | Режим наложения Жесткий свет |
| Hard Mix | Режим наложения Жесткое смешение |
| Height | Высота |
| Hide | Скрыть |
| Hidden Layers | Скрытые слои |
| Highlights | Яркие тона/Подсветка |
| History | Палитра История |
| History Brush Tool | Инструмент «Архивная кисть» |
| Horizontal Type | Горизонтальный текст |
| Horizontal Type Mask | Горизонтальный текст-маска |
| Hue | Тон Режим наложения Цветовой тон |
| Hyphenation | Расстановка переносов |
| «I» | |
| Image | Изображение |
| Image Rotation | Вращение изображения |
| Image Size | Размер изображения |
| Inner Glow | Внутреннее свечение |
| Input Levels | Входные уровни |
| Interface | Интерфейс |
| Intersect | Пересечь |
| Inverse | Инверсия выделения |
| Invert | Инверсия цвета |
| «J» | |
| Jitting | Дрожание |
| Justification | Выравнивание |
| «K» | |
| Kerning | Kepнинг |
| Knockout | Исключение |
| «L» | |
| Lab | Цветовой режим «Lab» |
| Lasso Tool | Инструмент «Лассо» |
| Layer | Слой |
| Layer Comps | Композиция слоев |
| Layer Style | Стиль слоя |
| Layer via Copy | Скопировать на новый слой |
| Levels | Уровни |
| Lighten | Режим наложения Замена светлым |
| Lighter Color | Режим наложения Светлее |
| Linear Burn | Режим наложения Линейный затемнитель |
| linear Dodge Add | Режим наложения Линейный осветлитель (добавить) |
| Linear Light | Режим наложения Линейный свет |
| Link Layers | Связать слои |
| Liquify | Исключение |
| Localized Color Clusters | Локализованные наборы цветов |
| Location | Положение |
| Lock All | Сохраняет все |
| Lock All Layers in Group | Закрепить слои |
| Lock Image Pixels | Сохраняет цвета пикселов |
| Lock Position | Закрепляет положение |
| Lock Transparent Pixels | Сохраняет прозрачность пикселов |
| Loose | Свободный |
| Luminosity | Режим наложения Яркость |
| «M» | |
| Marching Ants | «Марширующие муравьи» |
| Mask | Маска |
| Matte | Матовое покрытие |
| Matting | Матирование |
| Maximize | Развернуть |
| Merge Down | Объединить с предыдущим |
| Merge Layers | Объединить слои |
| Merge Visible | Объединить видимые |
| Mesh | Сетка |
| Magnetic Lasso Tool | Инструмент «Магнитное лассо» |
| Magic Eraser Tool | Инструмент «Волшебный ластик» |
| Magic Wand Tool | Инструмент «Волшебная палочка» |
| Match Zoom | Согласовать масштаб |
| Midtones | Средние тона |
| Minimize | Свернуть |
| Mode | Режим |
| Monochrome | Монохромный |
| Move | Инструмент Перемещение |
| Multiply | Режим наложения Умножение |
| «N» | |
| Nearest Neighbor | Интерполяция По соседним пикселям (сохраняет четкие края) |
| New | Создать (Новый) |
| New Size | Новый размер |
| Next | Следующий |
| Noise | Шум |
| Notes | Заметки |
| «O» | |
| On Black | На черном |
| On Layers | На слоях |
| On White | На белом |
| Opacity | Непрозрачность |
| Open | Открыть |
| Outline | Контур (Очертание) |
| Output Levels | Выходные уровни |
| Output То | Вывод в |
| Overlay | Режим наложения Перекрытие |
| «P» | |
| Paint Bucket | Ведро |
| Palette | Панель (Палитра) |
| Paragraph | Палитра Абзац |
| Paste special | Специальная вставка |
| Path | Контур |
| Pattern | Узор (Образец, текстура) |
| Pen | Перо |
| Pencil | Карандаш |
| Performance | Категория настроек «Производительность» |
| Perspective | Перспектива |
| Pin Light | Режим наложения Точечный свет |
| Pixel | Пиксель |
| Pixel Dimensions | Размерность |
| Place | Поместить |
| Plugin | Плагин / Внешний модуль |
| Polygonal Lasso Tool | Инструмент «Прямолинейное лассо» |
| Posterize | Придание плакатного стиля |
| Preferences | Установки |
| Preserve Luminosity | Сохранять яркость |
| Preset Manager | Управление наборами |
| Pressure | Нажим |
| Preview | Предпросмотр |
| Proof Colors | Цвета пробного отпечатка |
| Proof Setup | Настройка пробного отпечатка |
| Печать | |
| Puppet Warp | Марионеточная деформация |
| Purge | Очистить |
| «Q» | |
| Quality | Качество |
| Quick Mask | Быстрая маска |
| Quick Selection | Инструмент «Быстрое выделение» |
| «R» | |
| Radial | Радиальный |
| Radius | Радиус |
| Range | Диапазон |
| Rasterize | Растеризовать слой |
| Reconstruct | Реконструировать |
| Rectangular Marquee Tool | Инструмент Прямоугольная область |
| Reflection | Отражение |
| Refine Edge | Уточнить край |
| Refine Radius | Уточнить радиус |
| Relative | Относительно |
| Remember Settings | Запомнить настройки |
| Resample Image | Интерполяция |
| Reselect | Повторное выделение |
| Resolution | Разрешение |
| Restore | Восстановить |
| Reveal Layer | Показать слой |
| Reverse | Восстановить (Отменить до исходного значения) |
| Revert | Инверсия |
| RGB (Red Green Blue) | Цветовой режим «RGB» (Красный-зеленый-синий) |
| Rigid | Строгий |
| Rotate | Поворот |
| Roundness | Округлость |
| Ruler | Линейка |
| «S» | |
| Sample | Образец |
| Sample Size | Размер образца |
| Sampled Colors | По образцам |
| Saturation | Насыщенность Режим наложения Насыщенность |
| Save | Сохранить |
| Save to Web | Сохранить для Web и устройств |
| Scale | Масштаб / Масштабирование |
| Scale Styles | Масштабировать стили |
| Screen | Режим наложения Экран |
| Select Linked Layers | Выделить связанные слои |
| Select / Selection | Выделение |
| Selection Preview | Просмотр |
| Send to Back | На задний план |
| Send Backward | Переложить назад |
| Shading | Затенение |
| Shadows | Темные тона (тени) |
| Shape | Фигура |
| Sharp | Резкий |
| Show Sample Ring | Кольцо пробы |
| Shift Edge | Сместить край |
| Sharpen | Резкость |
| Similar Layers | Подобные слои |
| Single Column Marquee Tool | Инструмент Область (вертикальная строка) |
| Single Row Marquee Tool | Инструмент Область (горизонтальная строка) |
| Size | Размер |
| Skew | Наклон |
| Slice Tool | Инструмент Раскройка |
| Slice Select Tool | Инструмент Выделение фрагмента |
| Small Caps | Строчные |
| Smart Object | Смарт-объект |
| Smart Radius | «Умный радиус» |
| Smooth | Сгладить |
| Smudge | Палец |
| Snap To | Прикрепить к |
| Snapshot | Снимок |
| Soft Light | Режим наложения Мягкий свет |
| Solidity | Плотность |
| Spacing | Интервал |
| Spread | Рассеивание |
| Stiff | Сильный |
| Strikethrough | Перечеркнуть |
| Stroke | Обводка |
| Stroke Path | Обводка контура |
| Strong | Сильный |
| Styles | Стили |
| Subscript | Нижний индекс |
| Subtract | Режим наложения Вычитание |
| Superscript | Верхний индекс |
| Swatches | Образцы |
| «T» | |
| Threshold | Порог |
| Thumbnail | Пиктограмма |
| Tolerance | Допуск |
| Tool Options Bar | Панель опций |
| Toolbox | Панель инструментов |
| Transform | Изменение |
| Transform Selection | Трансформировать выделенную область |
| Transparent | Прозрачный |
| Transparency & Gamut | Категория настроек «Прозрачность и цветовой охват» |
| Trash | Корзина |
| Trim | Тримминг |
| Turbulence | Волнение |
| Type Tool | Инструмент Текст |
| «U» | |
| Underline | Подчеркнуть |
| Underlying | Нижележащий |
| Undo | Отменить |
| Ungroup Layers | Разгруппировать слои |
| Units & Rulers | Категория настроек «Единицы измерения и линейки» |
| Unsharp Mask | Маска нерезкости |
| «V» | |
| Variations | Вариации |
| Vector Mask | Векторная маска |
| Vertical Type | Вертикальный текст |
| Vertical Type Mask | Вертикальный текст-маска |
| View / View Mode | Вид |
| Vivid Light | Режим наложения Яркий свет |
| «W» | |
| Warp | Деформация |
| Warp Text | Деформировать текст |
| White Matte | Белая подложка |
| Width | Ширина |
| Work Path | Рабочий контур |
| Workspace | Рабочее поле |
| «Z» | |
| Zoom Tool | Инструмент «Масштаб» |
Строгий Фон для Фотошопа — Фото база
Фон красивый для фотошопа темный — светлый
белый фон для фотошопа — Поиск в Google | Removable .
..
..
Фиолетовый фон для фотошопа, скачать на instapik
Фото Для Фон Фотошопа
Фоны для фотошопа Абстракция
Светлые фоны для фотошопа in 2020 | Фони
фон тонировка для фотошопа: 6 тыс изображений найдено в …
Детские фоны- 2 для фотошопа. Обсуждение на LiveInternet …
розовый фон для фотошопа — Поиск в Google | Розовый …
фон тонировка для фотошопа: 6 тыс изображений найдено в …
Красивый фиолетовый фон для фотошопа, скачать на instapik
Пин на доске Обои
Картинки по запросу красивый фон для фотошопа зима | Цветы . ..
..
Картинки фона для фотошопа (38 фото) | Приколист
Фон красивый для фотошопа темный — светлый
стол фон для фотошопа — Поиск в Google | Стол, Инстаграм, Фон
фон тонировка для фотошопа: 6 тыс изображений найдено в …
Красивые фоны для фотошопа и фотографий | Фотографии, Фон …
Фон Моря Для Фотошопа — coffeestandart
Красивые картинки для фотошопа (35 фото) • Прикольные …
Картинки Фон Голубого Цвета Детский / picpool.ru
красивый голубой фон для фотошопа: 23 тыс изображений . ..
..
Синие фоны для фотошопа
Красивый Фон Для Фотошопа — titanmet
Серо белый фон для фотошопа соты, скачать на instapik
пнг фоны для фотошопа: 6 тыс изображений найдено в Яндекс …
Красивый фон в Photoshop | Уроки Фотошопа (Photoshop …
красивые фоны для фотошопа — Google Търсене | Фон с …
скачать фоны для фотошопа — Поиск в Google | Фон
Красивый черный фон для фотошопа, скачать на instapik.
бирюзовый фон для фотошопа высокого разрешения с узорами …
фон для фотошопа однотонный — Поиск в Google | Цвета . ..
..
Синие фоны для фотошопа
фон школьный для фотошопа: 17 тыс изображений найдено в …
Фоны деревня png | Искусство, Картинки и Фон
рамки для фотошопа: 14 тыс изображений найдено в Яндекс …
Зима. Картинки. Фоны для фотошопа | Контурный макияж …
Бесплатно Праздничный Фон Для Фотошопа скачать — backupermixer
Resultado de imagem para зеленый фон для фотошопа
фон для фотошопа с рамками для коллажа: 6 тыс изображений …
Красивые фоны
Яркие желтые фоны для фотошопа — Текстуры, паттены . ..
..
AVATAN PLUS — Социальный Фоторедактор
Деловая презентация: 21 фон и 15 слайдов шаблона в …
Новогодний фон для фотошопа
фон для фотошопа однотонный — Поиск в Google (с …
Летний фон леса для фотошопа, скачать на instapik
Темно-синий фон
Скачать фон для Фотошопа. Вackground in Photoshop — YouTube
Красивый фон цветы для фотошопа — подборка
Линейные градиенты • Про CSS
CSS-градиенты позволяют сделать фон из двух и более цветов, плавно переходящих из одного в другой.
Они с нами уже достаточно давно, и имеют довольно неплохую поддержку браузерами. Большинство современных браузеров понимает их без префиксов, для IE9 и старше есть Gradient Filter, также для IE9 можно использовать SVG.
Спецификация: w3.org/TR/css3-images/#gradients.
Градиенты могут быть использованы везде, где используются картинки: в фонах, в качестве буллетов списков, они могут быть заданы в content или border-image.
linear-gradient
Линейные градиенты достаточно просты в использовании. Для самого элементарного градиента достаточно задать начальный и конечный цвета:
background: linear-gradient(orangered, gold);Цветов может быть любое количество больше двух. Также можно управлять направлением градиента и границами (точками остановки) цветов.
Угол или направление градиента
Направление можно задавать градусами или ключевыми словами.
В градусах: от 0 до 360, например 270deg.
Ключевыми словами:
to top = 0deg;
to right = 90deg;
to bottom = 180deg — значение по умолчанию;
to left = 270deg.
Ключевые слова можно сочетать между собой, чтобы получить диагональный градиент, например to top left.
Ниже можно увидеть как работают разные направления в растяжке от сиреневого до желтого:
Вот код самого первого квадрата, для примера:
.top-left {
background: linear-gradient(to top left, purple, crimson, orangered, gold);
}Следует помнить, что to top right не то же самое, что 45deg. Цвета градиента располагаются перпендикулярно линии направления градиента. При to top right линия идет из нижнего левого в верхний правый угол, при 45deg — располагается строго под этим углом независимо от размеров фигуры.
Разница хорошо видна на прямоугольных фигурах:
Управление положением цветов
Значения точек остановки для цветов градиента задаются в единицах или в процентах и могут быть больше 100% и меньше 0%.
Примеры задания значений в %, в em и значения, выходящие за границы элемента:
Чем ближе находятся точки остановки соседних цветов, тем четче будет граница между ними. Таким образом можно легко делать полосатые фоны:
Так можно сделать, например, фон под боковую колонку, растянутый на всю высоту родительского элемента:
Полоски на фоне сайдбара — ещё один градиент, состоящий из чередования полной прозрачности и белого цвета с прозрачностью 30%. Градиенты с полупрозрачными цветами удобны тем, что их можно наложить поверх фона любого цвета.
Градиент в примере задан сложным длинным кодом, потому что полоски должны располагаться только над фоном для сайдбара. Если не пытаться сделать всё фоном для одного блока, можно было бы решить задачу с помощью псевдоэлемента.
При отсутствии ограничений код может быть гораздо короче:
.light {
background: peachpuff linear-gradient(90deg,
rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, . 4) 50%
) center center / 2em;
}
.dark {
background: steelblue linear-gradient(
rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%
) center center / 100% 1em;
}
4) 50%
) center center / 2em;
}
.dark {
background: steelblue linear-gradient(
rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, .2) 50%
) center center / 100% 1em;
}В первой строчке задаем фоновый цвет элемента, тип и направление (цвет и направление можно опустить), во второй — определяем цвета градиента и границу между ними, в третьей — задаем положение и размер получившегося изображения. Самая важная часть — размер. По умолчанию фон повторяется, поэтому получившийся паттерн заполнит собой фон элемента. Очень легко и понятно : )
Вся запись может быть сделана в одну строчку, но для читабельности удобнее писать в несколько, особенно для сложных градиентов.
Также важно знать, что ключевое слово transparent означает прозрачный черный, а не прозрачный белый, поэтому при его использовании в Firefox можно получить вот такую неприятность:
Действующий пример (смотреть в Firefox): jsbin.com/OvOwEma/2/edit.
Чтобы этого избежать, используйте полностью прозрачные цвета нужного оттенка, например, белый: rgba(255, 255, 255, 0) или черный rgba(0, 0, 0, 0).
Про разные способы задавать цвета можно почитать здесь.
Чтобы узнать rgb-нотацию конкретного цвета, можно воспользоваться leaverou.github.io/css-colors, инструментом от Lea Verou.
repeating-linear-gradient
Помимо обычного linear-gradient можно сделать repeating-linear-gradient — повторяющийся градиент
Примерный код:
background: repeating-linear-gradient(
green, green .5em,
transparent .5em, transparent 1em
);К сожалению, повторяющиеся градиенты ведут себя как попало и подойдут только для узоров, которым не важна точность. Если нужна аккуратность, используйте linear-gradient в сочетании с background-size и background-repeat.
Upd. от 3.07.20: в данный момент повторяющиеся градиенты корректно отрисоваются в большинстве браузеров, и ими можно свободно пользоваться.
Ограничения
Градиенты имеют такое же ограничение, что и box-shadow: им нельзя задавать отдельно цвета или направление.
Это приводит к дублированию кода и острой потребности воспользоваться препроцессорами в случае создания сложных градиентов.
Другое ограничение состоит в том, что градиенты не анимируются, что, впрочем, можно до какой-то степени обойти.
Для быстрого создания кроссбраузерных градиентов есть очень удобный инструмент: colorzilla.com/gradient-editor/. Помимо кода для современных браузеров, он предложит код для старых IE и SVG для 9-го.
В сочетании с базовыми возможностями управления фоновыми картинками градиенты дают широчайшие возможности для создания фонов разной степени сложности совершенно без использования изображений. Градиентами можно делать сложные и интересные паттерны, но это уже совсем другая тема.
Используйте этот новый, более простой метод для замены фона в Photoshop
Используя последнюю версию Photoshop CC, вы можете использовать новый метод, чтобы вырезать портрет и поместить его на новый фон. И что самое замечательное, это занимает всего несколько секунд.
Я помню время, когда Photoshop был в зачаточном состоянии, и мои навыки редактирования изображений тоже были. Я бы потратил бесчисленные часы, пытаясь вырезать портрет с помощью инструмента «Перо» или даже кисти и поместить позади новый фон, но теперь я могу сделать все это всего несколькими щелчками мыши и небольшой настройкой.
Используя новый инструмент и немного удачи, вам едва ли нужно пошевелить пальцем, Photoshop CC теперь настолько мощный и интеллектуальный, что может сделать за вас большую часть тяжелой работы. Итак, давайте взглянем на этот новый метод и посмотрим, сможете ли вы вырезать фон из портрета всего за несколько секунд.
1. Откройте образ
Лучше всего вырезать изображения с чистым ясным фоном. Это потому, что так легче отличить портретный объект от фона.Однако в настоящее время вырезать даже фотографии с загруженным фоном сравнительно легко. Я выбрал один с чистым фоном, но с резким спадом светлой тени, чтобы Photoshop был в тонусе.
2. Выберите инструмент выделения
Это может быть инструмент Magic Wand, Quick Select или Object Selection. На данный момент это не имеет особого значения, потому что это дополнительная, новая функция внутри них, которую мы хотим использовать. Вдали от тех времен, когда мы выбирали изображения и настраивали допуск и чувствительность инструментов выделения, мы будем использовать технологию Adobe Sensei, чтобы вырезать этот портрет для нас.
3. Используйте Select Subject
Вот хитрый момент. Новая опция Photoshop «Выбрать тему» доступна под каждым инструментом выделения прямо в верхней части окна. Он находится рядом с Select and Mask, которые используются для уточнения выделения. Adobe и многие другие продемонстрировали, что Select Subject хорошо работает даже со сложным фоном и в различных условиях освещения.
Однако, как всегда, лучше всего работает с чистым фоном. В отличие от стандартного инструмента выделения, он интеллектуально обнаруживает промежутки между руками и ногами в процессе выбора, экономя ваше время.
4. Добавьте маску
В нижней части палитры «Слои» вам теперь нужно нажать кнопку «Добавить маску слоя», чтобы разместить выделение на слое. Не забывайте, что если ваш слой заблокирован, вам нужно дважды щелкнуть по нему и нажать Enter, чтобы разблокировать его. Затем маска опустится на место и должна относительно легко вырезать объект портрета, как это было сделано здесь.
5. Оставьте на заднем плане
Создайте новый слой (сочетание клавиш Ctrl + Shift + N или Command + Shift + N на Mac) и поместите его под портретным слоем.Теперь вы можете создать свой собственный фон, как градиент, который я сделал здесь, или выбрать размещение готового фона. Ключевым моментом здесь является то, чтобы они хорошо сочетались друг с другом, чтобы они выглядели бесшовно.
Лучший способ сделать это — подобрать тон портретного объекта. Мой портрет темный, с одной камерой с единственным источником света, поэтому я добавил небольшой радиальный градиент позади самой яркой части объекта.
6. Добавьте стиль слоя
Последняя настройка, которую я сделаю для этой замены фона, — это добавление стиля слоя из нижней части палитры слоев.Добавляя простую тень, я растушевываю темную сторону объекта с фоном. Я также регулирую угол освещения для падающей тени так, чтобы тень отбрасывалась в том направлении, в котором тень могла бы возникнуть естественным образом, справа от камеры, из-за того, что источник света размещен слева от камеры.
7. Уточните свой выбор
Если вы заметили, что функция «Выбрать тему» не дала вам наилучшего результата, или если вы хотите сделать его абсолютно идеальным, то вам необходимо уточнить выбор.Выделив миниатюру маски, перейдите к любому инструменту выделения (Quick Select, Magic Wand или Object Selection) и перейдите к кнопке Select and Mask в верхней части окна.
Отсюда откроется новое окно, чтобы уточнить ваш выбор. Вы можете закрасить существующее выделение и внести другие глобальные настройки, такие как сглаживание, растушевка, контраст, а также вы можете сместить край внутрь или наружу, если вам нужна небольшая свобода действий.
Сводка
Я полностью осознаю, что инструмент «Выбрать тему» не идеален.Он относительно новый для программного обеспечения Adobe и все еще может быть улучшен. Но для чего-то, что когда-то требовало у меня часов кропотливой работы, чтобы сделать это за несколько секунд самим Photoshop, я сэкономил много времени на редактирование. Фактически, я рассчитал время только сейчас, выполняя весь процесс, описанный выше, и это заняло менее 60 секунд. Конечно, он не на 100% точен, но для тех, кто не нуждается в совершенстве или, возможно, имеет большой объем работы, это точно экономит время.
Значок стрелки на главном изображении, сделанный Майклом, используется под лицензией Creative Commons.
Как создать минимальный фон рабочего стола с помощью Photoshop
Вы когда-нибудь видели эти плавные, безобидные фоны рабочего стола, которые появляются на экранах компьютеров по умолчанию? Это именно то изображение, о котором я подумал, когда возился с Photoshop для этого урока.
Хотя они и неточны, эти простые градиенты и формы собраны вместе, чтобы вызвать небольшую ностальгию.
Этот проект довольно прост, но он познакомил меня с парой техник, с которыми я никогда раньше не сталкивался.Photoshop открыл целые миры технологий создания изображений. Но если все это свести к минимуму, кульминация работы фотографа — это оттенки света, рассеянные внутри форм.
Я хорошо провел время, собирая это руководство — я даже опробовал несколько на своем рабочем столе. Это отличный способ познакомиться с операциями Photoshop. Но для профессионала это не менее весело, если у него есть небольшой перерыв в работе с фотографиями. Итак, давайте копнем.
Начало работы
Сначала откройте новый документ в Photoshop.Измените размеры холста на средний размер фона рабочего стола — 1920 на 1080 пикселей, как показано ниже.
Добавить градиент
Выберите «Слой» на вкладке «Слои» на верхней панели инструментов и нажмите «Новый слой заливки», а затем «Градиент».
На всплывающей панели «Градиент» щелкните стрелку раскрывающегося списка и выберите «Простые градиенты».
Выберите цвет из образцов на вкладке «Простой».
Выберите цвет, который вам больше всего нравится — какой вам больше нравится!
Щелкните прямо на панели для выбора цвета градиента, и появится новая панель.Это позволит вам дополнительно настроить цветовую схему. Щелкните белый узел под полосой градиента. Появится палитра цветов, позволяющая изменить белые части исходного градиента на другой оттенок.
На данном этапе я бы порекомендовал цвет, похожий по оттенку на ваш исходный цвет. Я большой поклонник розового, поэтому я выбрала легкий легкий оттенок розового, чтобы дополнить свою общую цветовую схему. Но это полностью зависит от вас!
Подтвердите цвет градиента.В качестве стиля выберите Радиальный и масштаб 150.
При выборе параметра «Радиальный» более светлый оттенок исходит из центра изображения.
Добавить еще один слой
Затем создайте новый слой через вкладку слоев в верхней части экрана. В раскрывающемся меню выберите «Создать» и выберите «Слой». При появлении запроса нажмите «ОК».
Добавить форму
Щелкните инструмент Elliptical Marquee Tool. Это может быть скрыто с помощью инструмента Rectangular Marquee Tool, поэтому щелкните и удерживайте указатель мыши на инструменте на мгновение, чтобы открыть другие параметры.
Выбрав инструмент Elliptical Marquee Tool, нарисуйте круг, который пересекается с верхним углом вашего изображения. Чтобы эллиптический инструмент оставался ровным со всех сторон (другими словами, круг), удерживайте нажатой клавишу Shift при перетаскивании части формы через верхний угол.
Откройте инструмент «Кисть» и выберите красивую кисть с мягкими краями. Установите размер кисти от 200 до 400 пикселей и нулевой уровень жесткости. Выберите цвет чуть более темного оттенка.
Я выбрала персиковый цвет.
Не снимая выделения с инструмента Elliptical Tool, проведите кистью по самому внешнему краю четверти круга, полагаясь на мягкость кисти, чтобы стереть пыль с внутреннего края.
Используйте немного другой оттенок, чтобы выделить край созданного круга.
Дублируйте слой-фигуру столько раз, сколько хотите, чтобы создать интересный узор.
Добавить размер
Затем мы добавим новое измерение к изображению, используя инструмент Rectangular Marquee Tool, а не Ellipse Tool.
Создайте новый слой и затем выберите инструмент «Прямоугольная область» на панели. Растяните инструмент Rectangular Marquee Tool по изображению, чтобы выделить примерно половину, как показано ниже.
Прямоугольное выделение.
Используя ту же технику и цвет, что и для эллипса, проведите кистью по периметру формы, оставляя только малейшие тени.
Не снимая выделения с прямоугольника, нажмите Edit> Transform> Warp.
Медленно перетащите различные точки прямоугольного выделения, чтобы настроить всю форму слоя. Старайтесь сначала вносить постепенные правки, чтобы на линии не было острых углов.
Преобразуйте прямоугольник.
Край прямоугольника после преобразования.
Режимы наложения
Теперь, чтобы добавить изображению немного большей глубины, вы можете применить режимы наложения, чтобы выделить блики на заднем плане. Выберите слой и нажмите «Режимы наложения», обычно расположенные над панелью «Слои».Выберите настройку из списка доступных режимов наложения. Обычно я использую опцию Color Burn, но не стесняйтесь экспериментировать!
Режимы наложения.
И вот оно! Неплохо, да? Удивительно, что вы можете сделать с несколькими кругами и тенями.
Пластик
Если хотите, попробуйте поэкспериментировать с инструментом Liquefy. Он находится на вкладке «Фильтр» на верхней панели инструментов.
Перед тем, как использовать инструмент разжижения для изображения, я построил его, выполнив шаги, описанные выше.
После использования инструмента Liquefy. Как видите, формы стали более органичными.
К вам!
Вот еще несколько моих творений. Мне бы очень хотелось, чтобы вы увидели, как получился фон вашего рабочего стола, поделитесь, пожалуйста, в комментариях ниже.
Минималистичный подход, созданный путем скручивания прямоугольного края с помощью инструмента Warp Tool.
Теперь ваша очередь! Покажи мне, как это было, в комментариях.
Расширение фона в Photoshop за 3 простых шага
Как расширить фон в Photoshop
Вы когда-нибудь делали снимок, а потом, когда вы открывали его в Photoshop, вам хотелось, чтобы на вашем изображении было немного больше неба, травы или фона?
В этом уроке я научу вас очень простому трехэтапному процессу, который поможет вам легко расширить фон в Photoshop.
В этом примере я собираюсь расширить правую часть моего исходного портретного изображения в Photoshop, чтобы мой объект был помещен немного левее центра фотографии, чем он есть сейчас.
Если немного переместить ее в кадре и приблизить к точке, соответствующей правилу третей вертикальной линии, это улучшит композицию фотографии и создаст более сбалансированную и привлекательную фотографию.
Шаг 1. Добавьте холст
В Photoshop выберите Изображение> Размер холста.
Появится всплывающее окно, в котором вы можете изменить размер в любом направлении, по вертикали или по горизонтали. В моем примере я хочу расширить изображение на правую сторону, поэтому увеличу ширину с 75,25 до 80. Затем я выберу стрелку, указывающую влево, чтобы «натянуть изображение» и освободить больше места на верно. Когда это будет сделано, нажмите ОК.
Теперь у вас должна быть открытая область в правой части изображения или в той области, которую вы выбрали для увеличения изображения.
Шаг 2: Выберите только что добавленную область
Выберите инструмент Magic Wand Tool на панели инструментов Photoshop в левой части экрана. Затем щелкните только что добавленную область изображения, чтобы выбрать ее.
Шаг 3. Заполните добавленную область с помощью Content Aware
Перейдите в меню Edit> Fill . Когда вы это сделаете, появится диалоговое окно «Заполнить». Убедитесь, что для параметра «Использовать» установлено значение Content-Aware, затем нажмите «ОК».
Имейте в виду, что инструмент Photoshop Content Aware Tool извлекает фон из ближайших областей, которые вы хотите расширить.Этот простой метод прекрасно работает, когда вы хотите расширить части изображения, имеющие согласованный узор или фон.
Вы также должны иметь в виду, что он может работать не во всех ситуациях. Например, если бы я попытался расширить левую часть этого изображения, у меня не было бы достаточно хорошей области фона для работы с этой техникой, потому что мой объект уже находится так близко к левому краю.
До и после расширения фона в Photoshop
На изображениях ниже показаны до и после, с небольшим дополнительным фоном в правой части изображения.
Заключение
В будущем, если вы когда-нибудь почувствовали, что не смогли захватить достаточно фона на своей фотографии, вы можете использовать эти 3 простых шага, чтобы легко расширить фон в Photoshop и улучшить композицию вашего изображения!
У вас есть вопросы или комментарии о том, как расширить рамки в Photoshop? Оставьте нам комментарий ниже — мы будем рады услышать от вас! И ПОЖАЛУЙСТА, ПОДЕЛИТЬСЯ этим руководством с помощью кнопок социальных сетей (мы очень ценим это!)
Как удалить фон в Photoshop (3 примера)
Узнайте, как удалить фон в Photoshop, комбинируя использование нескольких инструментов Photoshop.Сначала мы воспользуемся улучшенной функцией «Выделение и маска», чтобы удалить фон всего за 2 клика.
Затем используйте инструмент Background Eraser (E) , чтобы удалить фон, и, в конце концов, мы извлечем волосы из сложного фона с большим количеством деталей волос и закончим их, используя специальные кисти для волос и добавив новый фон.
Перейти в любимый раздел:
Твердые и чистые фоны
Фотография с чистым и сплошным фоном всегда предпочтительнее для удаления фона.Ответ прост, потому что эту тему извлечь намного проще. На чистом фоне не так много деталей, это может быть просто цветной или полностью размытый фон.
Взгляните на этот пример. Вы заметите, что цвет фона желтый, нам нужно выбрать только один цвет, чтобы удалить его.
Вы можете легко удалить этот фон с помощью действия Remove Background Action . Перейдите в «Окно »> «Свойства», в разделе «Быстрые действия»> нажмите кнопку «Удалить фон», чтобы удалить фон.
Независимо от того, какую технику вы используете, вам всегда нужно воссоздавать волосы, если вы хотите с ними справиться.
Удаление занятого и сложного фона
Когда фон загружен, труден и сложен, удалить фон может оказаться непростой задачей. Особенно, если у вашего объекта есть расплывающиеся пряди волос на загруженном фоне, вам может быть сложно удалить фон.
Шаг 1. Выберите инструмент «Ластик для фона»
Этот инструмент работает, выбирая цвет из изображения.По сути, он выбирает цвета, чтобы стереть их, а затем стирает эти пиксели, сопоставляя их с выбранным цветом. Каждый раз, когда вы нажимаете на изображение, чтобы стереть его части, это когда он пробует цвета для стирания.
Вы можете активировать этот инструмент, нажав (E) , или, в качестве альтернативы, вы можете навести курсор на Панель инструментов и найти его под инструментом «Ластик».
Шаг 2. Откройте образец изображения
Теперь откройте образец изображения, с которого вы хотите удалить фон.Я использую это изображение женского портрета и открыл его в Photoshop, выбрав File> Open .
После открытия изображения скопируйте его, нажав CTRL + J , чтобы у вас была резервная копия оригинала на случай, если что-то пойдет не так.
Шаг 3. Установите параметры инструмента «Ластик для фона»
Теперь настроим инструмент для использования. Установите Sampling: Continuous , что означает, что он будет выбирать разные цвета всякий раз, когда мы нажимаем на область изображения, чтобы стереть ее.Вы можете видеть на нашем изображении, что у нас много цветов, поэтому я выбрал именно его.
Установите предел : края и Допуск с до 25-29% . Низкое значение допуска ограничивает ластик рядом с выбранным цветом и наоборот.
Вы также можете выбрать опцию Protect Foreground Color , и это укажет ластику не стирать пиксели цвета переднего плана. Вы также можете выбрать цвет на изображении, чтобы защитить его.
Шаг 4 — Начните удаление фона
С указанными выше настройками начните стирать фон, рисуя по изображению.Убедитесь, что вы используете жесткую круглую щетку с твердостью , установленной на 100% , чтобы края волос были гладкими.
Вы можете установить жесткость кисти, щелкнув правой кнопкой мыши в любом месте, когда активен ластик фона , а затем использовать ползунок для уменьшения жесткости. Вы также можете изменить размер кисти.
Здесь вы можете видеть, что я использовал инструмент с правой стороны:
Точно так же я использовал его и в левой части изображения.Помните, что вы также можете взять образец цвета с волос модели, чтобы защитить их, когда вы находитесь рядом с волосами.
Итак, сейчас наша самая сложная часть сделана — волосы. Для оставшихся частей тела вы можете использовать инструмент «Перо» (P) .
После того, как вы проложили путь вокруг руки, сделайте выделение и используйте ластик фона, чтобы стереть фон вокруг руки модели:
Не беспокойтесь о сбоях в волосах и некоторых прядях, которые мы только что потеряли, мы исправим их за пару шагов.
Здесь я удалил фон полностью:
Шаг 5 — Воссоздайте волосы с помощью инструмента Brush Tool
Ластик сделал большую часть нашей работы, но мы можем сделать гораздо больше для улучшения изображения, в основном волос. Теперь нарисуем волосы, чтобы исправить их, используя инструмент «Кисть » .
Шаг 6 — Добавьте новый и соответствующий фон
Я добавил новый фон позади модели, вы можете использовать любое изображение, которое захотите, и добавил Gaussian Blur, чтобы размыть фон.
Если вы добавите здесь свой окончательный фон, вам будет очень легко работать с волосами, поскольку иногда последний фон может помочь вам скрыть много ошибок . Кроме того, вы не будете тратить свое время на те области, которые вам не нужны, на .
Шаг 7 — Используйте специальные кисти для волос вместо обычной для окрашивания волос
Загрузите 7 нестандартных щеток для волос (необходимо оформить подписку)
Подпишитесь на мой информационный бюллетень, используя вышеупомянутую ссылку (не используйте форму боковой панели, иначе вы не получите ссылку для загрузки кистей) и получите 7 пользовательских кистей для волос.Я использовала одну из своих кистей для волос, чтобы идеально покрасить волосы:
Убедитесь, что вы используете планшет, иначе мазки кисти не будут выглядеть естественно. Я использовала одну кисть для волос, чтобы нарисовать отдельные разлетающиеся пряди волос:
Вы можете выбрать цвет из модели, а затем я нарисовал блики на волосах. Попробуйте попробовать разные цвета и раскрасить волосы.
Продолжайте красить волосы, и вы увидите, что я нарисовал сверху:
Здесь я нарисовал справа:
Здесь вы можете увидеть окончательные результаты:
Как удалить фон всего за 2 клика в Photoshop 2021
Шаг 1. Откройте образец изображения
Загрузите образец изображения с Pixabay, если хотите следовать за мной.Вы можете видеть на изображении ниже, я открыл изображение, выбрав File> Open .
Шаг 2 — Доступ к функции выбора и маски
Перейдите к Select> Select & Mask .
Шаг 3. Удаление фона за 2 клика
Позвольте мне показать вам две кнопки, которые помогут вам удалить фон всего за два клика. На изображении ниже вы можете увидеть две кнопки Select Subject & Refine Hair внутри диалогового окна Select & Mask .
Обратите внимание: эти две кнопки доступны только в обновлении Photoshop 2021. Если вы работаете в старой версии Photoshop, кнопка Refine Hair Button недоступна в старых версиях.
Как только вы окажетесь внутри Select & Mask , нажмите кнопку Select Subject , чтобы удалить фон.
Также у нас есть новый Refine Mode: Color & Object Aware . Я выбрал инструмент Object Aware Tool , потому что работаю со сложным фоном.Вы можете выбрать Color Aware , если фон чистый и простой. Итог — Object Aware для сложного и загруженного фона, а Color Aware — для простого и чистого фона .
Они добавили новую кнопку Refine Hair , она позволяет вам улучшить волосы одним щелчком мыши вместо того, чтобы улучшать волосы с помощью инструмента Refine Edge Brush Tool . Вы все еще можете использовать инструмент Refine Edge Brush Tool , но я тестирую его для простоты и удобства.
Нажмите кнопку «Уточнить волосы», чтобы при необходимости улучшить прическу:
Шаг 4 — Вывод результатов
Когда вы довольны результатом, перейдите к Output To: New Layer with Mask . Вы получите результат на новом слое с прикрепленной маской слоя, чтобы избежать повреждения исходного изображения.
Здесь видно, что мы удалили фон всего за 2 клика:
После удаления фона, Я добавил новый фон и видно, что это неплохо всего за 2 клика .
Конечно, есть что улучшить, и вы можете воссоздать волосы, отрегулировать освещение и цвет, чтобы новый фон выглядел так, что никто не может сказать, что фон был удален и заменен. Вы можете следовать примеру 2 и примеру 3 в руководстве, где я покажу вам, как воссоздать волосы с помощью собственных кистей для волос в Photoshop.
Восстанавливающие волосы
Шаг 1
Я использую это изображение девушки, загрузив его с Pexels, я открыл в Photoshop, выбрав File> Open .Вы можете видеть на этом изображении, что волосы трудно выделить, потому что фон не простой, не сплошной или белый, а также из-за разлетающихся и беспорядочных волосков.
Сделайте грубый выбор
Шаг 2
Теперь вам нужно сделать приблизительный выбор объекта либо с помощью инструмента «Перо » , либо с помощью новейшей функции «Выбрать объект », чтобы сделать выбор.
Шаг 3
Рядом с кнопкой Select Subject вы увидите кнопку Select And Mask , нажав на которую, чтобы мы могли уточнить выбор.
Если вы используете Photoshop CS6 или CS5, то сначала вам нужно добавить маску после того, как вы сделали выбор. Затем щелкните маску правой кнопкой мыши и выберите Refine Mask . Теперь у вас будет тот же вариант, что и на изображении ниже.
Теперь вам нужно уточнить выбор, который мы только что сделали. После того, как вы нажмете на кнопку Select and Mask , затем используйте инструмент Refine Edge Brush Tool , чтобы внести некоторые изменения в края волос, так как они выглядят слишком резкими прямо сейчас.Хотя этот инструмент не будет работать на этом сложном фоне, но, по крайней мере, он может немного облегчить нашу задачу, смягчив края волос.
Здесь вы можете видеть, что я использовал инструмент Refine Edge Brush Tool , чтобы улучшить волосы справа:
Здесь я использовал его на левой части волос:
Здесь я использовал на нижних волосках:
Когда вы довольны результатами, прокрутите вниз до настроек вывода (справа) и используйте New Layer with Mask , чтобы создать новый слой с маской.
Здесь у нас есть исходный слой-копия с новыми результатами маскирования:
Воспользуйтесь преимуществами нового фона
Шаг 4
Итак, ребята, мы девочку добываем для чего? Очевидно, мы собираемся добавить за ней другой фон. Прежде чем мы продолжим, просто добавьте сюда свой новый фон.
Если вы добавите здесь свой окончательный фон, вам будет очень легко работать с волосами, поскольку иногда последний фон может помочь вам скрыть много ошибок .Вы не будете тратить свое время на те области, в которых вам не нужно быть .
Итак, я добавил свой новый фон позади нее:
Как воссоздать пряди волос
Шаг 5
Итак, вы видите, что мы почти закончили, но нам нужно добавить последние штрихи к волосам. Для этого я использую щетки для волос, чтобы закрасить сбившиеся и отлетать волоски.
Вы можете получить эти кисти, если подпишетесь на нашу рассылку новостей только из этого руководства, не используйте форму боковой панели, иначе вы не получите ссылку для загрузки кистей .
Скачать Щетки для волос (необходимо оформить подписку)
Здесь вы можете видеть, что я создал новый слой ниже слоя с женщиной, а затем с помощью расчески закрасил распущенные волосы наверху.
Здесь я создал новый слой поверх всех слоев и нарисовал другой щеткой для волос:
Итак, на этот раз я закрасил женщину и четко, мне нужно стереть некоторые другие области, чтобы растушевать волосы. Перейдите в Слой > Маска слоя> Показать все , чтобы добавить маску к слою с волосами и замаскировать нежелательные части с помощью черной кисти.
Результатов после маскировки:
Шаг 6
Точно так же я закрасила больше волосков щеткой для волос. То, что я сделал, я взял образец цвета из волос модели, затем закрасил еще несколько волосков там, где я думаю, что они должны быть. Я варьирую размер кисти и цвет, чтобы закрасить волосы. В итоге я получил следующие результаты, но вы можете добиться большего, чем я, если потратите немного больше времени.
Здесь вы можете увидеть, сколько мазков кистью для волос я использовал, чтобы воспроизвести волосы:
Еще несколько примеров
Пример 4:
Пример 5:
Как размыть фон в Photoshop [Бесплатное видеоурок]
Учебное пособие по размытию фона в Photoshop
Мягкий, не в фокусе фон — чрезвычайно эффективный способ привлечь внимание зрителя к вашему объекту, а также очень востребованный вид, который должен быть частью навыков каждого фотографа.Как всегда, лучший способ сделать это — в камере. Поэтому, когда вы собираетесь сделать этот образ, попробуйте использовать объектив с широкой максимальной диафрагмой — например, 50 мм f / 1,2 или f / 1,4, которые отлично подходят для съемки портретов с малой глубиной резкости.
Иногда у вас может не оказаться подходящего объектива или вы не можете снимать на столь открытой диафрагме из-за условий освещения. Именно здесь Photoshop может спасти положение и идеально размыть фон любого изображения.
Создание реалистичного эффекта глубины резкости в Photoshop
Этот метод включает в себя точный выбор объекта (объектов) на фотографии, их дублирование, удаление их с исходного фона, размытие фона и последующее их размещение в изображении.Это займет немного времени, но эффект реалистичен и может легко превратить изображение в изображение, которое понравится вашему клиенту!
Пошаговое руководство по размытию фона
Загрузить образцы изображений
СкачатьОткройте образцы изображений в Photoshop
Сначала поместите how_to_create_a_dreamy_blurred_background_in_photoshop.jpg в Photoshop, выбрав «Файл» и «Открыть»… или перетащив файлы в рабочее пространство.
Пример редактирования: применение размытия по Гауссу
Дублируйте фоновый слой, нажав CMD или CTRL + J на клавиатуре или щелкнув и перетащив фоновый слой на символ нового слоя в нижней части панели слоев, чтобы продублировать слой.
Символ «Новый слой» обозначается квадратом со загнутым углом, который находится рядом с корзиной для мусора.
Дубликат слоя должен появиться как слой 1 на панели слоев.
Вверху рабочего пространства найдите Фильтр и спуститесь до Размытия.
В разделе «Размытие» выберите «Размытие по Гауссу…».
После выбора появится окно «Размытие по Гауссу».
Обратите внимание, как представлено увеличенное изображение для предварительного просмотра с эффектом размытия по Гауссу.Этот предварительный просмотр позволяет предварительно просмотреть текущие настройки в окне перед применением к фактическому изображению.
Расположен ползунок «Радиус» и «Пиксели» под предварительным просмотром изображения.
При перемещении ползунка «Пиксели» влево или вправо эффект размытия по Гауссу увеличивается и уменьшается.
Установите радиус на 40,2 и нажмите ОК.
Пример редактирования: расширенное размытие
Обратите внимание, как размытие по Гауссу повлияло не только на фон, но и на объекты.
Найдите верхнюю часть панели слоев, где расположена прозрачность.
Пока выбран слой 1, уменьшите и увеличьте Непрозрачность.
По мере регулировки непрозрачности обратите внимание на то, как размытие по Гауссу распространяется за пределы основных объектов.
Так как размытие вокруг основных объектов распространяется за пределы отдельных лиц, рекомендуется применить другое размытие.
Пример редактирования: применение размытия с помощью маски слоя
Например, создайте маску слоя для слоя 1.
Чтобы создать новую маску слоя, найдите нижнюю часть панели слоев.
Выберите символ в виде прямоугольника с кружком посередине. Этот символ представляет маску слоя.
Если черный установлен в качестве цвета переднего плана, нажмите CMD + Delete или CTRL + Backspace на клавиатуре, чтобы заполнить маску слоя для слоя 1 черным.
Если черный еще не выбран в качестве цвета переднего плана, найдите нижнюю часть панели инструментов. Обратите внимание на две цветные рамки.Цвет сверху представляет цвет переднего плана, а цвет позади него представляет цвет фона.
Найдите два меньших цветных прямоугольника под цветами переднего плана и фона.
Это кнопка «Цвета переднего плана и фона по умолчанию».
Просто щелкните символ или нажмите D на клавиатуре.
Обратите внимание, что цвета переднего и заднего плана — белый и черный.
Нажмите X на клавиатуре, чтобы изменить цвет переднего плана на черный.
Теперь нажмите CMD + Delete или CTRL + Backspace на клавиатуре.
Маска слоя для слоя 1 теперь будет заполнена черным цветом.
Теперь нажмите X на клавиатуре, чтобы переключить цвет переднего плана на белый.
Поскольку маска слоя заполнена черным цветом, это означает, что эффект, добавленный к слою 1, не будет применяться ко всему изображению, поскольку в настоящее время он скрыт.
Чтобы показать размытие, добавленное к Слою 1, просто закрасьте белым вокруг невесты.
Обратите внимание, что вокруг основного объекта появится ореол после применения размытия.
Этот эффект возникает из-за того, что объекты попадают в размытие.
Чтобы увидеть разницу между исходным изображением и изображением, которое было размыто, удерживайте Shift и щелкните маску слоя Layers 1, чтобы увидеть разницу.
При его применении на маске слоя появится красный крестик.
Чтобы удалить красный крестик, удерживайте Shift и щелкните маску слоя 1.
Другой способ увидеть разницу — выбрать и отменить выбор уровня 1.
Этот аспект является наиболее важным для этого изображения.
Теперь удалите слой 1.
Обводка с помощью инструмента «Перо»
Инструмент «Перо» — важный способ настроить влияние эффекта размытия на изображение.
Для получения дополнительной информации о том, как использовать Pen Tool, перейдите на Phlearn.com и введите Pen Tool в строку поиска.
Нажмите P на клавиатуре, чтобы выбрать инструмент «Перо», или расположив панель инструментов в левой части рабочего пространства. Инструмент «Перо» на панели инструментов можно распознать по символу кончика пера, который находится рядом с символом типа или T.
Начните обводку нижнего левого угла платья невесты, щелкнув и перетащив инструмент «Перо».
Обводя объекты, поместите линию инструмента «Перо» немного на внутренней стороне объекта.
Это поможет избежать включения фона в объект при вырезании объекта и возвращении объектов в изображение.
Это действие может занять некоторое время.
Обрисовывая более мелкие области, сделайте столько пунктов, сколько необходимо, чтобы включить каждый раздел.
Достигая участков с большей кривой, используйте линии, расположенные дальше друг от друга.
Чтобы изменить направление линии инструмента «Перо», удерживайте нажатой клавишу ALT или OPTN на клавиатуре, и рядом с инструментом «Перо» появится небольшая стрелка.
Удерживая нажатой клавишу ALT или OPTN, щелкните и перетащите сплошную черную точку в нужном направлении.
Чтобы переместить точку, нажмите CMD или CTRL на клавиатуре, затем щелкните и перетащите черную точку в нужную область.
Эти точки можно переместить в любое время.
Создание выделения с помощью инструмента «Перо»
После создания контура пера вокруг невесты и жениха, продублируйте фоновый слой, перетащив его на логотип нового слоя в нижней части панели слоев.
Символ «Новый слой» можно узнать по квадрату со загнутым уголком, который находится рядом с корзиной для мусора.
Появится новый слой под названием «Фоновая копия».
Не снимая выделения с инструмента «Перо», наведите указатель мыши на выделенный объект и щелкните правой кнопкой мыши.
Выбрать «Сделать выбор…».
Появится окно «Сделать выбор».
Underneath Rending установите Радиус растушевки на 0,5 пикселя.
Должны быть выбраны как «Сглаживание», так и «Новое выделение».
После выбора всех параметров щелкните OK.
Теперь обратите внимание, что движущийся пунктирный контур заменил контур инструмента «Перо».
Применение выделения к маске слоя
Пока выбран фоновый слой-копия, добавьте новую маску слоя.
Теперь выделение, которое только что было сделано с помощью Pen Tool, теперь находится в маске слоя фоновой копии.
Белая часть маски слоя указывает то, что видно на фоновом слое, а черная часть маски слоя представляет то, что скрыто.
Маска слоя позволяет вносить изменения в выбранный слой без полного удаления информации.
Например, выберите инструмент «Перемещение», нажав V на клавиатуре или найдя самый первый элемент на панели инструментов, на котором есть четыре стрелки, указывающие в разных направлениях. Этот символ представляет инструмент «Перемещение».
Щелкните и перетащите объекты влево или вправо.
Обратите внимание, как есть копии предметов.
Чтобы приблизить изображение и рассмотреть его контур, нажмите Z на клавиатуре, чтобы выбрать инструмент «Масштаб».
Просто нажмите, чтобы увеличить, и ALT или OPTN, и нажмите, чтобы уменьшить.
При увеличении изображения обратите внимание на то, что могут быть некоторые пятна, особенно вокруг волос объекта, которые могли быть пропущены при рисовании с помощью инструмента «Перо».
Переместите объекты обратно в исходное место, нажав CMD или CTRL + Z, или перейдя в верхнюю часть рабочего пространства и нажав Edit, а затем Undo.
Отменив выбор фонового слоя на панели слоев, обратите внимание, что слой фоновой копии — это просто жених и невеста.
Переименовать слои
Переименуйте слой фоновой копии, дважды щелкнув имя слоя.
Переименование фоновой копии слоя в Subjects.
Переименуйте фоновый слой в «Исходный».
Щелкните и перетащите исходный слой к символу нового слоя в нижней части панели слоев, чтобы дублировать слой.
Переименуйте слой с исходной копией в «Размытие».
Новый слой Blur будет служить слоем с эффектом размытия.
Теперь слой Subjects должен быть вверху, слой Blur — в середине, а слой Original — внизу панели слоев.
Порядок слоев очень важен.
Точечная восстанавливающая кисть
Раньше, когда к исходному изображению добавлялся эффект размытия, вокруг объектов появлялся ореол. Инструмент «Точечная восстанавливающая кисть» — эффективный способ решить эту проблему.
Во-первых, необходимо удалить объекты со слоя Blur.
Отмените выбор видимости для слоя «Объекты», щелкнув глаз рядом со слоем.
Выберите слой Blur на панели слоев.
Найдите инструмент «Точечное заживление», который находится на панели инструментов в левой части рабочего пространства. Инструмент «Точечное исцеление» — четвертый инструмент на панели инструментов, его можно определить по символу в виде пластыря.
Щелкните и удерживайте указатель мыши на инструменте «Точечное заживление».
Когда появится боковая вкладка, выберите инструмент «Точечная восстанавливающая кисть».
Используя инструмент «Точечная восстанавливающая кисть», нарисуйте предметы, щелкая и перетаскивая мышь.
При рисовании нарисуйте немного дальше объекта, чтобы Photoshop мог извлечь информацию из фона и разместить эту информацию поверх объекта.
Нарисуйте объекты несколькими мазками.
Если размер кисти необходимо увеличить или уменьшить, нажмите [или] на клавиатуре, чтобы изменить размер кисти до желаемого размера.
Обратите внимание, как фон заменяет предметы.
Чтобы отменить действие, нажмите CMD или CTRL + Z на клавиатуре или перейдите в верхнюю часть рабочей области и нажмите «Изменить», а затем «Отменить».
Помните, что основное изображение будет размытым, поэтому изображение не обязательно должно быть идеальным.
После того, как объекты были нарисованы с помощью инструмента Spot Healing Tool, должен быть виден только фон.
Теперь слой Subjects будет содержать только объекты, слой Blur будет иметь только фон, а слой Original будет содержать исходное содержимое.
Слой скрытого размытия для смарт-объекта
Затем фоновый слой необходимо преобразовать в смарт-объект. Таким образом, применяемое размытие можно изменить в любой момент.
Сделайте слой Subjects видимым на панели слоев.
Выберите слой Blur и щелкните правой кнопкой мыши.
При щелчке правой кнопкой мыши появится боковая вкладка и выберите «Преобразовать в смарт-объект».
Слой Blur теперь является смарт-объектом, который идентифицируется маленьким бумажным логотипом на миниатюре слоя Blur.
Применение размытия при наклоне и сдвиге
Теперь нужно применить размытие к слою Blur.
Чтобы применить расширенное размытие, найдите верхнюю часть рабочего пространства и выберите «Фильтр».
На вкладке «Фильтр» выберите «Галерея размытия», а затем «Наклон-сдвиг»…
Размытие при сдвиге и наклоне позволяет изображение быть более размытым по мере удаления перспективы.
Обратите внимание, что рабочее пространство Tilt-Shift включает инструменты размытия, эффекты, эффекты движения и шум в правой части рабочего пространства.
Также обратите внимание на то, что поверх изображения есть централизованный круг, сплошная линия и пунктирная линия.
Это рабочее пространство позволяет настраивать размытие.
Щелкните и перетащите центральную точку круга Tilt-Shift в нижнюю часть фотографии.
Поместите внутренний круг в середину нижней строки изображения.
Щелкните и перетащите сплошную среднюю линию так, чтобы линии совпали с верхом платья невесты.
Теперь щелкните и перетащите верхнюю пунктирную линию к самой верхней строке изображения.
На панели инструментов размытия найдите раздел «Наклон-сдвиг».
Отрегулируйте ползунок «Размытие» на вкладке «Наклон-сдвиг» влево и вправо.
При перемещении ползунка вправо размытие усиливается, а при перемещении ползунка влево размытие уменьшается.
Для этого изображения установите Размытие на 208 пикселей.
Добавление постепенного размытия
В качестве примера попробуйте щелкнуть и перетащить сплошную среднюю линию вниз и обратите внимание, как размытие изменяется при перемещении средней линии.
Область между кругом и сплошной линией, которая является безопасной зоной, служит зоной незатронутого размытия, а сплошная линия до пунктирной линии действует как область, где применяется постепенное размытие.
Переместите верхнюю пунктирную линию вниз к сплошной линии.
При этом размытие становится больше сплошным размытием, чем постепенным размытием.
Установите Размытие на 106 пикселей.
Теперь разместите сплошную линию над локтем невесты и пунктирную линию вверху изображения.
Размытие теперь будет более реалистичным.
Применение зерна
Теперь, когда применено размытие, применение зернистости сделает изображение более реалистичным.
При добавлении размытия к изображению рекомендуется использовать зерно не менее 30% для более естественного вида.
Найдите вкладку «Шум» в правой части рабочего пространства размытия.
Установите для параметра «Шум» значение «Зерно» и установите флажок рядом с параметром «Зернистость».
Увеличьте масштаб, нажав Z на клавиатуре, чтобы заметить, как Photoshop применил зернистость к изображению.
Для этого изображения установите значение 20,90%, размер 5%, шероховатость 50%, цвет 0% и светлые участки 100%.
После установки параметров нажмите OK в верхней части рабочего пространства.
Теперь обратите внимание, как смарт-фильтры и Галерея размытия были добавлены к слою размытия на панели слоев.
Выберите и отмените выбор глаза рядом со слоем «Размытие», чтобы заметить различия в слое.
В слой «Размытие» можно внести изменения в любое время, дважды щелкнув фильтр «Галерея размытия», который находится под слоем размытия. Вот почему рекомендуется смарт-объект.
Измените режим наложения на Светлее
Следующий шаг — восстановить потерянные волосы вокруг головы объекта.
Скопируйте исходный слой, перетащив его на значок «Новый слой» в нижней части панели «Слои».
Переименуйте новый слой «Исходная копия» в «Детали волос».
Переместите слой с деталями волос в верхнюю часть панели слоев.
Небольшие волоски на невесте теперь будут видны, но обратите внимание, как маленькие волоски над головой невесты светлее фона.
Режим наложения «Осветлить» — полезный режим наложения, который сделает все темное невидимым, а светлые области — видимыми.
Найдите панель слоев в правой части рабочего пространства.
На панели «Слои» режим наложения для слоя «Детали волос» в настоящее время установлен на «Нормальный».
Измените режим наложения с Нормального на Светлее.
Восстановление волос объекта
Добавьте маску слоя к слою с деталями волос.
Маска слоя автоматически заполняется белым цветом.
Если черный установлен в качестве цвета переднего плана, нажмите CMD + Delete или CTRL + Backspace на клавиатуре, чтобы заполнить маску слоя для слоя 1 черным.
Нажмите D на клавиатуре, чтобы выбрать цвета переднего плана и фона по умолчанию.
Обратите внимание, что цвет переднего плана белый, а цвет фона черный.
Нажмите X на клавиатуре, чтобы изменить цвет переднего плана на черный.
Теперь нажмите CMD + Delete или CTRL + Backspace на клавиатуре.
Обратите внимание, что маска слоя «Детали волос» полностью черная.
Это означает, что слой не влияет на все изображение.
Нажмите B на клавиатуре, чтобы выбрать инструмент «Кисть».
В верхней части рабочей области убедитесь, что для параметра «Режим кисти» установлено значение «Нормальный», непрозрачность — 100%, а поток — 70%.
Так как маска слоя заполнена черным цветом, используйте белый цвет для рисования.
Переключитесь на белый цвет в качестве цвета переднего плана, нажав X на клавиатуре.
Когда рисуете белым, обратите внимание, как эффекты слоя теперь видны на изображении.
Теперь, используя инструмент «Кисть», щелкните мышью и перетащите указатель мыши на макушку головы невесты, где ранее появились небольшие волоски.
Чтобы увеличить или уменьшить кисть, используйте [или] на клавиатуре.
Когда белая краска наносится на жениха и невесту, становятся видны маленькие волоски.
Это позволяет получить более реалистичный эффект при сохранении размытого фона.
Сглаживание краев с помощью инструмента Blur Tool
Последний шаг — загладить края вокруг жениха и невесты.
Теперь установите черный цвет переднего плана, нажав X на клавиатуре.
Снимите выделение со слоя «Детали волос».
Удерживая Shift, нажимайте несколько раз на маске слоя «Предметы», чтобы заметить резкую линию вокруг левого плеча жениха.
При выборе и снятии выделения до и после маски слоя «Субъекты» на маске слоя появится красный крестик.
Проверьте, нет ли других заметных резких краев контура.
Чтобы исправить резкие края, отключите изображение и маску слоя для слоя «Объекты», щелкнув символ связи, который находится между изображением и маской слоя.
Это позволяет только редактировать маску слоя.
Найдите инструмент «Размытие» на панели инструментов в левой части рабочего пространства.
Символ инструмента «Размытие» можно узнать по форме капли дождя, которая расположена над инструментом «Перо».
Обратите внимание на то, как можно настроить инструмент «Размытие» в верхней части рабочего пространства.
Установите режим «Нормальный», «Интенсивность» на 100% и снимите флажок «Образец всех слоев».
Выбрав маску слоя Subjects, щелкните и перетащите кисть, чтобы размыть плечо жениха.
Чтобы просмотреть маску слоя, удерживайте ALT или OPTN и щелкните маску слоя «Субъекты».
Теперь маска слоя будет представлена на всем изображении.
Когда применяется инструмент «Размытие», обратите внимание, что это влияет только на маску слоя.
Пока присутствует маска слоя, проведите кистью вокруг острых или твердых краев.
Чтобы снова просмотреть и маску слоя «Субъекты», и слой, удерживайте нажатой клавишу ALT или OPTN и щелкните маску слоя «Субъекты».
По мере того, как к краям добавляется эффект размытия, обратите внимание на более реалистичный результат.
Поскольку люди на изображении немного не в фокусе, использование инструмента «Размытие» полезно, но если бы объект был немного не в фокусе с определенным краем, результаты не были бы такими реалистичными.
После того, как края жениха и невесты были размыты, выберите слой «Детали волос», чтобы все слои были видны.
Как удалить фон изображения в Photoshop — блог remove.bg
Photoshop — самый популярный и мощный редактор изображений.Это отраслевой стандарт для цифровых художников, который широко используется дизайнерами, фотографами и художниками для создания и совершенствования изображений. Когда вы знаете, как удалить фон с изображения в Photoshop, программа действительно вступает в свои права.
Благодаря опыту удаления фона, объекты в фотостудии могут быть размещены на фоне более вдохновляющих фонов; предприятия могут собирать листовки и брошюры из изображений людей, продуктов и графики; Любители могут составить поздравительные открытки и мемы, (например) вырезав знаменитостей и разместив их в удивительной обстановке.
Чтобы создать эти захватывающие визуальные эффекты, нам сначала нужно изолировать объект, который мы хотим поместить перед нашим новым фоном в программе Photoshop.
Прежде чем мы начнем, нам нужно задать себе пару вопросов. Ответы на них помогут определить лучший метод удаления фона.
- Четко ли выделяется объект на фоне? Итак, если ваш фон — дерево, а ваш объект одет в зеленое пальто, любой искусственный интеллект или инструмент для выбора цвета могут с трудом различить разницу.
- Есть ли «сложности» по краям вашего предмета? Например, есть ли у объекта беспорядочные волосы или он — если это объект — отражающий, поэтому его части становятся бледными. С другой стороны, создает ли фон нечеткие границы — например, воду.
В любом из этих случаев вам может быть лучше либо использовать инструмент «Карандаш», чтобы обвести края, либо использовать один из автоматических вариантов для начала, а затем настроить выделение с помощью множества встроенных инструментов Photoshop. например Background Eraser или удалить.плагин bg. Затем вы можете уточнить свой выбор, используя «Выделение» и «Маска».
Если вы хотите сделать это неразрушающим образом (т.е. вы не хотите вносить изменения непосредственно в свое изображение), вы можете изучить использование масок слоя, которые позволяют вам выбирать, какие части изображения скрыть фон в другом. слой ниже — или просвечивать.
Давайте посмотрим, как Photoshop может помочь нам удалить фон, оставив ваш объект нетронутым, а также рассмотрим умный плагин, который еще лучше справится с ролью ластика фона.
Мы перечислили их от самых простых до самых сложных и кратко коснемся уточнения вашего выбора внизу.
Готовы удалить фон в Photoshop? Пошли!
1.
Remove.bg Photoshop Plugin Плагинremove.bg для Photoshop — это самый быстрый способ отделить фон от объекта.
Как мы можем быть уверены? Вам нужно всего лишь нажать одну кнопку, и работа будет выполнена. Даже встроенные инструменты Photoshop потребуют от вас большего.
Плагин лучше программного обеспечения в выделении сложных элементов и краев, таких как волосы. Вы также можете использовать маску слоя для удаления или восстановления областей изображения, но вам все равно нужно нажать только одну кнопку.
remove.bg для PhotoshopДля начала загрузите расширение и введите свой ключ API. (Более подробные инструкции по установке см. На этой странице справки.)
После того, как вы установили remove.bg, вы найдете новый пункт меню, доступный из раскрывающегося меню.Перейдите в Расширения → Удалить фон. Это вызывает кнопку, которую вы можете нажать в любой момент, когда захотите удалить фон с текущего открытого изображения (или выделения) в Photoshop.
Имейте в виду, что изображение обрабатывается с помощью API remove.bg, поэтому вам потребуется активное подключение к Интернету и ключ API (который можно найти на панели управления вашей учетной записи).
Плагин remove.bg для Photoshop можно загрузить бесплатно. Вы также можете купить кредиты для обработки изображений — которые вы можете использовать во всех удалениях.продукты и интеграции bg.
Регистрация дает вам один бесплатный кредит и 50 бесплатных вызовов API для предварительного просмотра изображений (с более низким разрешением) каждый месяц.
Для получения дополнительной информации о ценах на remove.bg щелкните здесь.
2.
Инструмент удаления фона в PhotoshopЕсли вы не слишком озабочены получением четких краев объекта, вы можете попробовать встроенный в Photoshop инструмент «Удалить фон».
Довольно прост в использовании.
- Откройте ваше изображение.
- На правой панели «Слой» создайте новый слой. (кнопка +)
- Выберите фоновый слой и снимите выделение с остальных.
- Убедитесь, что панель развернута и вы видите раскрывающееся меню «Быстрые действия».
- В этом меню быстрых действий щелкните «Удалить фон».
Photoshop использует искусственный интеллект, чтобы в реальном времени определять, где падают края объекта и начало фона.
Инструмент работает лучше всего, когда есть четкая разница между выделением переднего плана и фоном. Если в пикселях будет слишком много общего, он запутается, и вы потратите часы на добавление и вычитание элементов.
После того, как вы выполнили первоначальный выбор, вы можете переключаться между добавлением к выделенному и вычитанием из выбора в меню.
Как использовать инструмент быстрого выбора
- Откройте изображение в Photoshop.
- Найдите инструмент «Быстрое выделение» в левом меню (Панель инструментов Photoshop). Его можно было разместить в Magic Wand Tool.
- Установите флажок «Авто-улучшение» на панели параметров, чтобы края выделения были более плавными и качественными.
- Нажмите кнопку и наведите указатель на область, которую вы хотите выбрать. Быстрый выбор найдет тона, соответствующие выбранному, до тех пор, пока не решит, что нашел край.
- Возможно, вы захотите добавить что-то к выбору.Если это так, просто щелкните и перетащите курсор в другую область.
- Если Инструмент проявил чрезмерный энтузиазм, вы можете вычесть из выбора. Для этого нажмите клавишу Option (macOS) или Alt (Windows) и перейдите к разделу, который нужно отменить.
- Или вы можете изменить инструмент для снятия выделения (минус) в строке меню, чтобы отменить выбор всего, на что вы наводите курсор.
Этот инструмент используется для удаления фона на изображениях с большим количеством мелких деталей между объектом и фоном.
Он работает, беря образец оттенка в центре кисти и выбирая пиксели того же или похожего цвета при перемещении мыши.
Как использовать инструмент «Ластик для фона»
- Откройте изображение в Photoshop.
- Найдите инструмент «Ластик для фона» на панели инструментов Photoshop. Он может быть скрыт в подменю «Ластик», поэтому нажмите и удерживайте его или нажмите E, чтобы выделить его.
- Убедитесь, что кисть подходящего размера.Вы можете использовать клавиши со скобками [и] или отрегулировать его в строке меню. Кисть большего размера работает быстрее, но вам нужна точность, если вы работаете в ограниченном пространстве. Вы также можете и должны увеличивать масштаб.
- Вы также хотите, чтобы кисть была красивой и жесткой на слайдере. Если у вас нечеткие края, вы оставите артефакты. Shift [и] уменьшит или увеличит жесткость.
- Установите пределы в меню, чтобы найти края.
- Поместите центр кисти поверх цвета, который вы хотите удалить, и щелкните.Вы избавитесь от любого подходящего оттенка в пределах вашего допуска (см. Ниже) и оставите позади другие цвета — например, этот.
- Допуск — это ширина рамки цвета, которую удаляет круг. Если вы собираетесь убрать эту траву из-за ног, вам понадобится высокая толерантность, потому что есть желтоватые стебли и коричневатые листья. Очевидно, если кто-то был в зеленых леггинсах, у вас могли быть проблемы. Начните с 25 и посмотрите, как у вас получится.
- Имейте в виду, что инструмент «Ластик для фона» сотрет любой цвет, совпадающий с его перекрестием, поэтому вам нужно оставить их на цвете фона.
- Фоновый ластик по умолчанию настроен на непрерывную выборку.
Это означает, что он удалит любой совпадающий цвет, на который попадает перекрестие. Если у вас много разных оттенков на вашем фоне, вам нужно будет продолжать выборку и удалять их. Однако, если у вас есть только один оттенок (или узкий диапазон оттенков), например голубое небо, вы можете изменить его на «Один раз».
В этом случае, даже если вы наведете указатель мыши на другой цвет, он будет отбирать и удалять только цвет, с которого вы начали.У вас меньше шансов удалить часть темы по ошибке.
- Если цвет фона слишком сильно совпадает с объектом, а объект постоянно стирается, вот еще одна хитрость. Щелкните «Защитить цвет переднего плана» (справа от меню «Инструменты»). Нажмите и удерживайте клавишу Alt (Win) / Option (Mac) и используйте всплывающий инструмент пипетки, чтобы выбрать оттенок, который вы хотите защитить от разрушения.
Инструмент «Карандаш» — самый далекий от искусственного интеллекта выбор, который вы можете получить без от руки.(От руки, конечно, можно использовать — в слое и маске — особенно если нечеткие края допустимы, например, светлое море на фоне светлого неба.)
В любом случае, Pen Tool позволяет рисовать вокруг области, используя комбинацию прямых линий и изгибающихся кривых. Вы можете переключаться между ними, наведя указатель мыши на узел и нажав клавишу Control / CTRL.
Поскольку этот инструмент настолько интуитивно понятен, довольно сложно описать, как им пользоваться, словами! Лучше всего посмотреть это видео от Phlearn, а затем нащупать свой путь к его использованию.Это довольно весело.
Вы хотите использовать инструмент «Перо» для создания контура (на дальнем конце панели слоев), а затем нажмите cmd / Ctrl + щелчок, чтобы превратить его в выделение.
Если вы работаете с выделением, вы можете немного увеличить размытие краев, потому что резкие края могут выглядеть неестественно, особенно на ярком фоне.
Уточнение выбораМы показали вам различные способы удаления фона изображения в Photoshop.
Вы, вероятно, уже обнаружили, что ни один способ не идеален (вы можете остаться с областями цвета между волосками, вы можете обнаружить, что части вашего объекта будут обрезаны).
К счастью, вы можете комбинировать методы, особенно если вы работаете с Paths, то есть вы можете изменять контур выделения по мере продвижения.
Вы можете выбрать объект с помощью инструмента «Быстрое выделение», а затем использовать инструмент «Ластик для фона», чтобы удалить цвета фона, оставленные этим методом.
Другой способ — сделать первоначальный выбор, а затем нажать кнопку «Выбрать и замаскировать».
Это вызовет совершенно новый набор параметров, которые позволят вам изменить края вашего выделения или изменить характер края (например, вы можете растушевать его, чтобы сделать его более мягким, или увеличить контраст, чтобы сделать его более жестким).
Вы узнаете некоторые инструменты из главного меню Photoshop.
Вот инструменты, меняющие грань сверху вниз:
- Quick Selection , о котором мы уже говорили.
2. Инструмент Refine Edge Brush Tool , с помощью которого Photoshop быстро выбирает между контрастными пикселями (например, пикселями с волосами и пикселями рядом с ними)
3. Инструмент «Кисть», , позволяющий рисовать прямо на выделенной области и добавлять к ней. (Не забудьте увеличить масштаб изображения и отрегулировать размер кисти с помощью клавиш [и].
4. Инструмент выбора объекта. Выберите этот вариант, и Photoshop попытается определить границы дискретных объектов или форм внутри маски.
5. Инструмент «Лассо» дает вам возможность создавать выделение от руки.
Как уже упоминалось, панель Properties справа дает вам возможность изменить характер краев.
Это относительно понятно. Поиграйте с ползунками, чтобы увидеть, что из этого получится!
Когда вы закончите изменять свой выбор, нажмите кнопку OK внизу справа.
Изучение того, как удалить фон изображения в Photoshop, открывает двери для множества новых творческих начинаний, таких как коллаж, дизайн сопроводительных материалов, поздравительные открытки и другие предметы, сделанные на заказ для вашей семьи и друзей.
Удаление фона может быть простым или сложным. В нашем руководстве вы найдете все необходимое для создания желаемых изображений, сочетая скорость и точность.
Надеемся, вам понравится путешествие!
Как удалить фон с волос в Photoshop CC18
Узнайте, как удалить фон со своих фотографий с помощью этого пошагового руководства по Photoshop, покрывая волосы на белом фоне и других задач для дизайнеров и фоторедакторов.
Кэти Томпсон
Для любого продавца электронной коммерции, фотографа или специалиста по маркетингу умение удалять фон с фотографий — это навык, который вы будете использовать бесчисленное количество раз. Это пошаговое руководство покажет вам, как удалить волосы с белого фона.
Одно из самых больших разочарований при редактировании изображений людей — это изменение фона за волосами, что может напрасно тратить время и испортить ваши изображения при неправильном выполнении.В этом уроке Photoshop вы узнаете, как удалить волосы с белого фона с помощью инструмента Background Eraser Tool . Когда вы научитесь стричь волосы в Photoshop CC18, вы сможете работать с любой фотографией или изображением.
Как удалить волосы с белого фона в Photoshop CC18
- Настройка слоев для редактирования волос на белом фоне
- Защитите исходный файл изображения
- Создание высококонтрастного фона
- Убрать фон вокруг волос
- Параметры уменьшения допуска для удаления низкоконтрастных фоновых областей
- Удалить остальной фон
- Заменить фон
Шаг 1. Настройте слои для редактирования волос на белом фоне
Убедитесь, что панель слоев открыта.Ваш экран должен выглядеть так:
Шаг 2. Защитите исходный файл изображения
Дублируйте исходный слой, а затем выключите его, чтобы можно было легко начать заново в случае ошибки. Щелкните правой кнопкой мыши фоновый слой на панели слоев и выберите Дублировать слой …
Затем щелкните значок глаза рядом с исходным слоем, чтобы отключить его.
Шаг 3. Создайте высококонтрастный фон
Теперь вам нужно добавить яркий цвет, чтобы было понятно, что именно вы редактируете.Вместо того, чтобы просто использовать белый фон и стирать по краям, вы можете использовать яркий цвет, который точно покажет, какие области вы начали вырезать. Это особенно хорошо работает, если исходный фон, с которым вы работаете, имеет светлый цвет.
После того, как вы полностью вырежете изображение и будете готовы поместить его на новый фон, вы можете избавиться от этого жирного цвета. Создайте новый слой, щелкнув значок страницы в нижней части панели слоев.
Используйте инструмент Paint Bucket , чтобы заполнить новый слой ярким цветом, щелкнув в любом месте холста, пока новый слой выбран.
Переместите новый цветной слой под дублированный слой с фотографией. Он исчезнет невооруженным глазом, но останется там, когда вы начнете редактировать фотографию. Просто перетащите его мышью.
Связано: Учебник Photoshop: Руководство по использованию слоев для новичков
Шаг 4. Удалите фон вокруг волос
Выберите Background Eraser Tool на панели инструментов.
Поскольку этот фон сплошной, вам необходимо использовать метод выборки Background Swatch и убедиться, что цвет фона установлен как можно ближе к основному цвету фона. В данном случае у нас сплошной белый цвет.
Убедитесь, что выбраны Непрерывный и Защитить цвет переднего плана . Параметр «Несмежный» не позволяет Photoshop смешивать цвет с передним планом, помогая вам держать два слоя разделенными, чтобы вы могли продолжить редактирование.
Однако это не всегда работает само по себе, поэтому, выбрав параметр «Защитить цвет переднего плана», Photoshop будет полностью разделять два слоя и следить за тем, чтобы вы случайно не удалили исходное изображение во время вырезания. фон.
Следующие настройки будут зависеть от вашего изображения. Начните с настроек кисти, которые вы видите выше, и измените их, если они не подходят для вашего примера.
Самая важная настройка здесь — Допуск .Это сообщит кисти порог контрастности того, что нужно удалить с вашего фона по сравнению с вашим передним планом. В этом примере, поскольку у мальчика светло-каштановые / светлые волосы, мы остановимся на 50%. Это должно удалить ровно достаточно белого цвета, оставив при этом волосы нетронутыми. Возможно, вам придется поэкспериментировать с этой настройкой, чтобы найти правильный баланс.
Используя кисть, аккуратно сотрите там, где линия роста волос встречается с фоном. Обратите внимание на просвечивающий красный фон — это слой под ним, который вы создали ранее.Также обратите внимание на шарф в этом примере — контраст здесь намного ниже, поэтому нам нужно сначала внести некоторые изменения в настройки кисти.
Шаг 5. Уменьшите настройки допуска, чтобы удалить низкоконтрастные области фона
Как видите, светлый шарф намного ближе к цвету фона, чем волосы, поэтому нам нужно уменьшить настройку Tolerance для компенсации. В этом случае 5% работает хорошо. Мы также уменьшили размер кисти до 30, чтобы дать нам больше контроля над областью, которую мы редактируем.
Увеличьте более мелкие детали и аккуратно сотрите вокруг них, используя новые настройки. Главное — найти баланс между размером кисти и допуском для разных областей изображения.
Шаг 6: Удалите остальной фон
Теперь, когда более мелкая работа закончена, мы можем снова приступить к удалению оставшейся части белого с 50% допуском и кистью большего размера.
Шаг 7: Заменить фон
Теперь, когда тяжелая работа завершена, файл готов, и вы можете заменить красный фон чем-то более полезным.
Как улучшить края в Photoshop CC18?
Вы можете использовать инструмент «Уточнить края», чтобы сэкономить время при изменении фона на изображениях с множеством тонких краев, таких как волосы или облака в небе.
Связанный: Как изменить цвет неба в Photoshop CC18
Вместо того, чтобы вырезать каждую отдельную часть, Photoshop оценит разницу в цветах и нарисует приблизительный контур, основанный на том, что он считает фоном и передним планом.
Для руководства по удалению волос с белого фона выше мы использовали параметр Tolerance Setting и Background Eraser Tool , потому что мы хотели вручную установить, сколько цвета мы хотели бы иметь возможность редактировать, а не позволять Photoshop определять разница в цветах. Инструмент Refine Tool особенно хорошо подходит для снимков природы (например, листьев на фоне неба).
Где находится инструмент «Уточнить край» в Photoshop CC18?
Чтобы найти инструмент Refine Edge Tool в Photoshop CC18, удерживайте CTRL + ALT + R (CMD + OPT + R на Mac).Или перейдите в меню Select и нажмите Refine Edge , чтобы открыть панель инструментов.
Хотите сэкономить время? Передайте задачи по удалению фона на аутсорсинг специалистам Photoshop в Clipping Path India.
Кэти Томпсон
Кэти — писатель-фрилансер и подготовленный журналист с тонким чутьем в дизайне.Помимо работы в Clipping Path India, она пишет о тенденциях в области журналистики, цифрового маркетинга и дизайна электронной коммерции.
.