Как сделать вывеску в фотошопе
Один из новых инструментов, появившихся в Фотошоп СС 2015, более или менее схож с аналогичным в Adobe Illustrator и называется монтажная область. Данный инструмент позволяет нам создавать несколько страниц в пределах одного документа. Но Монтажная область (artboard) программы Фотошоп является более гибким инструментом, поскольку у нас есть возможность свободно изменять ее размер и расположение.
Теперь мы можем быть более продуктивны в нашей работе, поскольку у нас появилась возможность создавать страницы со сложно структурированным дизайном в пределах одного документа. Например, мы можем использовать этот новый инструмент для разработки сложно структурированного макета для так называемого, "отзывчивого" веб-сайта, или нескольких страниц интерфейса какого-либо приложения, ну или чего-то попроще, например, разработки рекламных баннеров.
Итак, что мы будем создавать:
В этот раз мы будем разрабатывать дизайн баннеров, рекламирующих скидки, для некоего вымышленного ресторана. Как вы видите, один и тот же дизайн будет адаптирован под разные размеры баннеров, это как раз и есть тот случай, когда такое нововведение, как монтажная область (artboard) будет для нас весьма полезным.
Шаг 1
Запустите ваш Фотошоп CC 2015, нажмите комбинацию клавиш CTRL+N, чтобы создать новый документ. Выберите тип документа (Document Type): Монтажная область (Artboard). Ниже области выбора типа документа вы можете выбрать один из предустановленных размеров монтажной области или установить его вручную, введя цифры в соответствующие окошки Ширина (width) и Высота (height).
Для данного урока были выставлены следующие размеры: Ширина (width) 728 пикселей и Высота (height) 90 пикселей. Когда выставите все необходимые параметры, нажмите ОК.
Шаг 2
Монтажная область сейчас сформирована с определенной шириной и высотой, с такими, как мы установили в предыдущем шаге. Чтобы выбрать монтажную область, кликните по ее названию.
Чтобы поменять название монтажной области, необходимо кликнуть по ее названию два раза.
Шаг 3
Шаг 4
Когда вы закончите рисовать прямоугольник, автоматически появится палитра Свойства (Properties). Это так же является одним из нововведений версии Фотошоп СС 2015.
Мы можем настроить радиус скругления угла, чтобы превратить нашу фигуру в прямоугольник со скругленными углами. Касаемо данного примера, выставьте значение радиуса скругления для правого нижнего угла 80 пикселей.
Баннер или шапка сайта HTML представляют собой графику, которая находится в верхней части сайта. На ней обычно отображается название компании. Часто это первое, что видит человек при посещении сайта. В этой статье мы расскажем, как сделать баннер в фотошопе.
Создание простого веб-баннера в Photoshop
Начнем с готового баннера. У нас есть базовый пример, используемые в нем цвета успокаивают глаза. Его можно размещать на сайте, посвященном моде и стилю, а также для персонального блога. Следуйте приведенным ниже инструкциям:
Откройте новый документ . Открываем в Photoshop новый документ нужного размера:
Нарисуйте прямоугольник с помощью инструмента « Прямоугольная область » . Перед тем, как сделать шапку сайта HTML , создайте на новом слое прямоугольник любого цвета:
Стиль слоя> Наложение градиента . Нажмите на стиль, а затем примените градиент:
Выбор формы кисти . После применения к прямоугольнику градиента и создания нового слоя поверх него, создайте выделение фигуры. Удерживая нажатой клавишу CTRL , кликните по фигуре прямоугольника. Активируйте кисть и настройте ее параметры, как показано на рисунке ниже. Зарисуйте одну сторону прямоугольника:
Создайте новый слой . Создайте новый слой и выберите инструмент « Овальная область ». Измените настройки выделения и перетащите его на фигуру прямоугольника, как показано на рисунке ниже. Измените режим наложения на « Перекрытие », создайте еще два дубликата этого выделения:
Измените режим смешивания на «Перекрытие» . Перед тем, как сделать баннер в шапку сайта HTML , переместите три дубликата, созданных ранее, и поместите их в соответствующих местах. Измените их режим наложения на « Перекрытие ». При этом обратите внимание, чтобы они не вышли за пределы прямоугольника:
Используйте кисть, чтобы удалить лишние области, поместите эти три слоя в группу и кликните по иконке маски слоя. Выберите любой размер кисти, но не очень большой. Установите « Жесткость » - 0% , « Непрозрачность » - 10% . Зарисуйте края этих эллипсов, чтобы смешать их, и уменьшите непрозрачность:
Выберите инструмент «Горизонтальный текст» и введите надпись шапки сайта HTML . Введите основную надпись баннера, а затем добавьте дополнительную информацию о сайте:
Создайте новый слой и создайте тень баннера . Создайте новый слой, кликните кистью один раз в любом месте и установите тень внизу веб-баннера так, чтобы прозрачность составляла 50 или 40% :
Создайте новый слой ниже слоя баннера . Создайте новый слой ниже слоя баннера, как показано на рисунке ниже, и кликните один раз кистью белого цвета, « Жесткость » - 0% . Затем разместите эту светлую область на основном баннере и уменьшите непрозрачность слоя до 70% :
Поместите все слои в группу . Затем продублируйте эту группу и измените цвет градиента. Измените градиент и надпись баннера, как показано на рисунке ниже:
Заключение
Мы рассказали вам как сделать баннер в фотошопе. Надеюсь, что эта статья оказалась полезной для вас.
Пожалуйста, оставьте свои комментарии по текущей теме материала. Мы очень благодарим вас за ваши комментарии, лайки, отклики, дизлайки, подписки!
В этом уроке я покажу вам простые приемы создания потрясающих обоев с дизайном вывески в Photoshop CS5. Я надеюсь, что вам понравится этот урок, потому что он такой интересный и легкий в освоении. Если вы хотите улучшить свои навыки работы с Photoshop, вы также можете изучить эти следующие руководства.
Связанные руководства по Photoshop:
- Создайте реалистичный iPhone в Photoshop
- Создайте красивую дамскую сумку с помощью Photoshop
- Великолепное руководство по ретушированию фотографий в Photoshop
- Как создать текстовый эффект в стиле гранж: учебное пособие по Photoshop
Подробное описание учебного пособия:
- Программа: Adobe Photoshop CS5
- Сложность: средняя
- Расчетное время выполнения: 50 минут
Создание доски для вывесок в Photoshop — предварительный просмотр
Предварительный просмотр
Инструменты и ресурсы
Инструменты и ресурсы
Внешние Ресурсы
- Шрифт
- Изображение текстуры стены
- Первое изображение текстуры дерева
- 2-е изображение текстуры древесины
Инструменты Photoshop
- Инструмент «Прямоугольник»
- Инструмент «Прямоугольник со скругленными углами»
- Наложение градиента
- Инструмент «Кисть»
- Инструмент «Текст»
- Инструмент «Произвольная фигура»
Начнем создавать подписать доску в Adobe Photoshop CS5.
Шаг 1
Создайте новый документ ( Ctrl + N ) Размер 1000 × 1000 .
Создать новый документ
Шаг 2
Прежде всего я собираюсь добавить изображение текстуры стены в Photoshop, чтобы начать создание нашей вывески.
Добавить изображение текстуры стены
Шаг 3
Создать новый R ectangle
Установите для Blend Mode значение ( Multiple ) для этого слоя прямоугольника формы.
Установите режим наложения на несколько
Шаг 4
Создайте прямоугольник
Шаг 5
Закрасьте внешнюю область
Теперь выберите 1-й слой прямоугольника с закругленными углами и перейдите к Filter > Blur > Gaussian Blur и установите Radius ( 70px ▪).
Размытие по Гауссу
После применения размытия по Гауссу мы получаем красивый эффект на этом первом слое прямоугольника.
Получите красивый эффект на этом прямоугольнике
Установите для Режим наложения значение ( Hard Light ) для этого слоя прямоугольника.
Установите режим наложения на Hard Light
Шаг 6
Создать прямоугольник со скругленными углами
Перейдите к Layer > Layer Style и примените некоторые параметры наложения на этом втором слое прямоугольника с закругленными углами.
Drop Shadow
Drop Shadow
Внутренняя тень
Внутренняя тень
После применения этих параметров наложения мы получаем новый эффект на втором слое прямоугольника.
Получить новость Эффект на 2-м прямоугольнике
Шаг 7
Теперь пора добавить 1-ю текстуру дерева в Photoshop.
Добавить 1-ю текстуру дерева
Теперь, удерживая клавишу Alt , щелкните левой кнопкой мыши в центре. 1-го слоя текстуры древесины и 2-го слоя прямоугольника с закругленными углами текстура дерева сливается со слоем прямоугольника.
Объединить в прямоугольник
Шаг 8
Создать третий прямоугольник
Перейдите к параметру наложения и примените Drop Shadow к этому прямоугольнику слой.
Drop Shadow
После применения тени мы получаем красивую эффект на 3-м слое прямоугольника.
After Drop Shadow
Как превратить пейзажи унылого городка в виды крутого мегаполиса с рекламой и вывесками? Конечно же, в этом помогут эффекты света. В этом уроке Вы узнаете, как в фотошопе сделать свечение.
Волшебный новогодний шар
Попробуем сделать источающим свет изображение новогоднего шара. Увеличим выбранное изображение. Воспользуемся «Пером», обведем наш шар по контуру, «крепление» оставим как есть.
Теперь контур преобразовываем в выделение. Для этого щелкаем по нему правой клавишей мыши и выбираем «Выделить область».
Нажимаем на нее правой клавишей мыши и копируем на новый слой. Переходим на него.
Из параметров наложения нам понадобится «Внешнее свечение». Так как основной фон у нас темный, а мы хотим создать эффект сияния, то наиболее подходящим из имеющегося списка будет режим наложения «Экран».
В палитре ищем тот оттенок цвета, каким будет сияние вокруг шара. Регулируем размер, степень прозрачности. Все эффекты сразу визуализируются, поэтому работать с настройками достаточно удобно.
В числе характеристик можно увидеть «диапазон» и «колебания». Первая отражает жесткость, ее можно увеличивать или уменьшать, в зависимости от поставленных задач. Изменяя значения шкалы «Колебания», можно уменьшить или добавить шум.
Таким образом, получаем вот такую картинку.
Зажигаем лампочку без электричества
А теперь давайте «зажжем» лампочку несколькими простыми действия. Подбираем рисунок, с которым будем работать, увеличиваем. Нам нужен темный оттенок, для того чтобы нарисованный нами свет был видимым.
При помощи инструмента «Заливка» закрашиваем светлый фон.
Выделяем стеклянную часть при помощи «Пера» и создаем вокруг нее «ореол», как на предыдущем примере. Теперь выбираем «Внутреннее свечение».
Открываем его настройки. Среди режимов наложения ищем «Осветление основы», по шкале «Непрозрачность» выставляем значение 50%.
Находим цвет, совпадающий с «ореолом» вокруг стеклянной части, увеличиваем свечение внутренней части лампочки до желаемого. Получаем вот такую картинку. Раз, два, три – наша лампочка, гори!
Свет от фонаря
А теперь давайте вместе с Вами «оживим» фонарь. Запоминаем стартовое изображение.
А теперь создаем новый слой. Мы будем работать со слоями, поэтому будет удобней, если их будет видно (клавиша F7). Выбираем созданный нами новый слой. Нам понадобится мягкая круглая кисть, с ее помощью рисуем объемное темное пятно в центре фонаря.
Создаем блик, совпадающий по центру с нарисованным нами затемнением. Настраиваем его яркость.
В параметрах наложения выбираем «Замена светлым». В итоге получаем желаемый эффект.
Ламповая атмосфера
Теперь поработаем с объемным светом. Нарисуем темный фон.
Сначала мы сделаем изображение того, как распределяется наш поток света от лампы. Пририсовываем его контуры, используя «Прямолинейное лассо». Берем новый слой.
Путем заливки закрашиваем получившуюся фигуру. Заходим во вкладку «Фильтры», ищем «Размытие», находим «Размытие поля». Появляется серый круг. Перемещаем его к началу светового пучка.
Потом щелкаем мышью (левой клавишей) у нижнего края нарисованного нами потока света. Появляется еще один круг. Теперь нужно оба этих круга «настроить».
Нажимаем на первую и ставим небольшое значение (например, 8 пикселей), потом нажимаем вторую и выставляем значение в 225 пикселей.
Получаем расходящийся широкий поток света. Сохраняем, для того чтобы применить к изображению полученный эффект. Итак, свет лампы падает на предметы, лежащие на столе, рассеивается, чего и требовалось в итоге добиться.
Горящие глаза
Эффекты свечения используются и в работе с портретами. Это отличный способ дополнить образ модели, возможность сделать фотографию более выразительной, а черты лица – более гармоничными.
Может быть создан гротескный рисунок, получившееся изображение может нести в себе юмористическое содержание. Я думаю, что Вы сможете найти массу примеров применения того приема, который мы сейчас рассмотрим.
В качестве основы мы берем часть портрета, где крупным планом будут изображены, как Вы уже догадались, глаза. Итак, начинаем.
Выделяем зрачок с радужкой. Для этого нам нужен инструмент «Овальная область». Рисуем овал, который бы по размеру совпадал бы со зрачком с радужкой. Как мы видим, зрачок немного прикрыт веком модели.
Для того чтобы выделение соответствовало видимой части зрачка, используем дополнительно «Пересечение с выделенной областью»(виден при нажатии значка инструмента «Овальная область»).
Копируем зрачок с радужкой на новый слой тем же приемом, как в предыдущей работе. Снова выделяем зрачок. Добавляем черно-белый шум, 10 процентов.
В настройках ставим метки напротив позиций «Распределение по Гауссу» и «Монохром». Делаем радиальное размытие, выбирая «Линейный метод», «Наилучшее качество». В окне значений пишем число 80. Теперь у нас появились полосы, идущие от зрачка.
Добавляем слой-маску (значок в правой нижней части окна работы со слоями). Далее мы будем использовать кисть. Нам понадобится черный цвет. Обводим кистью зрачок и пространство за радужкой. Так мы стираем «ненужное».
Добавляем корректирующий слой «Цветовой тон и насыщенность». Далее, нам понадобится обтравочная маска.
Из параметров наложения выбираем «Линейный осветлитель», повышаем значения насыщенности (например, до 36).
Переходим к нашему фону (изображение, с которого мы начинали работу). Понижаем яркость до – 100, увеличиваем контрастность до 100.
Продолжаем работать с фоном, теперь изменяем цветовой тон (ставим +8) и насыщенность (снижаем до 0). Получаем итоговый результат – светящийся глаз.
Можно изначально было работать сразу с двумя с двумя глазами. Можно по аналогии проделать все операции с изображением второго глаза. Цвет, оттенки, яркость – все это корректируется и подбирается «на вкус» автора.
Неоновый текст
И завершим нашу подборку рассказом о том, как создать свечение текста. Он может стать частью логотипа, подписью к фотографии, вывеской и даже татуировкой на любую, самую изощренную фантазию.
Создаем новый слой, путем заливки закрашиваем в черный цвет (как это сделать, мы разобрали в предыдущих примерах). Для основы, на которой будет размещен текст, желательно использовать фон с относительно однородной структурой.
При помощи корректирующего слоя («Кривые») сделаем основу более темной, чтобы созданное нами свечение было заметным. Нажимаем на изображение маски.
Круглой мягкой кистью, (непрозрачность уменьшаем до 25 процентов) немного осветлим центр фона. Создаем еще маски с кривыми и понижаем значения по красному и зеленому каналам, увеличиваем знания по-синему, меняя кривизну шкалы. Таким образом, получаем своеобразный оттенок фона.
Собираем все слои в группу под названием «Фон». Теперь приступим к созданию самого текста. Нажимаем значок «Текст», выбираем в верхней части название и размер шрифта.
Стоить напомнить, что не все представленные в программе шрифты имеют русскоязычные варианты. Можно скачать и установить понравившийся русский шрифт.
Мы будем писать на латинице. Находим шрифт «Vivaldy», размер ставим 500 петит, так как у нас достаточно объемный фон. Переводим текст в смарт – объект. Для этого щелкаем по значку слоя с текстом и указываем на данную опцию.
Открываем зону работы с текстом. При этом его стилевые особенности остаются прежними. Используя клавиши Ctrl+J, копируем смарт – объект (1 копию).
Поместим слои в папку и назовем ее «Текст». Переходим на нижний смарт-объект, понижаем заливку до 0%. Заходим во вкладку «Слои», ищем «Стиль слоя», строку «Внутренняя тень». Находим цвет, соответствующий созданному тексту, указываем следующие значения.
Используем «Наложение цвета».
Подбираем один из оттенков синего. Затем работаем с внешним свечением. Выставляем следующие значения.
Далее, выбираем «Тень». Выставляем ее настройки.
Вот так теперь выглядит текст.
Берем следующую копию. По аналогии, снижаем до нуля заливку, обращаемся к стилю слоя. Отмечаем «Внутреннее свечение». Устанавливаем значения.
Также нам понадобится «Внешнее свечение».
Сохраняем результат. В итоге получаем объемный неоновый текст.
Итак, друзья, сегодня мы говорили о разных вариантах создания свечения в фотошопе и не менее различных способах его использования. Программа предоставляет массу возможностей грамотному пользователю. Осваивайте новое и удивляйте замечательными фотографиями!
Пишите в комментариях как вам понравился этот урок, будет интересно узнать ваше мнение. Еще больше уроков по фотошопу вы найдете вот тут. Улучшайте свои навыки в фотографии, смотрите мастеров, и развивайтесь.
Создайте новый документ в Фотошопе (Ctrl + N) размером 750х1000 пикселей. Выберите инструмент Ellipse Tool (U) и создайте круг диаметром 435 пикселей. Затем создайте копию слоя (Ctrl + J) и назовите её «Frame».
Шаг 2
На верхней панели выключите заливку у слоя «Frame» на верхней панели и сделайте обводку светло-серой толщиной 30 пикселей.
Шаг 3
Создайте круг диаметром 50 пикселей и назовите слой «Hand». Выберите инструмент Rounded Rectangle Tool (U), на верхней панели задайте радиус 35 пикселей и создайте фигуру размером 250х250 пикселей. Назовите слой «Plate».
Шаг 4
Выберите инструмент Rectangle Tool (U) и создайте фигуру размером 737х15 пикселей. Назовите слой «Wall» и создайте две копии. Первую назовите «Ceiling», а вторую — «Edge».
Шаг 5
Инструментом Horizontal Type Tool (T) напишите «Cafe» шрифтом «Nexa Rust». Цвет и размер шрифта не имеет значения, так как изменим его в виде 3D-сетки.
2. Создание 3D-слоёв
Шаг 1
Выберите каждый слой с фигурой и перейдите в меню 3D ? New 3D Extrusion from Selected Path. Для текстового слоя перейдите в меню 3D ? New 3D Extrusion from Selected Layer.
Шаг 2
Выберите все 3D-слои и перейдите в меню 3D ? Merge 3D Layers. Полученный слой назовите «3D Screne».
3. Настройка 3D-слоёв
Для работы с 3D-сетками нам понадобятся две панели: 3D и Properties. Они обе доступны в меню Window. На панели 3D находятся все элементы сцены. Когда Вы выбираете один из них, то на панели Properties появляются их свойства.
Шаг 1
Выберите каждую сетку и измените Extrusion Depth (глубину экструзии):
- Ellipse 1: 50
- Frame: 55
- Text: 25
- Hand: 500
- Plate: 50
- Wall: 1000
- Ceiling: 1000
- Edge: 50
Шаг 2
Для сеток Wall, Ceiling и Edge измените Texture Mapping на Tile.
4. Настройка свойства Cap
Выберите сетку Frame и настройте свойства во вкладке Cap: Bevel Width — 7%, Contour — Half Round. Затем сделайте то же самое для сетки Text, только Bevel With должен быть равен 10%.
5. Расположение 3D-слоёв
Шаг 1
Чтобы изменить расположение объектов на сцене, можно задать точные координаты, либо воспользоваться инструментом Move Tool (V). Выберите сетку Wall и перейдите во вкладку Coordinates, настройте углы вращения, как показано ниже.
Шаг 2
Теперь мы попробуем переместить объекты при помощи инструмента Move Tool (V). Как только Вы его активируете, увидите на верхней панели несколько режимов. Попробуйте каждый из них, чтобы понять, как они работают.
Шаг 3
Расположите объекты сцены и камеру, чтобы получить такой ракурс:
6. Материал дерева
Шаг 1
Выберите Ellipse 1 Front Inflation Material и на панели свойств кликните на иконке Diffuse, выберите пункт Edit Texture.
Шаг 2
У Вас откроется новый документ для текстуры. Создайте новый слой и перейдите в меню Filter ? Filter Forge ? Filter Forge 4. Выберите фильтр Grainy Wood и 9-ю установку. Нажмите на кнопку Apply.
Шаг 3
После появления текстуры, настройте её при помощи коррекции Levels (Ctrl + L). Сохраните документ (Ctrl + S) и закройте его.
Шаг 4
Измените остальные настройки материала, как показано на скриншоте:
7. Материал металла
Шаг 1
Выберите Front Inflation Material сетки Frame и измените текстуру через параметр Diffuse. При помощи фильтра Filter Forge 4 создайте текстурированный металл. Такую же текстуру нужно применить и для материалов Back Inflation Material и Extrusion Material.
Шаг 2
Выберите все материалы сетки Frame и настройте их:
8. Материал текста
На текст мы не будем накладывать текстуру. Вместо этого мы добавим на него цветовую заливку. Выберите все материалы сетки Text, кликните на иконке параметра Diffuse и выберите пункт Remove Texture. Установите для него цвет RGB (130, 101, 12). Для параметра Specular — RGB (89, 89, 89). Остальные настройки показаны на скриншоте.
9. Материалы крепления
Шаг 1
Выберите материалы сеток Plate и Hand и настройте их так:
Шаг 2
Исключите из выделения Plate Inflation Material, кликните на иконке Diffuse и выберите Frame Extrusion Material. Материал Plate Front Inflation Material нужно настроить отдельно. Примените к нему ту же металлическую текстуру, что и в последний раз.
10. Кирпичная стена
Шаг 1
Выберите материал Extrusion Material у сетки Wall. Примените для него текстуру кирпичной стены: 11-я установка.
Шаг 2
Шаг 3
Кликните на иконке Diffuse ещё раз и выберите пункт Edit UV Properties.
Поэкспериментируйте с параметрами Tile и Extrusion, чтобы получить наиболее удачный результат.
Шаг 5
Примените Wall Extrusion Material для параметра Bump, остальное настройте, как показано на скриншоте. При необходимости измените UV-свойства, чтобы они были такими же, как и у параметра Diffuse.
11. Материал потолка
Шаг 1
К материалу Ceiling Extrusion Material примените текстуру Wall1 — AngelBlame.
Шаг 2
Создайте корректирующий слой Hue/Saturation и сохраните документ.
Шаг 3
Настройте UV Properties текстуры.
Шаг 4
Выберите материалы сеток Ceiling и Edge. Примените к ним текстуру материала Ceiling и измените параметр Shine.
12. Настройка освещения
Шаг 1
Выберите Infinite Light 1 и настройте его, как показано ниже. Инструментом Move Tool (V) переместите свет на холсте.
Шаг 2
Выберите Environment и включите параметр IBL. Замените текстуру на Art Gallery Background и уменьшите Intensity.
Шаг 3
Добавьте новый точечный свет на сцену.
Шаг 4
Расположите новый источник света в правой верхней части вывески и измените цвет на RGB (248, 245, 237), остальные параметры на скриншоте.
Шаг 5
Поэкспериментируйте со светом и настройками.
13. Глубина резкости
Шаг 1
Измените расположение камеры до нужного Вам ракурса. Выберите элемент Scene и задайте установку Hidden Wireframe.
Шаг 2
Выберите ракурс Current View и измените параметр Depth. Distance подберите сами. Как закончите, выберите элемент Scene и выберите для него значение Default в списке Presets.
14. Размер рамки
Шаг 1
Сейчас мы сделаем рамку толще. Выберите сетку Frame и нажмите на кнопку Edit Source на панели свойств.
Шаг 2
Измените толщину обводки до 5pt. Сохраните документ.
Теперь видно, что обод стал толще.
15. Рендеринг сцены
Шаг 1
Перейдите в меню 3D ? Render, чтобы запустить процесс рендеринга. Вы можете остановить его в любой момент с помощью клавиши Esc.
Шаг 2
Чтобы немного улучшить освещение, создайте корректирующий слой Gradient Map.
Конечный результат:
В случае копирования урока указывайте автора и ставьте активную гиперссылку на наш сайт. Более подробную информацию вы можете получить в разделе «Правовая информация».
Читайте также: