Содержание
Как сделать баннер в фотошопе? Пошаговое руководство
Баннер или шапка сайта HTML представляют собой графику, которая находится в верхней части сайта. На ней обычно отображается название компании. Часто это первое, что видит человек при посещении сайта. В этой статье мы расскажем, как сделать баннер в фотошопе.
Создание простого веб-баннера в Photoshop
Начнем с готового баннера. У нас есть базовый пример, используемые в нем цвета успокаивают глаза. Его можно размещать на сайте, посвященном моде и стилю, а также для персонального блога. Следуйте приведенным ниже инструкциям:
Разрабатываем простой веб-баннер в Photoshop
Откройте новый документ. Открываем в Photoshop новый документ нужного размера:
Новый документ
Нарисуйте прямоугольник с помощью инструмента «Прямоугольная область».
Перед тем, как сделать шапку сайта HTML, создайте на новом слое прямоугольник любого цвета:
Прямоугольник
Стиль слоя> Наложение градиента. Нажмите на стиль, а затем примените градиент:
Стиль «Наложение градиента»
Выбор формы кисти. После применения к прямоугольнику градиента и создания нового слоя поверх него, создайте выделение фигуры. Удерживая нажатой клавишу CTRL, кликните по фигуре прямоугольника. Активируйте кисть и настройте ее параметры, как показано на рисунке ниже. Зарисуйте одну сторону прямоугольника:
Форма кисти, настройки кисти
Создайте новый слой. Создайте новый слой и выберите инструмент «Овальная область». Измените настройки выделения и перетащите его на фигуру прямоугольника, как показано на рисунке ниже. Измените режим наложения на «Перекрытие», создайте еще два дубликата этого выделения:
Инструмент «Эллиптическое выделение»
Измените режим смешивания на «Перекрытие». Перед тем, как сделать баннер в шапку сайта HTML, переместите три дубликата, созданных ранее, и поместите их в соответствующих местах.
Измените их режим наложения на «Перекрытие». При этом обратите внимание, чтобы они не вышли за пределы прямоугольника:
Эллиптические фигуры
Используйте кисть, чтобы удалить лишние области, поместите эти три слоя в группу и кликните по иконке маски слоя. Выберите любой размер кисти, но не очень большой. Установите «Жесткость» — 0%, «Непрозрачность» — 10%. Зарисуйте края этих эллипсов, чтобы смешать их, и уменьшите непрозрачность:
Кисти — разработка простого баннера
Выберите инструмент «Горизонтальный текст» и введите надпись шапки сайта HTML. Введите основную надпись баннера, а затем добавьте дополнительную информацию о сайте:
Надпись на баннере
Создайте новый слой и создайте тень баннера. Создайте новый слой, кликните кистью один раз в любом месте и установите тень внизу веб-баннера так, чтобы прозрачность составляла 50 или 40%:
Тень веб-баннера
Создайте новый слой ниже слоя баннера. Создайте новый слой ниже слоя баннера, как показано на рисунке ниже, и кликните один раз кистью белого цвета, «Жесткость» — 0%.
Затем разместите эту светлую область на основном баннере и уменьшите непрозрачность слоя до 70%:
Светлая область
Поместите все слои в группу. Затем продублируйте эту группу и измените цвет градиента. Измените градиент и надпись баннера, как показано на рисунке ниже:
Простой баннер
Заключение
Мы рассказали вам как сделать баннер в фотошопе. Надеюсь, что эта статья оказалась полезной для вас.
Вадим Дворниковавтор-переводчик статьи «How to Design Simple Web Banner In Photoshop»
Как подготовить макет баннера для печати?
Как подготовить макет баннера для печати?
Не каждая типография готова предложить своим клиентам качественную и недорогую разработку дизайна баннеров. Если у вас ограничен бюджет или есть желание сэкономить, то создание макета можно осуществить самостоятельно. В программе Photoshop есть для этого все необходимое: установка размеров, возможности работы со шрифтами, цветовой гаммой и графическими объектами. Как же правильно создать макет, используя фотошоп?
Важные параметры для макета баннера
Подготавливая изображение, учитывайте:
- размеры полотна;
- разрешение картинки;
- отступы по краю полотна;
- сумму красок;
- формат готового файла.
Если с подготовкой макета вы работаете первый раз, то требуемые размеры и другие параметры можно выяснить, если позвонить в типографию, в которой вы планируете заказать печать баннера. Также, можно придерживаться некоторых общепринятых правил.
Разрешение и размеры для печати баннера
В зависимости от назначения макета, его показатели различаются:
- Стандартный городской формат баннера (1,2 на 1,8 метров) необходимо разрешение 75-150 dpi
- Полотно более крупное, например, 3 на 6 метров или больше, требуют 35-45 dpi
- Полотно с рекламным изображением для фасада здания (брандмауэр) печатается с разрешением менее 20 dpi
Стоит отметить, что для печати широкого формата достаточно разрешения в 72 dpi, а для интерьерной печати необходимо не менее 144 dpi и выше. Начиная работу в программе с баннером, первым делом следует правильно выставить размер. Измерения чаще всего считаются в миллиметрах. Самая малая толщина линий может быть от 0,35 мм.
Мелкие шрифты при изготовлении баннера применять нельзя.
Требования к отступам
Изготавливая макет, следует предусмотреть отступы, по которым будет обрезано готовое полотно баннера.
- Как правило, рамка должна быть толщиной от 0,5 до 1 мм
Важно! Всю полезную информацию и изображения размещайте не ближе, чем в 50 мл от края полотна, поскольку в обратном случае, она будет плохо смотреться или может быть отрезана.
Сумма красок
Если собираетесь отдавать макет в непроверенную типографию, обратите внимание на этот параметр.
- Их сумма должна быть до 310 процентов для каждой из точек, по формуле CMYK
Можно более точно проверить сумму, если открыть макет в программе InDesign. Если же её у вас нет, постарайтесь аккуратно совмещать слои в Photoshop, без наложения друг на друга.
Формат файла
Лучше всего, перед обращением в типографию, сохранить готовый макет в одном из следующих форматов
- cdr
- eps
- tiff
Также, желательно иметь при себе jpeg файл с изображением макета и его бумажный образец.
Если придерживаться вышеперечисленных рекомендаций, работа над макетом баннера не займет много времени, и в результате, вы сэкономите на работе дизайнера и создадите макет, который будет целиком соответствовать требованиям типографии.
Как создать баннер в Photoshop
Это краткое руководство по созданию баннера поможет людям с небольшим опытом в дизайне или без него сделать его самостоятельно. Выполняйте эти простые шаги один за другим, и вы получите готовый к печати баннер в кратчайшие сроки.
Создать новый документ В Photoshop выберите «Файл» и «Создать».
Откроется окно «Новый файл», в котором вы можете выбрать все свойства вашего баннера. Выберите размер (мы выбрали 8 футов на 2 фута) и разрешение (в данном случае достаточно 120 пикселей/дюйм, учитывая, что этот баннер будет виден с расстояния примерно 10 футов). Чем дальше будет стоять зритель, тем ниже может быть разрешение. Таким образом, вы не получите массивный файл.
Если вы не уверены, какое разрешение выбрать, обратитесь к своему принтеру.
Убедитесь, что ваш цветовой режим CMYK. Этот режим используется для печати, а фоновое содержимое установлено на белый цвет для белого фона.
После того, как вы нажмете кнопку OK, откроется такой слой.
Шаг 2
Вставьте изображение Выберите файл и место
Откроется окно места. Выберите изображение по вашему выбору и нажмите «Поместить».
Выбранное изображение появится на вашем баннере вот так.
Чтобы переместить изображение, просто нажмите и перетащите. Чтобы изменить его размер, наведите указатель мыши на один из его углов, пока курсор не примет вид двусторонней стрелки. Совет. Удерживайте клавишу Shift и перетащите, чтобы пропорционально изменить размер.
Повторяя процесс, вы можете добавить столько изображений, сколько захотите. Здесь мы добавили логотип.
Если вы хотите изменить размер фотографии после ее размещения, выберите «Редактировать», затем «Свободное преобразование».
и ограничительная рамка снова появится.
Шаг 3
Добавление текста Выберите инструмент «Текст» в боковом меню.
Щелкните в любом месте баннера, чтобы начать печатать.
После того, как вы закончите, подтвердите действие так же, как при размещении изображений.
Чтобы переместить текст, выберите слой, на котором он находится (справа от вас), и инструмент перемещения в меню слева, затем щелкните и перетащите.
Повторите процесс, чтобы добавить текст, если необходимо.
Вы можете изменить размер текста так же, как вы изменили размер изображения (Правка> Свободное преобразование), и перемещать его с помощью инструмента «Перемещение».
Шаг 4
Изменение цвета фона
Выберите инструмент ведро с краской в меню слева и фоновый слой. Выберите цвет либо из образцов, либо из цветового микшера.
Просто нажмите на баннер, чтобы изменить цвет фона.
Шаг 5
Сохранение файла Выберите «Файл», затем «Сохранить как…»
Откроется окно «Сохранить как». Сначала сохраните файл в формате Photoshop, чтобы вы могли вносить в него любые изменения в будущем.
Затем перейдите к слою — сведите изображение и повторите процесс (Файл>Сохранить как…) и сохраните его в формате Photoshop PDF. Это файл, который вы доставите на свой принтер. Щелкните Сохранить.
Откроется новое окно «Сохранить Adobe PDF». Убедитесь, что вы выбрали «Высокое качество печати» в качестве предустановки.
Как изменить размер изображения баннера в Photoshop
Это промежуточная тема и идеально подходит для тех, кто чувствует себя комфортно в работе с
CMS и другие инструменты дизайна. Вместо этого просмотрите темы для начинающих или продвинутых.
Нашли фотографию, которую хотели бы использовать в области баннера на своей странице? Большой!
Вам не нужно использовать изображение баннера, но это будет отличать ваши страницы от
остальные. Мы также рекомендуем использовать изображения баннеров только на основных страницах индекса.
На веб-сайте UNC PhotoShelter имеется обширная коллекция изображений. Вы можете просматривать изображения по галерее или ключевому слову. Используйте пароль «Медведи» для загрузки
изображение.
В зависимости от того, как вы нашли фотографию, может быть два разных способа загрузки
изображение:
Из галереи
Где-нибудь еще
В любом случае, вы должны выбрать опцию «JPEG — исходный размер», чтобы получить самое высокое качество
скачать.
Поскольку баннеры страниц очень короткие, вы хотите выбрать простое изображение без
очень плотный урожай.
Дополнительные советы по фотографии можно найти в разделе «Баннеры страниц» Руководства по веб-стилю.
Если вы не хотите беспокоиться о правильном изменении размера документа в Photoshop,
Вы можете загрузить шаблон изображения баннера, представленный в разделе «Баннеры страниц», а также в Руководстве по веб-стилю.
Начало работы
Вы можете создать новый документ Photoshop размером 1600 пикселей в ширину и 440 пикселей в высоту. Убедиться
чтобы установить разрешение 72 пикселя/дюйм в цветовом режиме RGB.
Если вы используете шаблон, просто откройте загруженный ранее файл.
Затем перетащите загруженное изображение на документ в окне Photoshop.
Когда вы это сделаете, вы окажетесь в режиме трансформации. Вы можете изменить размер изображения, нажав
SHIFT+OPTION на Mac или SHIFT+ALT на ПК, одновременно перетаскивая один из
углы (это делает так, что размер изображения изменяется пропорционально его ширине и
высоту, оставаясь в центре полотна).
Затем вы можете разместить изображение
стараясь полностью закрыть холст документа.
После этого обязательно щелкните значок галочки или нажмите клавишу ВВОД на клавиатуре, чтобы поместить
изображение. Вы можете вернуться в режим преобразования в любое время, используя COMMAND + T на Mac.
или WINDOWS+T на ПК.
Вы можете узнать больше об использовании инструмента Transform на веб-сайте Adobe.
Сохранение изображения
Теперь, когда ваше изображение размещено правильно, важно сохранить его в Интернете.
формат. Для этого выберите «Файл» > «Экспорт» > «Сохранить для Интернета (предыдущая версия)». Это может быть расположено
в другом месте в зависимости от вашей версии Photoshop. Если вы не можете найти его, обязательно
дайте нам знать.
Затем выберите предустановку «JPEG High» и измените качество на значение около 60.