Красивый задний фон (65 фото)

Красивые текстуры

Красивый темный фон для фотошопа

Текстура на задний фон

Красивый задний фон

Картинки абстрактные фоны

Фон для фотошопа

Современный фон

Сиреневый фон

Красивый фон для обложки

Бирюзовый неон

Винтажные обои

Стильный фон для баннера

Кирпичный фон

Фон на задний план

Красивые тона

Необычный фон для фотошопа

Фон для шапки

Фон для баннера

Цветочный фон

Яркие текстуры

Красивый фон для фотошопа

Фон для шапки

Красивый фон на задний план

Фоновый узор

Красивый фон на задний план

Студийный фон

Приятный фон

Приятный фон

Темно синий фон

Красивый фон для фотошопа

Тёмно синий фон

Задний фон

Цветовой фон

Яркий фон HD

Боке сердечки

Интересный фон

Фон текстура

Красивый градиент

Богатый фон

Красивые фиолетовые обои

Крутой фон

Стильный фон

Коричневый фон с узорами

Фон для заднего фона

Красивый зеленый фон

Фон текстура

Фон красивый для фотошопа необычный

Абстрактный фон

Стильный фон

Синий градиент

Фон горизонтальный

Красивый фон для фотошопа

Разноцветный фон

Эффектный фон

Очень красивый фон

Стильный фон

Задний фон

Задний фон

Красивый задний план

Кирпичная стена фон

Красивый задний план для фотошопа

Текстуры красивые однотонные

Фон узоры

Текстуры для фотошопа красивые

Зеленая абстракция

Как удалить фон в Adobe Photoshop при помощи Color Range

Многим пользователям Photoshop, как продвинутым, так и начинающим, при обработке фотографий приходится сталкиваться с таким необходимым действием, как удаление фона. Это может потребоваться для совмещения фотографий либо вырезки объекта из фотографии для перемещения на другую. Поэтому помещать объекты в слои, путём удаления фона не совсем удобно. Удалённый фон теряется безвозвратно, а зачастую требуется его вернуть. Чтобы избежать подобного эффекта, используется одна из многочисленных масок – а именно, маска слоя.

1. Создайте прозрачный фон и маску слоя

Это, по сути, прикрепленный к слою канал, из чего следует, что канал у слоя может быть единственным. Цветовой тон маски определяет маскируемые части фона – чёрная маска превратит все точки, расположенные ниже неё прозрачными и наоборот – белая будет оставлять пикселы видимыми. Ключевым моментом является именно цвет маски и здесь основная идея в том, что точки, которые приобрели прозрачность, сохраняются. Редактируя свойства, их можно вернуть назад в область видимости. Предустановленные свойства маски слоя раскрывают поистине широчайшие её возможности. Reveal selection – воспроизводит маску слоя поверх заранее выделенной области, с залитым белым выделением и чёрным за пределами выделения. Такая комбинаторность позволяет сделать видимым именно выделение. Reveal all – всё будет видимо, до тех пор, пока не будет произведена заливка области чёрным. Hide all – буквально скрыть всё, что возможно.

2. Выберите Select/Color Range

3. Кликните пипеткой по тому цвету, который вы хотите вырезать с фотографии. Используя Fuzziness, расширьте, или наоборот уменьшите диапазон цвета.

4. На данном снимке мы вырезаем человека, снятого на хромакее (зеленый фон). Нажмете клавишу OK  и выберите слой маски

5. Теперь вам просто нужно нажать клавишу Delete. При этом удаленная область на фотографии будет выделена черный цветом.

6. Что бы отредактировать края маски, вам нужно ван нужно перейти во вкладку Properties и нажать MaskEdge (Края маски). При помощи окна Refine Mask, отрегулируйте края маски.

Для слоя характерна полная невидимость, а проявить области можно заливкой белым цветом. Hide selection – аналогично предыдущему, с точностью до наоборот. Выделение в результате невидимо, в то время как видимо всё остальное. Интересной особенностью маски слоя является возможность её редактирования, как и обычной маски. Достаточно выделить маску в слое, кликнув по ней с зажатой клавишей ALT – и появится возможность ещё масштабирования, путём добавления чёрной области в нужных местах. Серые же полутона в данном случае будут приводить к полупрозрачности пикселей. Удаление маски слоя также не представляет проблемы, выполняется с помощью опции Delete layer mask при клике на миниатюре слоя-маски. Удаление может быть произведено применительно к слою или без применения. В первом случае, при ответе apply после удаления маска будет применена к слою. Это удалит и объекты, которые были маскированы. Во втором случае, при ответе discard, маска к слою при удалении не будет применена и вся графика в слое сохранится.

Как размыть задний фон в фотошопе. Подробный урок

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

И так давайте делать все по-порядку.

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

Подробный урок — Как размыть задний фон в фотошопе

1. Скачиваем фотографию себе на компьютер и открываем в фотошопе Файл→Открыть (File→Open или CTRL+N – в скобочках вместе с переводом буду указывать сокращения – проще говоря “горячие” клавиши, которые позволяют экономить время в программе фотошоп).

Универсальный редактор для фотографий

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

2. Фотография имеет большой размер, давайте немного его уменьшим (что бы помещалась на экране, этот шаг можно пропустить), идем в меню Изображение→Размер изображения (Image→Image Size… или Alt+Ctrl+I) и уменьшаем размер нашей фотографии, я сделал по ширине 500 пикселей, по высоте программа автоматически сделала 750 пикселей, далее нажимаем ОК.

3. Давайте поставим 100% масштаб для фотографии, для этого два раз кликаем левой кнопкой мыши по инструменту 

 Масштаб (Zoom или Z).

4. После этого идем в меню Окно (Windows) и выбираем палитру Слои (Layers или F7). Открывается палитра для работы со слоями в фотошопе.

Выбираем наш слой, сейчас он единственный в документе, кликаем по нему правой кнопкой мыши и выбираем пункт Создать дубликать слоя (Dublicate Layer…).

Создается копия слоя (слои полностью идентичный начальному). Назовем его Копия и нажимаем ОК.

4. Теперь перейдем к созданию размытия на фотографии. Идем в меню Фильтр (Filter) и выбираем команду Размытие (Blur, как видите способов размытие несколько, мы выберем пункт Размытие по Гауссу, Gaussian Blur).

Я выбрал значение 3 пикселя.

В итоге у меня получилось так.

И так фон мы с вами размыли (надесь тут все понятно и у вас больше не будет вопросов как сделать размытый фон в фотошопе), осталось сделать четкой нашу невесту на переднем плане. Для этого идем в палитру Слои (Layers, F7), выбираем наш размытый слой и кликаем по кнопочке Добавить слой-маску (Add Layer Mask).

На слой добавляется маска.

Вкратце расскажу, как работают маски в фотошопе, рисуя по маске черным цветом мы удаляем (как бы протираем) содержимое слоя, рисуя по маске белым цветом мы восстанавливаем содержимое слоя.

Вернемся к нашему примеру. Берем инструмент 

 Кисть (Brush, B), ставим для нее цвет переднего фона: #000000 — черный (в палитре с инструментами внизу 2 квадратика – первый цвет переднего фона, второй – заднего фона) и нажимаем ОК.

После этого выбираем наш размытый слой, выбираем пиктограмму маски в палитре слоев.

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

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

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

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

Я взял кисть с жесткостью в 20% и порисовал ей в области лица девушки и вот что у меня получилось:

И если внимательно посмотреть на пиктограмму маски, можно увидеть черные пятна в тех местах, где мы рисовали кистью.

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

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

Как видите размыть фон на фотографии в фотошопе совсем не трудно (немного потренировавшись в этом, вы будите выполнять такие операции на автомате).

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

Простой, изящный, стильный эффект для текста

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

Пишем текст

Приступим к написанию текста. Вы можете попробовать использовать различные шрифты, я применил Arial, который поставляется в комплекте с Windows.

Выбираем инструмент «Текст», через вкладку «Окно» открываем палитру «Символ» и вводим следующие параметры:

Теперь вводим текст. Я скромно написал название моего сайта:

Добавляем стили слоя

Теперь следует применить к надписи стили слоя. Я использовал «Тень», «Тиснение» и «Наложение градиента» со следующими настройками:

    

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

Добавляем блеск и штрихи

Начните с дублирования слоя с текстом (Ctrl+J), затем, с помощью «Свободного трансформирования» (Ctrl+T) немного увеличьте размер текста нового слоя (предварительно зажав клавиши Shift+Alt) и поверните его немного по часовой стрелке:

После поворота и изменения размера дубликат, создайте новый слой и объедините их вместе (выделите дубликат слоя и пустой слой и нажмите Ctrl+E). После выполнения этого, к полученному слою примените Размытие по Гауссу с радиусом 1,5.

Вы должны получить что-то вроде этого:

После этого измените непрозрачность нового слоя до 30%.

Результат:

Добавляем глянцевый блеск к тексту

И, наконец, добавим своего рода глянцевый блеск на текстовый слой. Зажмите клавишу Ctrl и кликните по иконке текстового слоя в палитре слоёв:

Над текстовым слоем создайте новый слой и протащите из центра текста радиальный чёрно-белый градиент:

Нажмите Ctrl+D для снятия выделения.

Возьмите инструмент «Перо» (Pen Tool) и создайте примерно такой контур:

Кликните правой клавишей мыши в любом месте контура, выберите «Выделенная область» (Make Selection), и преобразуйте контур в выделенную область. Нажмите клавишу Delete для удаления пикселей в выделенной области.

Меняем режим наложения этого слоя на «Экран» (Screen) и уменьшаем его непрозрачность до 64%, вот, собственно и всё, мы закончили. Результат:

Создать фон в стиле студии в фотошопе

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

Для моего «продукта» я использую фотографию неописанного медиаплеера, который я скачал бесплатно, здесь из Stock Xchng . Спасибо Пзадо .

1. Создайте новый документ Photoshop. Для этого примера установите его на 800 x 600 пикселей с разрешением 72ppi.

2. Заполните весь документ черным цветом, нажав D, чтобы установить основной цвет на черный, а затем нажмите Alt + Backspace (окна) или Option + Delete (Mac).

3. Выберите инструмент Elliptical Marquee на панели инструментов и нарисуйте круглую область. Удерживайте Shift, чтобы при перетаскивании удерживать его в идеальном круге. Заполните круг белым. Нажмите Ctrl + D (окна) или Cmd + D (Mac), чтобы отменить выбор круга.

4. Выберите «Фильтр»> «Размытие»> «Размытие по Гауссу» и установите радиус около 90–100 пикселей, чтобы жесткий край круга был полностью удален, и вы получите что-то подобное.

5. Выберите инструмент «Прямоугольная область» и перетащите выделение, которое охватывает примерно две нижние две трети документа.

6. Нажмите Ctrl + J (windows) или Cmd + J (Mac), чтобы создать дубликат выделения и поместить его на собственный слой.

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

8. Нам нужен некоторый контраст между двумя слоями. Убедитесь, что выбран верхний слой, и выберите «Изображение»> «Коррекция»> «Уровни». Перетащите средний ползунок вправо, чтобы затемнить этот слой. Нажмите ОК. Нажмите Ctrl + E (windows) или Cmd + E (Mac), чтобы объединить два файла.

9. Теперь, чтобы добавить немного цвета. Этот эффект фона выглядит хорошо во многих цветах, но темный синий и зеленый цвета выглядят очень стильно. Выберите «Изображение»> «Коррекция»> «Вариации». Диалоговое окно вариантов позволяет увидеть, как ваше изображение будет выглядеть в различных оттенках. Нажмите на более голубой предварительный просмотр. Это добавляет больше голубого на все изображения предварительного просмотра.

В верхней части экрана вы можете увидеть ваш оригинальный и текущий выбор. Нажмите More Cyan еще раз, чтобы ваш Current Pick выглядел примерно так. Затем нажмите ОК.

10. Хорошо, теперь мы готовы разместить наш продукт. Откройте изображение медиа-плеера, который вы скачали с Stock Xchng. Это изображение намного больше, чем фон, который мы создали, поэтому мы должны принять это во внимание в следующих шагах. Я использовал инструмент «Перо», чтобы сделать выбор вокруг игрока, но вы можете использовать любой инструмент выбора, который хотите, просто убедитесь, что вы не включили белый фон в свой выбор. Если вы хотите использовать свой собственный продукт, сфотографируйте его на белом фоне.

11. Сделав выделение, нажмите Ctrl + C / Cmd + C, чтобы скопировать выделение. Перейдите к фоновому изображению, а затем вставьте в динамик, нажав Ctrl + V / Cmd + V. Как уже упоминалось, медиаплеер будет казаться огромным по сравнению с фоном. Нажмите Ctrl + T / Cmd + T, чтобы выполнить произвольное преобразование. Если вы не видите маркеры Free Transform, просто нажмите Ctrl + 0 / Cmd + 0, чтобы соответствовать
изображение и ручки на экран.

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

12. Чтобы создать отражение, продублируйте слой медиаплеера. Нажмите Ctrl + T / Cmd + T, чтобы снова вызвать маркеры Free Transform, затем щелкните правой кнопкой мыши или Control Control внутри ограничительной рамки. В раскрывающемся меню выберите «Отразить по вертикали». Перетащите перевернутое изображение прямо вниз, пока край плеера не коснется отраженного края, чтобы вы получили что-то вроде этого.

13. Чтобы улучшить отражение, уменьшите непрозрачность этого слоя до 10-20%. Помните, что это довольно стилизованная часть, поэтому она должна выглядеть полу-реалистично, но она не будет выглядеть на 100% реальной.

14. Перетащите слой отражения под слой медиаплеера.

15. Теперь, чтобы сделать отражение более достоверным, мы добавим маску слоя. Убедитесь, что ваш отраженный слой выбран в палитре слоев, затем щелкните значок «Добавить маску слоя» в нижней части палитры слоев. Белая миниатюра появляется на слое. Нажмите на изображение, чтобы выбрать его. Теперь выберите инструмент «Градиент» и выберите градиент от переднего плана к фону.

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

16. Теперь мы немного затемним все изображение. Это уменьшает размер свечения, но в целом выглядит более драматично. Выберите «Изображение»> «Коррекция»> «Уровни» и перетащите средний ползунок вправо.

Ваше изображение должно теперь выглядеть так:

Как последний штрих я добавил текст. Используемый здесь шрифт Century Gothic выделен жирным шрифтом для заголовка и обычным для остальной части текста.

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

Создаем в фотошопе стильный винтажный логотип с завитушками | DesigNonstop

Создаем в фотошопе стильный винтажный логотип с завитушками

25

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

Шаг 1.
Создаем в фотошопе новый документ, заливаем его черным цветом.

Шаг 2.
Воспользуемся подходящей винтажной текстурой из этого набора. Я воспользовалась винтажной текстурой N15. Вставляем ее в основной документ, масштабируем и снижаем прозрачность слоя до 30%.

Шаг 3.
На новом слое создаем прямоугольник, заливаем его цветом #fff962.

Шаг 4.
На новом слое создаем белый круг.

Шаг 5.
К созданному кругу применим стиль слоя «Обводка» (Stroke). Тип обводки — градиент, положение — внутри, размер — 10 пикселей.

Шаг 6.
Так выглядит градиент при ближайшем рассмотрении. Цвет желтого все тот же — #fff962. Вторая половина градиента — черная.

Шаг 7.
Получили такой результат.

Шаг 8.
На новом слое создаем черный прямоугольник.

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

Шаг 10.
Теперь к черному прямоугольнику применим стиль слоя «Обводка» (Stroke). Тип обводки — градиент, положение — внутри, размер — 5 пикселей.

Шаг 11.
Так выглядит градиент при ближайшем рассмотрении. Цвет желтого — #fdf886. Вторая половина градиента — черная.

Шаг 12.

Получили такой результат.

Шаг 13.
Воспользуемся щрифтом Storybook и напишем какое-нибудь слово, в данном случае DesigNonstop. Размер шрифта 28 пикселей, а масштаб по вертикали — 120%.

Шаг 14.
На белых участках круга напишем текст, например BLOG и 2009 — дата создания DesigNonstop. Шрифт Tahoma, размер 11 пикселей, цвет черный.

Шаг 15.
Теперь желтым цветом #fff962 напишем слово DESIGN. Обратите внимание, что масштаб шрифта по вертикали — 250%, а по горизонтали — 90%.

Шаг 16.
Теперь деформируем текст. Для этого щелкнуть правой кнопкой мыши по слою с текстом и выбрать пункт «Деформировать текст» (Warp Text). Настройки как на рисунке ниже. Стиль «Дугой снизу».

Шаг 17.
Получился такой результат.

Шаг 18.
Украсим текст двумя желтыми кружочками по бокам.

Шаг 19.
Теперь украсим композицию завитушками. Здесь подойдут любые завитушки, имеющиеся у вас в наличии. Например хорошо подойдут завитушки N13 из этого набора кистей. А для того, чтобы сделать второй элемент, можно напечатать подряд пять скобок и с помощью «Деформации текста» (Warp Text) , регулируя параметр «Искажение по горизонтали», можно создать такой элемент.

Шаг 20.
После этого симметрично копируем эти два элемента на другую стороку композиции.

Шаг 21.
Теперь ответственный шаг. Складываем все созданные нами слои с элементами в одну группу (кроме винтажной подложки и черного фона из Шага 1 и 2), а потом делаем дубликат всей группы. Находясь на созданном дубликате, нажимаем правую кнопку мыши и выбираем пункт «Объединить группу» (Merge Group). А после этого к получившемуся слою применим стиль слоя «Обводка» (Stroke), красного цвета для наглядности и размером 8 пикселей. После этого опять нажимаем правую кнопку мыши и нажимаем «Сгруппировать в новый смарт-объект» (Group into new smart object). После этого перетаскиваем слой вниз, над слоем с винтажным фоном.

Шаг 22.
Теперь применим к созданному в предыдущем шаге красному слою стиль слоя «Наложение цвета» (Color Overlay), цвет черный.

Шаг 23.
После этого стиль слоя «Обводка» (Stroke), цвет #494949.

Шаг 24.
После этого стиль слоя «Внутреннее свечение» (Inner Glow), цвет белый.

Финал
В итоге мы плучили такой вот винтажный логотип.

Как залить в фотошопе прозрачный фон

Как можно легко сделать прозрачный фон картинки в фотошопе разными методами?

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

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

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

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

Содержание статьи

• 1 Создание нового документа
• 2 Волшебная палочка
• 3 Ластик

Создание нового документа

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

Волшебная палочка

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

1. Выберите инструмент «Волшебная палочка» и поставьте допуск 50.
2. Теперь тыкните один раз левой кнопкой мышки по любому месту фона. У вас должна будет выделиться либо огромная часть фона, либо весь бэкграунд целиком. Это зависит от препятствий. 
3. Если у вас остался промежуток между ног и между рук, то нужно выделить и остальные пробелы. Но  если мы нажмем в другое место, то сбросится наше выделение. А что тогда делать? Это элементарно. Просто остальные части нужно выделять с зажатой клавишей SHIFT.
4. Теперь, когда у нас всё выделено, нам что нужно сделать? Нам необходимо инвертировать выделение. Для этого нажмите комбинацию клавиш SHIFT+CTRL+I. Теперь пунктирная линия будет окутывать только саму мартышку. Вот этого-то мы и добивались. 
5. Ну а дальше нажмите комбинацию клавиш CTRL+J и вы увидите, что обезьяна скопировалась на новый слой, но теперь с прозрачным задним планом. И если вы хотите, то можете удалить главный слой и работать уже с мартыхой без фона. 

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

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

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

Ластик

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

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

Конечно есть способ и попроще, а именно инструмент «Фоновый ластик». Единственное, лучше, чтобы фон и элемент достаточно отличались друг от друга по цвету и насыщенности. Поэтому я взял фотографию тигра, который прыгает на фоне неба. Отличный вариант.

1. Выберите «Фоновый ластик». Для этого нажмите правой кнопкой мыши на «Ластик» в панели инструментов. Нашли? Отлично. Здесь допуск можно поставить побольше, так как пиксели сильно отличаются друг от друга. В общем остановимся на числе 50.
2. Теперь выберите размер стёрки. Ну в общем нажимаем правой кнопкой мыши на рабочем пространстве и там уже ставим жесткость (давайте 85 процентов) и размер (Ну тут я выбрал 200). 
3. А дальше просто начинаем стирать весь фон, не боясь задеть тигра. Он будет стирать только те пиксели (и похожие на них), на которые вы нажали, чтобы начать стирать. В тех местах, где небо более светлое, у вас может ничего не стереться, так как пиксели уже совершенно другого оттенка, поэтому почаще меняйте точку отсчета. 

Ну и заодно про еще одну стерку не забуду. В той же самой группе инструментов выберите «Волшебный ластик». Опять же смотрим на допуск. При такой композиции можно поставить высокий уровень допуска, даже 80-90.

Теперь нам нужно просто один раз нажать на небо. Видите, что получилось? Нам уже ничего не надо стирать. Большинство неба сбрилось благодаря одному нажатию.

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

Ну? Не красота ли? Всё. Теперь его можно использовать для каких-либо коллажей или других видов изображений. Можете даже сделать так, как будто он пытается на вас напасть))). Ну это уже как ваша фантазия вам подскажет.

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

Ну а на этом я с вами прощаюсь. Надеюсь, что мой сегодняшний урок вам понравился и был для вас полезен. Не забывайте подписываться на обновления блога и делиться с друзьями в социальных сетях. А вас я жду в своих других статьях. Кстати, про конкурс не забыли? Через неделю уже объявлю результаты. Так что спешим! Ну а вам я желаю успехов. Пока-пока!

С уважением, Дмитрий Костин.

Заливка фонового слоя в Фотошопе

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

Заливка фонового слоя

Вызвать функцию заливки фонового слоя можно двумя способами.

Скачать последнюю версию Photoshop

1. Перейти в меню «Редактирование – Выполнить заливку».

2. Нажать сочетание клавиш SHIFT+F5 на клавиатуре.

В обоих случаях открывается окно настроек заливки.

Настройки заливки

1. Цвет.

   Фон можно залить Основным или Фоновым цветом,

   либо настроить цвет непосредственно в окне заливки.

2. Узор.

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

Ручная заливка

Ручная заливка фона производится инструментами «Заливка» и «Градиент».

1. Инструмент «Заливка».

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

2. Инструмент «Градиент».

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

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

Урок: Как сделать градиент в Фотошопе

После настройки инструмента необходимо зажать ЛКМ и протянуть появившуюся направляющую по холсту.

Заливка части фонового слоя

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

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

Помогла ли вам эта статья?

ДА НЕТ

Как сделать прозрачный фон в фотошопе — Техника и интернет

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

Зачем вообще нужен прозрачный фон?

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

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

Надеюсь, теперь все понимают суть. И мы переходим к делу!

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

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

Три способа удалить фон в фотошопе

1 способ сделать прозрачный фон: 

1. Открываем графический редактор Photoshop и посредством зажатия левой кнопки мыши переносим изображение полянки. Пример того, что получится есть выше. Открыть «полянку» можно еще так: Файл — Открыть.
2. Теперь проделываем тоже самое с солнышком.
3. Справа нажмите по предпоследнему вертикальному разделу «Слои». Среди «Свойства», «Операции», «Слои», «История»  выбирете СЛОИ. Затем двойным щелчком кликните по фону или замку. 
4. Откроется окно, в котором необходимо прописать имя слоя и нажать кнопку «Ок».
5. Убедитесь, что замка больше нет и выберите инструмент «Волшебная палочка». Найти его можно в левом вертикальном меню в инструменте «Быстрое выделение». Нажмите на быстрое выделение правой кнопкой мыши и выберите волшебную палочку. 
6. Кликните левой кнопкой мыши по белому фону. Когда фон выделится пунктирной границей нажмите удалить «Delete»:

Все, фон исчез. Надеюсь все было понятно.

2 способ, как сделать фон прозрачным:

1. Переходим сразу к делу. Фотографии загружаем также как и в первом способе создания прозрачного фона. Будем удалять фон, используя инструмент «Магнитное лассо». Располагается лассо в левом вертикальном меню.
2. Лассо используется за место волшебной палочки в том случае, если картинка, которую необходимо обвести. слишком сложная, то есть изображение имеет большое количество маленьких деталей, которые нельзя упускать. Работать с магнитным лассо достаточно просто: нажмите левой кнопкой мыши по границе обвода и продолжайте вести мышь вдоль необходимой линии. Линия сама будет притягиваться к контуру:
3. Теперь выбираем в горизонтальном меню «Выделение» => «Инверсия». Солнышко примет следующий уже знакомый вид. Далее жмите Delete. И снова мы получаем следующее:

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

3 способ, как убрать фон в фотошопе

1. Убрать фон в фотошопе при помощи инструмента быстрая маска. Маска находится внизу в левом вертикальном меню:

2. После нажатия на быструю маску выберите «Кисть» и зарисовывайте объект (не фон), солнышко, в нашем случае. При этом не затрагивайте фон.

Используйте различные размеры кисти для закраски. Для этого воспользуйтесь вторым горизонтальным меню. Подробнее на скрине:3. После того, как солнце полностью закрашено, снова нажмите на быструю маску. Затем кнопку Delete, чтобы удалить всё вокруг объекта.   

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

Теперь вы знаете , как в фотошопе сделать прозрачный фон. Перейдем к решению другой задаче. А именно к сохранению  прозрачного фона. Часто пользователи удачно выполняют удаление фона, но вот сохранить изображение в таком виде им не удается. У вас такая же проблема? Тогда читайте далее!

Как сохранить изображение с прозрачным фоном

Сразу отмечу важный момент. Может быть только этих слов будет вполне достаточно для решения вашей проблемы. Если сохранить изображение в формате JEPG, то прозрачный фон исчезает, останется прежний белый цвет. Требуется сохранять в форматах PNG или GIF. Статьи по теме:

• Как написать текст на картинке
• Как уменьшить размер изображения

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

1. Нажмите «Файл» => «Сохранить как»:
2. Откроется окно сохранения. В строке «Имя файла:» пропишите название (придумайте), выберите тип файла «PNG». Затем кликаем по кнопке «Сохранить»:

Ну вот и все. Теперь, если мы вставим солнце на полянку, то картинка примет привлекательный внешний вид: 

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

Интересные записи:

Как залить фон в Фотошопе: быстро и самостоятельно

Доброго времени суток, уважаемые читатели моего блога. Фон – один из самых важных элементов картинки. Благодаря ему можно даже самую неважную фотку превратить в стильную и современную. Сделать это нетрудно даже для новичка, обладающего минимальными знаниями программы Photoshop.

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

Приступим?

Инструмент «Заливка»

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

Создайте новый документ через меню «Файл» — «Создать».

В Фотошопе некоторые инструменты располагаются на одной и той же кнопке. Как, например, «Градиент» и «Заливка». Чтобы открыть дополнительное меню, нужно просто на несколько секунд зажать левую кнопку мыши, оно откроется и вы сможете выбрать то, что вам нужно.

Так как я пользуюсь самой последней версией Photoshop CC, то у меня еще есть «Выбор 3D-материала». Сказать честно, я этой функцией никогда не пользовался.

Если вы хотите залить документ одним цветом, то вам понадобится обычная «Заливка».

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

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

Щелкните по верхнему цвету левой кнопкой мыши и у вас откроется дополнительное окно выбора. Сначала в полосе справа вы выбираете основной цвет, а в квадрате слева определяетесь с оттенком. Затем жмете «Ок», чтобы применить изменения.

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

Применение фильтров

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

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

Выберите «Шум», а затем «Добавить шум».

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

Вот такой результат у меня получился. Для некоторых цветов я применяю еще и фильтр «Размытие» — «Размытие по Гауссу», но в случае с фиолетовым это лишнее. А вот вам может пригодиться. Попробуйте сделать это самостоятельно.

Полезный совет для новичков

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

Откройте «Окно», поставьте галочку напротив «История» и поместите ее в нижнюю панель справа.

Теперь, чтобы вернуться к началу мне просто нужно нажать на «Новый» и уберутся все цвета и шумы. Можно начинать сначала

Инструмент «Градиент»

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

Для начала откроем инструмент «Градиент», который находится на той же кнопке, что и «Заливка».

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

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

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

Я, например, нашел 10 000 шаблонов. Вес файла всего 0,3 Мб. Жму на «Скачать и жду когда архив загрузится.

После закачивания открываю при помощи программы WinRAR. И перетаскиваю файл GDR в заранее подготовленную папку.

Возвращаюсь в Фотошоп. После того как я выбрал среди инструментов «Градиент», нахожу на верхней панели эскиз с цветом, в моем случае красно-черным. Открывается дополнительное меню. Здесь нажимаю на гайку в правом верхнем углу.

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

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

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

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

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

 «Узоры»

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

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

Снова выберите инструмент «Заливка».

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

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

Один щелчок по фону и узор расположится на рисунке.

Готовые картинки

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

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

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

Ну вот почти и все.

Видео инструкция

После того как я написал статью, я подумал, что некоторым из вас могут быть интересны коллажи. То есть у вас есть какая-то основа, а сверху вы добавите картинку, в качестве фона. При создании ролика я сразу поставил в центр изображения объект. В данном случае страница товара с АлиЭкспресс — Телескоп для телефона.

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

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

Если вам понравилась эта статья – подписывайтесь на рассылку и узнавайте о фотошопе больше. Ну а если вам хочется научиться работать с программой профессионально и знать все о ее инструментах и возможностях, могу посоветовать видео курс «Фотошоп с нуля в видео формате».

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

Ну вот и все. До новых встреч и удачи.

Стильное размытие фона в фотографии в Photoshop, приемы размытия поля

Размытие фона фотографии — отличный способ уменьшить беспорядок на фотографии, а также имитировать объектив с большим отверстием диафрагмы. Это добавляет небольшую глубину резкости и размывает фон. Это также обычно называется боке. Ранее я создавал простые уроки о том, как размыть фон фотографии в Photoshop, а также о том, как добавить размытие боке к фотографии. Мы не будем повторять их здесь, а создадим творческое размытие фона, используя два разных вида размытия, а один инструмент.Давайте начнем.

(Нажмите, чтобы подписаться на наш канал на YouTube, чтобы получить больше руководств).

Кстати, Ctrl / Cmd означает Ctrl в Windows, Cmd на Mac. Alt / Option — это Alt в Windows или Option на Mac.

Некоторые люди могут спросить (люди всегда спрашивают), почему бы просто не сделать снимок с правильным объективом?

Неполный список причин, почему вам нужно размывать фон в Photoshop (Вы можете сказать, что я много имею дело с троллями на YouTube?)

• У меня нет дорогих линз.
• Подержанная gopro, камера «наведи и снимай», камера 360 ° и т. Д.
• Я дизайнер, это фото, которое мне дали (99% времени для дизайнеров).
• Мне нужно было закрыть диафрагму вниз, потому что она была слишком яркой и у меня не было нейтрального фильтра (здесь не помогает даже дорогой объектив).
• Если хотите, укажите свою причину.

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

Я начал с этой фотографии из Adobe Stock

Step.1

Нажмите Ctrl / Cmd + J для дублирования фона

2. Выберите инструмент «Выбор объекта» или «Быстрый выбор»

3. Если вы используете Photoshop 2019 или новее, нажмите кнопку «Выбрать тему» ​​на вверху строки меню.
Если вы работаете в Photoshop CS6-2018, сделайте выделение с помощью инструмента «Быстрое выделение».

Вы должны увидеть марширующих муравьев вокруг пары.

4. Используйте инструмент выбора объекта, чтобы очистить выделение.Удерживайте клавишу alt / option , чтобы получить минусовое выделение для удаления областей из выделения.

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

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

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

Вот пример того, чего мы хотим избежать.

Если вы делали это раньше, ничего страшного. Теперь вы знаете, и у вас будет лучший способ сделать это в будущем. (Ура PhotoshopCAFE для настоящих техник, которые работают в реальном мире)

6. Выберите фоновый слой

Если выделение еще не активировано, удерживайте Ctrl / Cmd и щелкните маску слоя, чтобы загрузить выделение.

Щелкните глаз слева от верхнего слоя, чтобы скрыть вырез.

7. Выберите Select> Modify> Expand

Небольшого количества, такого как 3, достаточно. Мы просто хотим сделать выделение немного больше, чем края людей.

Нажмите ОК

8. Нажмите Shift + Delete на Mac / Shift + Backspace в Windows

Откроется диалоговое окно заполнения

Выберите Content Aware в раскрывающемся списке содержимого

Нажмите OK

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

(Если вы не видите результат, скройте верхний слой)

9. Нажмите Cmd / Ctrl + D, чтобы выключить выделение.

10, Сделайте верхний слой снова видимым, чтобы вы видели людей. Убедитесь, что вы все еще работаете над нижним слоем.

Выберите «Фильтр»> «Галерея размытия»> «Сдвиг при наклоне».

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

Установите верхнюю и нижнюю линии, перетаскивая их. Все это объясняется в видео.

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

Пока не нажимайте ОК.

12. Теперь давайте добавим дополнительное размытие слева.

Еще в галерее размытия установите флажок «Размытие поля». Да, в этом инструменте вы можете сделать более одного размытия одновременно.

Щелкните по словам; Размытие поля, активирует элементы управления размытием поля.

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

Мы хотим смешать размытие и получить красивую резкую фотографию.

Нажмите на фото, чтобы добавить вторую булавку. Удерживая Ctrl / Cmd + Double — щелкните на булавке, чтобы установить размытие на ноль.

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

Нажмите «ОК», чтобы применить.

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

Выделите все слои. Щелкните правой кнопкой мыши и выберите «Преобразовать в смарт-объект». Это позволяет нам применять и настраивать все сразу.

Фильтр> Camera Raw

Это настройки, которые я сделал в ACR. (Как использовать Adobe Camera Raw)

И, ка-бум Вот финальное изображение. Хороший эффект, да?

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

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

Если вам нужны мои советы по Photoshop, подписывайтесь на нас в Instagram, Facebook и Twitter. Подпишитесь на наш канал Youtube здесь, чтобы смотреть трансляции в прямом эфире в Photoshop

. До встречи в CAFE

Colin

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

Создайте стильный сетчатый фон для Twitter в Photoshop -DesignBump

Узнайте, как создать классный сетчатый фон / шаблон для Twitter в Photoshop.Перед тем, как начать обучение, скачайте этот замечательный и бесплатный PSD фон для Twitter.

Окончательный результат

Сетка

1. Сначала нам нужно создать сетку для фона. Создайте новый документ с настройками ниже.

2. Нажмите CTRL + R, чтобы вывести линейку на холст, и вытяните 2 линии, как показано ниже. Разместите их по центру холста, вы можете удалить / отредактировать линии линейки с помощью инструмента «Перемещение».Затем с помощью инструмента «Прямоугольник» нарисуйте 1 горизонтальную и 1 вертикальную линии и поместите их каждую в центре, используя линии линейки в качестве ориентира.

3. Когда вы закончите узор, перейдите в Edit> Define Pattern и создайте новый сеточный узор.

Шаблон фона Twitter

4. Затем загрузите и откройте бесплатный PSD шаблон фона Twitter и сохраните его отдельно в другой папке. Используя инструмент Rectangular Marquee Tool, выберите холст размером до 1900 на 1200 пикселей и перейдите в Image> Crop.

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

6. Затем в окне «Слои» удалите значок глаза из папок и фонового слоя, чтобы его можно было настроить. Создайте новый слой и залейте его белым.

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

8. Создайте еще один новый слой и залейте его белым.Установите режим наложения на «Умножение», чтобы он был невидимым, затем перейдите в «Фильтр»> «Шум»> «Добавить шум» и установите значение 9,51%. Это создаст красивый зернистый эффект.

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

10.Инструментом «Прямоугольник» нарисуйте форму фотографии. Поверните фигуру, нажав CTRL + T, и поверните край. Дважды щелкните по слою, чтобы перейти в Параметры наложения и введите следующие настройки:

11. Продублируйте слой, перетащив его на значок нового слоя, нажмите CTRL + T и поверните его прямо.

12. Используя инструмент «Прямоугольник», снова нарисуйте фигуру, в которой будет использоваться ваше изображение, используя белый цвет. Дважды щелкните на Blending Options и введите настройку ниже:

Вы можете написать что-нибудь внизу изображения, например: «Спасибо, что посетили!» Я использую шрифт Jellyka CuttyCupcakes.

13. Затем возьмите желаемое изображение на заднем плане и поместите его поверх белого поля. Щелкните правой кнопкой мыши на слое изображения и «Создать обтравочную маску», это обрежет изображение до размера белого поля.

14. Используя инструмент Rounded Rectangle Tool, нарисуйте фигуру, как показано ниже, используя белый цвет и установите Режим наложения на Умножение (чтобы он был невидимым). Затем дважды щелкните на Blending Options и введите следующие настройки:

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

16. Затем загрузите эти 3D-иконки социальных сетей и разместите их сбоку. Чтобы сделать их меньше, нажмите CTRL + T и потяните за угол, удерживая нажатой клавишу Shift. Если вы хотите изменить цвет значка, дважды щелкните «Параметры наложения»> «Наложение цвета», выберите цвет и установите режим наложения «Мягкий свет».

17. Наконец, напишите названия ссылок, используя шрифт Bebas Neue. Если ссылка слишком длинная, сократите URL-адрес с помощью Tiny Url.

Окончательный результат

Создание стильных обоев в Photoshop • Уроки Adobe Photoshop

Окончательное изображение:

Ресурсы

Шаг 1. Открыть новый документ с белым фоном 1600? 1200 72 точек на дюйм. Добавьте большую подсветку над фоновым слоем. Мое выделение было создано с помощью плагина Knoll Light Factory. Если у вас есть этот плагин, создайте слой, залитый черным цветом над фоновым слоем, запустите Knoll Light Factory и выберите настройку бликов под названием Bright Bluelight.Если у вас нет этого плагина, вы можете скачать созданное мною выделение.

Измените режим наложения на Glow (Яркость).

Шаг 2. Смягчите блики, применив Линейный (Линейный) Градиент (Градиент) От черного до прозрачного ( черный прозрачный): установите в качестве основного цвета — черный, нажмите на инструмент Градиент (Градиент) для активации параметров градиента. Установите настройки градиента, как на изображении ниже, затем нажмите OK.

С активным инструментом Gradient (Градиент) создайте новый слой над слоем выделения. Удерживая нажатой клавишу Shift, проведите пальцем от верхнего края документа к низу. Измените режим наложения на Мягкий свет (Мягкий свет). Это смягчит края бликов.

Добавьте пару цветочных узоров к фону. Я использовал цветочные кисти от solenero73. Используйте для инструмента Brush (Кисть) белый цвет и установите для слоя Непрозрачность (Opacity) 70%.Позже вы сможете отрегулировать положение цветов.

Добавьте немного больше свечения к фону, нарисовав большой овал на новом слое с помощью инструмента. Овальное выделение (Эллиптическая область). Залейте выделение белым цветом, затем примените 170% к слою Gaussian Blur (Размытие по Гауссу). Фильтр (Фильтр) — Размытие (Размытие) — Размытие по Гауссу (Размытие по Гауссу), затем уменьшите Непрозрачность (Непрозрачность) до 25% и измените режим наложения на Мягкий свет (Мягкий свет).

Откройте текстуру стены из ~ T ~ [tirilhauan]

Очистите текстуру, удалив большие трещины с помощью инструмента Stamp (Stamp). Используйте кисть с мягкими краями, затем, удерживая клавишу Alt, щелкните место, где нет серых пятен для клонирования, затем начните закрашивать трещину.

Добавьте 24% шума (шум) к текстуре стены. Фильтр (Фильтр) — Шум (Шум) — Добавьте шум (Добавить шум), затем поместите текстуру стены над остальными слоями.Уменьшите Непрозрачность (Непрозрачность) до 25%.

Шаг 3. Добавьте цвет ко всей сцене с помощью корректирующих слоев (Adjustment Layers) ( Color Balance (Color Balance) Gradient Fill (Gradients Fills) и Color tone (Hue) / Насыщенность (Насыщенность)).

Цветовой баланс (Цветовой баланс) 1: Щелкните полумесяц в нижней части палитры слоев и выберите Цветовой баланс (Цветовой баланс) из меню, примените следующие настройки:
Синий (Голубой): -41
Пурпурный (пурпурный) (Пурпурный): -21
Желтый (Желтый): -16

Уменьшите параметр Fill (Заливка) до 56%.

Градиентная заливка (Градиентная заливка) 1: Щелкните значок в форме полумесяца в нижней части палитры слоев и выберите в меню Градиент (Градиент).
Используйте эти цвета: # ed9017 # f8d04a # f6e6b5

Измените Режим наложения (Режим наложения) на Linear dimmer (Linear Burn), измените Непрозрачность (Непрозрачность) на 48% и Fill (Заливка) 74 %.

Градиентная заливка (Градиентная заливка) 2: создайте еще один слой градиентной заливки с параметрами, показанными ниже.
Используйте эти цвета: # b7ad70 # d5cea6
Измените Режим наложения (Режим наложения) на Яркий свет (Яркий свет), оставьте Непрозрачность (Непрозрачность) на 100%.

Цветовой баланс (Цветовой баланс) 2: щелкните значок в форме полумесяца в нижней части палитры слоев и выберите в меню Цветовой баланс (Цветовой баланс).
Синий (Голубой): +9
Пурпурный (пурпурный) (Пурпурный): +14
Желтый (Желтый): +4

Оставьте параметр Заливка (Заливка) на 100%.

Создайте группу слоев Цветовой баланс (Цветовой баланс) и Градиентная заливка (Градиентная заливка). Выделите все слои, удерживайте нажатой клавишу Shift и одновременно щелкните значок Create a new group (Create a New Group) (значок папки рядом со значком полумесяца в нижней части палитры слоев). Назовите группу «Яркий цвет» (Light color). Все элементы вашего дизайна попадут в эту группу.

Шаг 4. Сохраните документ Photoshop, затем загрузите программное обеспечение Xara 3D, чтобы начать создание трехмерного текста.

Шрифт: Roland, на моем ПК это был стандартный шрифт, но подойдет любой.
Тип тиснения (скошенный): скругленный (закругленный), глубина 21.
Тени (тени): отключено (выкл.).
Экструзия: Глубина (Глубина) 59 Контур (Контур), Ширина 20.

Шаг пять.

Фонарь 1: (Левый) (Левый): # FFFFFF
Фонарь 2: (Задний) (Задний): # 140D24
Фонарь 3: (Передний) (Передний): #FFFFF

Шаг 6. Настройте свой 3D-документ Xara для экспорта 3D-шрифта.Окно (Окно) — Параметры качества (Параметры качества) — установите Качество экспорта (Качество экспорта) на Высокое (Высокое), затем нажмите ОК. Затем нажмите File (Файл) — Export (Экспорт), установите имя вашего файла «Музыка» (Music) и сохраните его в формате .png. В появившемся диалоговом окне экспорта используйте настройки, показанные на изображении ниже, затем нажмите «Сохранить».

Откройте трехмерный текст в Photoshop, затем, прежде чем перетаскивать его в основной документ, измените его цветовой режим (цветной режим) на Индексированные цвета (индекс) на RGB. Изображение (Изображение) — Режим (Режим) — RGB. Теперь разместите 3D-текст в нашем документе под группой «Яркий цвет» (Light color).

Создайте выделение трехмерного текста, удерживая нажатой клавишу Ctrl и щелкнув миниатюру слоя в палитре слоев. Создайте Новый слой (New Layer) над объемными буквами и залейте выделение черным цветом с помощью инструмента Fill (Paint Bucket) (G).

Изменить Режим наложения (Режим наложения) черный слой на Умножение (Умножение).Откройте и поместите текстуру стены из ~ T ~ [tirilhauan] поверх черного слоя в документ. Уменьшите размер текстуры, чтобы она соответствовала трехмерному тексту.

Поместите курсор мыши прямо между слоями «Текстура стены» и «Черный слой» и, удерживая клавишу Alt, щелкните левой кнопкой мыши, когда увидите символ в виде двух перекрывающихся кругов, см. Изображение ниже.

Шаг 7. Теперь мы создадим трехмерную сферу, используя инструмент Ellipse (Oval) (Эллипс) и стилей слоя (Layer Styles).

A. Используйте инструмент Ellipse (Oval) (эллипс) mode
AT. Слой — рисунок (Слой формы) (Этот режим позволит вам изменять размер круга без разрушения пикселей).
C. Удерживайте клавишу Shift во время рисования, чтобы получить идеальный круг.

Примените Gradient overlap (Gradient Overlay) к кругу и поместите самую яркую область вверху круга, как показано на изображении ниже.
Цвета градиента: #fcfcfa, # 976d14, # 2a211c

Нанесите Internal Glow (Inner Glow) цветом # 2c2614

Добавьте свет Shadow (Drop) с цветом: # 2a2d21

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

Дублируйте, измените размер и сгруппируйте сферы и поместите их за трехмерным текстом. Часть из них я сгруппировал и превратил группу в смарт-объект (Смарт-объект). Я также поместил несколько размытых сфер, растворяющихся на заднем плане, под слоем «Текстура стены», который я создал на втором этапе. Эта техника придаст ощущение глубины.

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

Шаг 8. Создайте яркие линии с помощью инструмента Pen (Перо), мазков кистью (мазок кисти) и стилей слоя (Стили слоя). Начните с создания Новый слой (Новый слой) поверх слоев со сферами и 3D-текстом.

A. Нарисуйте длинный изогнутый контур с помощью инструмента Pen (Pen),
B. Пока инструмент Pen (Pen) все еще активен, щелкните правой кнопкой мыши по контуру и выберите Circle Outline (Stroke Path). ) из контекстного меню.
C. Выберите контурный ход с помощью инструмента Brush (Brush) с активным параметром Simulate pressure (Simulate Pressure).

Удалить контур (Вы можете найти его в палитре Контуры (Путь)). Вернитесь к палитре слоев и примените следующие стилей слоя (Layer Style) к Stroke:
Gradient overlap (Gradient Overlay): #fcfcfa, # 976d14.

Внешнее свечение (Внешнее свечение): # d38e21.

Шаг 9. Дублируйте, сгруппируйте и измените размер ярких линий, затем сделайте еще копии и разместите их вокруг 3D-текста и сфер.

Окончательное изображение

(щелкните изображение, чтобы увеличить)

Заключение:
Мы успешно создали реалистичную трехмерную композицию с помощью Xara 3D и Photoshop. Xara — отличная 3D-программа и очень полезный инструмент в вашей работе.
( прибл.Пер .: Перевод отрывка из Книги Судей, который представил автор, я не давал по определенным причинам).

Как создать элегантную поздравительную открытку со стильным новогодним шаром на красном фоне в Adobe Photoshop CS6

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

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

Начните работу с создания нового документа ( Ctrl + N ) в Adobe Photoshop CS6 с размером 1000 пикселей на 1000 пикселей (цветовой режим RGB ) с разрешением 72 пикселей / дюйм .
Щелкните значок Добавить стиль слоя в нижней части панели Layers и выберите Gradient Overlay .

Щелкните на шкале цветов , чтобы открыть Gradient Editor и установить точек цвета , как показано. Щелкните OK , чтобы закрыть диалоговое окно Gradient Editor .

Получился следующий фон:

Теперь выберите инструмент Ellipse Tool (U) и нарисуйте маленький кружок белого цвета .

Мы получили следующий результат:

Установите Fill на 28% для слоя круга.

Теперь мы сделаем много копий последнего созданного слоя круга и выберем команду Free Transform (Ctrl + T) , чтобы изменить размеры копий, разместив их, как показано ниже:

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

Добавьте еще два маленьких круга, измените значение Fill и Blending Mode на ранее созданном круге:

Объедините в группу все слои, содержащие круги (нажмите кнопку CTRL , чтобы выбрать необходимые слои, и удерживайте левую кнопку мыши при перетаскивании выбранных слоев на Создайте новую группу. Значок в нижней части панели Layers ).
Установите Заполните на 50% для новой группы, которую мы получили.

Теперь сделаем копию новой группы и растеризуем копию (в этом случае выберите группу на панели Layers и нажмите CTRL + E от до Merge Down ). Примените к растеризованному слою следующий фильтр: Фильтр> Размытие> Размытие по Гауссу :

Мы получили следующий результат:

Снова выберите инструмент Ellipse Tool (U) , чтобы продолжить рисование кругов разного цвета и разного значения Заливка , пытаясь получить сходство со следующим продемонстрированным изображением:

Создайте новый слой и выберите кисть Soft Round .

Используйте эту кисть, чтобы прокрасить поверхность кругов. Цвет кисти # FFE8A3 , внизу (непрозрачность кисти — 60% ), вверху (непрозрачность кисти — 30%, )

Возьмите инструмент Ellipse Tool (U) , чтобы изобразить елочный шар, нарисуйте следующий круг, как показано:

Мы получили следующий результат:

Щелкните значок Добавить стиль слоя в нижней части панели Layers и выберите Gradient Overlay .

Щелкните на шкале цветов , чтобы открыть Gradient Editor и установить точек цвета , как показано. Щелкните OK , чтобы закрыть диалоговое окно Gradient Editor .

Добавить Drop Shadow :

У нас есть следующий мяч:

Теперь нам нужно изобразить опорный элемент мяча, с помощью инструмента Rectangle Tool (U) нарисуйте следующий прямоугольник.Поместите слой под слой с мячом.

Щелкните значок Добавить стиль слоя в нижней части панели Layers и выберите Gradient Overlay .

Щелкните на шкале цветов , чтобы открыть Gradient Editor и установить точек цвета , как показано. Щелкните OK , чтобы закрыть диалоговое окно Gradient Editor .

Мы получили следующий результат:

Создайте изящную стильную таблицу цен в Photoshop

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

Итак, приступим!

Ресурсы

Схема PW

Выкройка

А теперь, прежде чем мы начнем, давайте посмотрим на наш окончательный результат. (Загрузите готовый многослойный PSD файл.)

Шаг 1

Откройте Photoshop и создайте новый файл шириной 600 пикселей и высотой 700 пикселей.

Шаг 2

Теперь мы начнем с фона, поэтому создайте новый слой. Затем выберите инструмент «Ведро с краской» и залейте фон цветом # 9fc7d9.

Шаг 3

Выберите фоновый слой и нажмите «Слой»> «Стили слоя»> «Наложение узора» (или дважды щелкните выбранный слой) и добавьте один из шаблонов PW из вышеупомянутого набора.Измените режим наложения на «Светлее» и установите непрозрачность узора на 67%.

Шаг 4

Снова нажмите «Слой»> «Стили слоя»> «Внутренняя тень» (или дважды щелкните выбранный слой) и добавьте внутреннюю тень с помощью режима наложения «Умножение». Теперь уменьшите непрозрачность до 41%.

Шаг 5

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

Шаг 6

Теперь залейте фигуру цветом # 252525. Вы также можете щелкнуть правой кнопкой мыши по контуру, выбрать «Сделать выделение» и затем заполнить его с помощью инструмента «Ведро с краской».

Шаг 7

Теперь нажмите «Слой»> «Стили слоя»> «Обводка» (или дважды щелкните выбранный слой), чтобы добавить обводку к нашей форме. Добавьте обводку 3 пикселя с непрозрачностью 100% и выберите положение «внутри».

Шаг 8

Снова нажмите «Слой»> «Стили слоя»> «Тень» (или дважды щелкните выбранный слой), измените режим наложения на «Умножение» и уменьшите непрозрачность до 40%.Отрегулируйте расстояние тени до 23 пикселей и отрегулируйте размер до 13 пикселей.

Шаг 9

Создайте новый слой (щелкните «Слой»> «Новый»> «Слой»), а затем щелкните инструмент «Перо», чтобы создать другую форму. Щелкните правой кнопкой мыши путь и выберите «Сделать выбор». Теперь выберите инструмент «Ведро с краской» и залейте фигуру цветом # 363636.

Шаг 10

Теперь нажмите «Слой»> «Стили слоя»> «Обводка» (или дважды щелкните выбранный слой), чтобы добавить обводку к нашей форме.Добавьте обводку 2 пикселя с непрозрачностью 100%, используя цвет # 676363.

Шаг 11

Снова нажмите «Стили слоя», чтобы добавить «Внутреннюю тень». Используйте настройки, показанные на изображении ниже.

Шаг 12

Снова нажмите на стили слоя, чтобы добавить «Внутреннее свечение». Измените режим наложения на «Linear Burn» и оставьте остальные настройки такими же, как на изображении ниже.

Шаг 13

Снова нажмите «Стили слоя», чтобы добавить «Наложение градиента».»Измените режим наложения на« Мягкий свет »и уменьшите непрозрачность до 45%. Остальные настройки оставьте такими же, как показано на изображении ниже.

Шаг 14

Выберите слой-фигуру и нажмите «Слой»> «Стили слоя»> «Наложение узора» (или дважды щелкните выбранный слой) и добавьте еще один узор PW из вышеупомянутого набора. Установите непрозрачность 65% и масштаб 41%.

Шаг 15

А теперь давайте начнем с деталей, выберите инструмент «Текст» и добавьте заголовок, используя цвет # 3fcf74.Затем нажмите «Стили слоя» и добавьте тень к нашему тексту. Сохраните настройки тени такими же, как показано на изображении ниже.

Шаг 16

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

Шаг 17

Теперь выберите инструмент «Прямоугольник» и создайте маленький прямоугольник, используя цвет # 3fcf74. Затем нажмите «Стили слоя» и добавьте тень к прямоугольнику.Сохраните настройки, как показано на изображении ниже.

Шаг 18

Выберите инструмент «Текст» и добавьте текст, используя цвет # f4f3f3, затем нажмите «Стили слоя», чтобы добавить тень. Используйте настройки ниже.

Шаг 19

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

Шаг 20

А теперь создадим кнопку заказа. Выберите инструмент «Прямоугольник» и нарисуйте маленький прямоугольник, используя цвет # f26522.Затем нажмите «Стили слоя», чтобы добавить обводку, узор и тень. Используйте настройки, показанные ниже.

Шаг 21

Выберите инструмент типа, чтобы добавить текст к нашей кнопке заказа. Добавьте текст, используя цвет # f8f8f8, затем нажмите «Стили слоя» и добавьте немного тени, используя те же методы, что и в приведенном выше тексте.

Шаг 22

Теперь давайте начнем с веревки, сначала сделаем отверстие. Итак, выберите инструмент эллипс и нарисуйте маленький круг, используя цвет # 959595.Затем создайте еще один круг, залейте его цветом # e2eef4 и поместите в середину первого круга.

Шаг 23

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

Шаг 24

Для веревки выберите жесткую круглую кисть и нарисуйте прямую линию, используя чистый белый цвет. Затем нажмите «Стили слоя», чтобы добавить «Фаска и тиснение» и «Узор».”

Шаг 25

Теперь добавьте тень к веревке, используйте мягкую круглую кисть цвета # 2d2d2d, затем нажмите «Фильтр»> «Размытие»> «Размытие по Гауссу». Измените радиус до 8,8 пикселей.

Готово! Наша элегантная и стильная таблица цен готова. Надеюсь, вам понравился урок. Заботиться!

Создайте стильную синюю тему для блога в Photoshop

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

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

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

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

Шаг 1. Создайте новый файл

Создайте новый файл (Файл — Новый на панели инструментов) шириной 1600 пикселей и высотой 1525 пикселей.

Шаг второй: фон

Для начала мы хотим использовать радиальный градиент с двумя оттенками синего. Установите цвет переднего плана на # 2e4d7a, а цвет фона на # 1f2a42. Выберите инструмент градиента и убедитесь, что выбран радиальный градиент. Кроме того, установите градиент, чтобы переходить от цвета переднего плана к цвету фона.

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

Теперь, когда у нас есть градиент на фоновом слое, мы добавим текстуру, используя фотографию. Я буду использовать текстуру из Lost and Taken. Вы можете получить изображение по этому URL-адресу. Это шероховатая текстура бумаги, которую мы будем использовать поверх фона.

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

Это придаст текстуру синему фону.

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

Создайте новый слой (Layer — New) и установите цвет переднего плана на # 1f2a42. Выберите инструмент градиента и установите его на линейный и переход от цвета переднего плана к прозрачности. Мы создадим градиент на этом слое, который установит для нижней части холста сплошной темно-синий цвет, и он станет прозрачным, чтобы текстурированный фон отображался в верхней части холста.

Начните градиент примерно на 900 пикселей от верха холста, перетащите его примерно до отметки 550 пикселей и отпустите там кнопку мыши.

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

Шаг 3. Область содержимого

Наш дизайн будет иметь ширину 960 пикселей, а область содержимого будет начинаться на 155 пикселей от верха холста.Мне нравится использовать направляющие для настройки макета, поэтому, если вы хотите использовать направляющие, вы можете установить вертикальные направляющие на 320 пикселей и 1280 пикселей. Установите горизонтальную направляющую на 155 пикселей. Установите цвет переднего плана на # eae6e0 и выберите область содержимого с помощью инструмента прямоугольной области. Используя ведерко с краской, залейте область содержимого светло-серым цветом.

Мы собираемся изменить цвет фона боковой панели, поэтому установите вертикальную направляющую на 980 пикселей и используйте ведро с краской, чтобы заполнить боковую панель цветом # dbc7b3.Затем с помощью инструмента «Карандаш» нарисуйте левую границу в один пиксель для боковой панели в # cab7a4.

Далее мы собираемся использовать инструмент «Карандаш», чтобы придать области содержимого двухпиксельную границу # 2e4d7a сверху и по бокам. Установите границу за пределами существующей области содержимого.

Шаг 4. Меню навигации и заголовок

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

Выберите инструмент «Прямоугольник со скругленными углами» и установите радиус 15 пикселей (цвет переднего плана должен быть # 254068). Наше навигационное меню переместится от отметки 825 пикселей к правому краю макета, а его верхняя часть должна начинаться с отметки 110 пикселей. Чтобы упростить эту задачу, вы можете установить горизонтальную направляющую на 110 пикселей и вертикальную направляющую на 825 пикселей. Затем с помощью мыши добавьте прямоугольник с закругленными углами, который совпадает с этими направляющими. Нижняя часть прямоугольника перейдет в область содержимого.

Установите цвет переднего плана на # 254068, установите цвет фона на # 1f2a42, если это еще не сделано. Дважды щелкните палитру слоев и выберите наложение градиента. Выберите градиент, переходящий от переднего плана к цвету фона, и примените его так, чтобы более светлый синий цвет находился вверху, а более темный синий — внизу. Затем выберите «штрих» и установите его на 1 пиксель снаружи на # 2e4d7a.

Теперь переместите этот слой ниже слоя, который включает фон для области содержимого, чтобы нижняя часть прямоугольника с закругленными углами не была видна.Обводка за пределами закругленного прямоугольника должна совпадать с краем синей границы, окружающей область содержимого. Если это не так, выберите слой прямоугольника с закругленными углами и перейдите в Edit — Free transform. Отсюда вы можете использовать клавиши со стрелками, чтобы перемещать его по одному пикселю за раз, чтобы выровнять его правильно.

Используйте текстовый инструмент, чтобы добавить несколько ссылок в Arial 16 pt, # eae6e0.

Мы собираемся использовать некоторые значки из популярного бесплатного значка, установленного Function, чтобы включить ссылки для подписки по RSS и электронной почте, а также ссылки на профиль Twitter.Загрузите набор значков из функции, откройте значки RSS, электронной почты и Twitter и измените размер каждого из них до 20 пикселей на 20 пикселей. Вставьте их прямо над областью содержимого и добавьте текст шрифтом Arial 12 pt. Левый край значка RSS должен совпадать с вертикальной направляющей на 340 пикселей.

Далее мы будем использовать бесплатный шрифт Walkway Bold для создания заголовка / логотипа. Я использую текст размером 48 pt в # eae6e0. Затем дважды щелкните слой в палитре слоев и выберите «тень». Установите расстояние и размер падающей тени на 3 пикселя каждая и непрозрачность на 50%.

Шаг 5. Добавьте содержание сообщения

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

Мы собираемся оставить 20 пикселей отступа слева, сверху и справа. Используйте текстовый инструмент, чтобы добавить текстовое поле и заголовок сообщения. Я использую 30 pt Arial в # 2f4f7f для заголовка и 14 pt Arial в # 747272 для информации о посте, которая идет в следующей строке (с интерлиньяжем 24 пикселя).Набор значков функций также включает значок комментария, поэтому вы можете изменить его размер до 20 на 20 пикселей и вставить его.

На главной странице нашего блога будут показаны выдержки из сообщений с миниатюрами для каждого сообщения. Я просто использую для этой цели несколько случайных фотографий, используйте все, что хотите. Миниатюры будут иметь ширину 200 пикселей и высоту 160 пикселей и будут окружены рамкой из пяти пикселей в # d2cfc9. Верхняя часть границы миниатюр начинается на 20 пикселей ниже текста, а левый край совпадает с заголовком сообщения, значком RSS и логотипом блога.Используйте инструмент прямоугольной области, чтобы выбрать область для миниатюры, и ведро с краской, чтобы применить серый цвет. Затем вставьте изображение размером 200 на 160 пикселей.

Теперь мы можем добавить текст для отрывка из сообщения. Я выравниваю текст на 10 пикселей справа от границы миниатюр и использую Arial 14 пунктов в цвете # 1c2131. Чтобы ссылка на полную версию сообщения, измените цвет на # 2f4f7f и выделите текст курсивом и подчеркните.

Под отрывком поста мы добавим двухпиксельную рамку.Оставьте 20 пикселей между нижней частью ссылки, чтобы прочитать сообщение полностью и границу. Сначала с помощью инструмента «Карандаш» добавьте белую (#ffffff) рамку размером в один пиксель, идущую от левого края области содержимого к краю боковой панели. Затем добавьте границу в один пиксель в # c6c6c6 прямо под белой линией.

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

А вот и результат в натуральную величину.

Теперь вы можете повторить процесс добавления заголовка, миниатюры, содержимого и границы сообщения еще для двух сообщений (вы, конечно, можете разместить более трех сообщений на главной странице, если хотите.Я оставил 3 в первую очередь, чтобы сэкономить немного времени).

После того, как посты будут сделаны, на 20 пикселей ниже последней границы мы добавим кнопку для просмотра более старых постов. Используйте инструмент прямоугольной области, чтобы нарисовать кнопку и залейте ее цветом # 2f4f7f. Текст Arial размером 14 пт, # eae6e0. По краям кнопки используйте инструмент «Карандаш», чтобы добавить границу в один пиксель в цвете # 254068.

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

Шаг 6. Боковая панель

В верхней части боковой панели мы создадим место для баннерных объявлений размером 125 на 125.Каждый баннер будет иметь рамку в 5 пикселей и интервал по всему периметру 10 пикселей.

С включенными границами каждое рекламное место будет 135 на 135, поэтому нам нужно выбрать область этого размера с помощью инструмента прямоугольной области и заполнить ее цветом # cab7a4, который будет цветом границы. Оставьте 10 пикселей выше границы и слева и справа. Затем вставьте свои 125 на 125 объявлений.

На двадцать пикселей ниже баннеров добавьте текст «искать в блоге» шрифтом Arial 18 pt, # 1c2131.Все на боковой панели будет выровнено по вертикали с левым краем границы на баннерах, в 10 пикселях от левого края боковой панели.

Затем с помощью инструмента прямоугольной области нарисуйте поле поиска высотой 25 пикселей и залейте его белым цветом (#ffffff). Создайте кнопку для поиска, которая также имеет высоту 25 пикселей и совпадает с правым краем границы на баннерах (10 пикселей от правого края боковой панели). Используйте ведро с краской, чтобы заполнить кнопку цветом # 2f4f7f, и инструментом карандаша, чтобы придать ей границу в один пиксель # 254068.Задайте белому полю поиска границу в один пиксель # cab7a4.

Оставьте 20 пикселей под поиском и добавьте текстовое поле и текст «темы статей» шрифтом Arial 18 pt, # 1c2131. Затем добавьте ссылки на различные категории, используя 14 pt Arial в $ 2f4f7f. Здесь я использую интерлиньяж 16 пикселей.

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

Последнее, что мы сделаем на боковой панели, — это добавим двухпиксельные границы под каждой ссылкой.Используйте инструмент «Карандаш», чтобы добавить линию в один пиксель в #efdece, а затем еще одну линию в один пиксель в # cab7a4 непосредственно под ней. Граница должна проходить от левого края боковой панели до правого края.

Шаг 7. Нижний колонтитул

Последний шаг — добавить нижний колонтитул. Используйте инструмент прямоугольной области, чтобы выделить нижнюю область и заполнить ее цветом # 1f2a42 (оставьте 20 пикселей интервала ниже кнопки «старые сообщения» до начала нижнего колонтитула). Используйте инструмент «Карандаш», чтобы добавить двухпиксельную границу в # 2f4f7f, которая соединяется с границами с каждой стороны.Добавление текста для ссылок с использованием Arial 14 pt в # eae6e0.

Готовый продукт:

На этом дизайн завершен. Вот посмотрите, что мы только что сделали.

Если вы хотите загрузить исходный PSD-файл, который использовался для создания этого руководства, вы можете получить его здесь (ZIP-файл 7,1 МБ).

Дополнительные уроки по макету в Photoshop см .:

Создание стильного темного художественного изображения в Photoshop

13 мая Создание стильного темного художественного изображения в Photoshop

Размещено в 10:18 в Photoshop Уроки Махмудура

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

Это материалы, необходимые для этого урока, нажмите здесь, чтобы загрузить

Сначала вы открываете это изображение, нажимаете Ctrl + J, чтобы дублировать слой, затем меняете режим наложения: Мягкий свет

Вырежьте девушку из фона (Перо = 5)

Переместите девушку к первому изображению, нажмите Ctrl + B, чтобы открыть Цветовой баланс, установите такую ​​информацию:

Нажмите Ctrl + J, чтобы дублировать слой леди, Режим наложения: Экран и отрегулируйте Непрозрачность копии слоя: 70%.Вы получите результат:

Откройте облако, используйте инструмент Elliptical Marquee Tool, чтобы сделать выделение следующим образом (Feather = 20)

Переместите выделенную часть облака на задний план, используйте Free Transform (Ctrl + T), чтобы сделать он поместится в фон, измените режим наложения: Экран

Дублируйте слой облака, используйте Свободное преобразование (Ctrl + T), чтобы отменить копию слоя, затем переместите его в нижнюю часть фона

Получите Луну из этого запаса, перо 10 пикселей:

Переместите слой с луной на задний план и поместите его под слоем с облаками.Нажмите Ctrl + B, чтобы открыть Color Balance, и установите следующую информацию:

Вы получите:

Используйте инструмент Elliptical Marquee Tool, чтобы нарисовать ромб, затем щелкните правой кнопкой мыши, выберите Stroke: white, 1px

Duplicate слой ромба, чтобы сделать еще одну копию слоя (около 5,6 слоев), затем отсортируйте их следующим образом:

Объедините все слои ромбов в один слой, затем откройте Стиль слоя, установите такую ​​информацию:

Перейти к фильтру -> Радиальное размытие:

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

Дублируйте слой, используйте Free Transform, чтобы вращать ромб.

No related posts.