Как сделать билборд в фотошопе
Обновлено: 05.07.2024
Один из новых инструментов, появившихся в Фотошоп СС 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 пикселей.
Подскажите как выполнить дизайн широкоформатного баннера (330см х 140см - на Газель)?
1. Именно интересует настройка при создании документа. Я , так понимаю CMYK, 150 (72 наверное мало, 300 много) dpi? Ширина и высота 1к1? Т.е. 330 см на 140 см?
2. Сам визуальный дизайн не интересует.
3. И настройки печати (файла) при сдачи в студию печати. TIFF?
4. Минимальное разрешение фото?
Догадываюсь что такие штуки нужно делать в люстре, векторно.
Оценить 6 комментариев
Много раз уже так было, поэтому теперь я сразу посылаю за требованиями, а сам пока делаю макет в Индизайне. Я всю полиграфию делаю там ибо удобно, а потом экспортирую в нужный формат.
Не каждая типография еще и допечатку бесплатно делает)) А Indesign это одно из приложений Adobe (наряду с Photoshop, Illustrator и т.п.).
Я не ответил на поставленные вопросы, потому и написал в комментарий, так что это и не ответ =)
Для широкоформатной печати ставь 72 dpi, для интерьерной - не менее 144.
Приучивай себя к миллиметрам, ставь 3300 на 1400 мм. В настройках смотри, чтобы stroke тоже измерялся в миллиметрах. Следи, чтобы линии были не тоньше 0,35 мм (а для других более качественных технологий печати - не менее 0,1 мм), размер мелкого шрифта тоже выбирай, сперва замерив толщину тонких штрихов в нём - иначе плохо пропечатается или вообще не пропечатается.
Не забудь макету дать рамочку в 0,5-1 мм толщиной, не очень заметную, по которой будут резать баннер. Важную информацию отводи от края не меньше чем на 50 мм - как выше сказал ИдиИубей, лучше иметь запас, чтоб криворукий постпечатник не попортил дизайн.
Желательно следить за суммой красок. В широкоформатной печати это конечно не столь важно, как например в оффсете, НО частенько рекламно-производственные фирмы используют либо краски на основе птичьего помёта, либо оборудование сделанное из птичьего помёта, и краски могут потечь. Я стараюсь делать так, чтобы сумма красок в каждой точке не превышала 290-310% (C+M+Y+K).
Проверить макет на сумму красок поможет InDesign, в люстре вроде бы нет такой полезной вещи. Либо можно держать в уме все накладывающиеся друг на друга заливки и мысленно вычислять сумму красок - для простого дизайна сойдет. Просто надо с осторожностью миксовать слои.
Не используй очень светлые заливки. Я обычно стараюсь не опускаться ниже 5% - такой цвет может тупо завалиться в белый.
Все эти заморочки зависят от пряморукости типографии. А на их пряморукость как правило не стоит рассчитывать.
Файл сдавать можно и как TIFF. Главное, какой бы ты формат не выбрал, следи, чтобы он был в цветовой модели CMYK. Я обычно сдаю исходник, PDF и jpeg/tiff (проще jpeg на максимальном качестве - тиффу он не уступает, и его можно просмотреть обычным просмотрщиком).
Реклама сейчас на каждом шагу вокруг нас, и вполне возможно, что однажды вам потребуется изобразить ее на уровне пикселей. Сегодня мы расскажем, как превратить обычное изображение в его изометрический пиксельный аналог на билборде.
1. Пропорции
Сначала мы нарисуем рекламный щит. Для определения высоты стойки билборда, мы используем рисованного пиксельного человечка.
Шаг 1
Высоты стойки щита в четыре « человечка » будет достаточно:
Шаг 2
Ширину стойки мы установим примерно равной росту человечка:
Шаг 3
Завершаем контур стойки. В нижней части мы замыкаем его кривой, чтобы придать стойке цилиндрический вид:
Шаг 4
После этого мы создаем очертания самого билборда:
Шаг 5
Залейте контур цветом:
Шаг 6
С помощью теней придайте стойке объемности:
Наш холст готов.
2. Адаптация изображения
Изометрические пиксельные изображения не должны выглядеть реалистично, поэтому перед размещением фотографии на билборде ее нужно трансформировать. Тогда ее стиль будет соответствовать стилю всего изображения.
Шаг 1
Сначала я добавил название гамбургера. На самом плакате будут и другие надписи, и все их лучше будет добавить непосредственно в пикселях:
Шаг 2
Под таким же градусом расположите и сам рекламный щит. Я советую вам сделать слой плаката поверх билборда немного прозрачным, чтобы вы могли видеть под ним края щита:
Шаг 3
Вы можете дополнительно обрезать и изменить изображение. В этом шаге я постарался добиться, чтобы гамбургер и текст были пропорционально размещены в пределах холста билборда:
Шаг 4
Залейте всю область щита красным цветом, и выделите более светлую полосу в верхней части билборда:
3. Надписи
Сначала создадим название бургера, которое состоит из больших букв.
Шаг 1
Шаг 2
Шаг 3
Шаг 4
Сотрите несколько пикселей, и вы получите нужное слово:
Шаг 5
Сгладим слово Clogger и добавим небольшую тень:
Шаг 6
Я решил создать очень простой значок, напоминающий известный логотип сети ресторанов быстрого питания.
Шаг 7
Затем поместите последний набор букв на билборд:
Можно объединить все надписи билборда в одном слое.
4. Трассировка и преобразование в пиксели
Для трассировки гамбургера создайте новый слой поверх всех предыдущих слоев и начните работу на этом новом слое.
Шаг 1
На этом слое я прочертил черными линиями контуры булочек. При этом используйте как можно более ровные линии:
Шаг 2
Можно залить контуры черным цветом, чтобы получить однотонную фигуру, а затем залить ее цветом, который вы хотите использовать для булочек:
Шаг 3
Добавим небольшую каемку по внутренним сторонам булочек, которые всегда светлее:
Шаг 4
Шаг 5
Основная идея заключается в том, чтобы сделать фигуры более простыми, а также уменьшить количество цветов, поэтому добавим еще один темный участок и один светлый, и этого будет достаточно:
Шаг 6
Добавим на булочки семена кунжута с помощью светлых пикселей с более темной тенью снизу. Вы можете сначала создать тени на отдельном слое черным цветом, а затем уменьшить непрозрачность слоя:
Шаг 7
Все котлеты на изображении будут одинаковыми, поэтому в качестве образца нам достаточно создать только одну:
На время отключите видимость слоя оригинальной фотографии, чтобы « без помех » оценить вид всех частей созданного пиксельного изображения.
Шаг 8
Наши две котлеты, уже залитые цветом и без отвлекающего исходного изображения:
Шаг 9
Давайте придадим объем одной из котлет: сделаем ее более светлой сверху и темной снизу. В отличие от большинства остальных пиксельных объектов, для этих элементов мы не будем использовать темные контуры:
Шаг 10
Завершите создание теней и скопируйте их для второй котлеты. Затем на новом слое вам нужно добавить текстуру мяса. Она не должна быть сложной:
Шаг 11
Структура мяса должна быть тонкой, поэтому отрегулируйте непрозрачность, а затем сведите слои:
Шаг 12
Добавим в бутерброд сыр. Сначала нарисуйте по верхнему краю котлет линию из желтых пикселей:
Шаг 13
Теперь создадим уголки сыра, опускающиеся на котлету.
На снимке видно, что большие « языки » сыра одинаково расположены на обеих котлетах, только они выступают в разных местах и имеют немного разную позицию:
Шаг 14
Добавьте сыру немного теней. Края должны быть светлее, а правая сторона темнее. Небольшая тень, отбрасываемая сыром на котлету, придаст ему объем и контрастность:
Шаг 15
Теперь переходим к овощам. Их структура будет схожа с их расположением на исходном изображении:
Шаг 16
Дальше с помощью теней придадим всем овощам объемный вид: делаем их светлее в центре и еще светлее в самом верху. С помощью разных светлых участков на слое зелени мы отображаем различные начинки. То же самое для белого соуса:
Шаг 17
В завершении работы со слоем овощей я добавил тень, чтобы отделить и сделать их немного ярче. Это просто темная линия вдоль верхнего края каждого элемента:
Шаг 18
В середине бургера лежат несколько колечек лука. На новом слое сделаем базовые формы для них. Создайте что-то типа волнистых завитушек:
Шаг 19
Волнистые фигуры будут представлять колечки, поэтому они должны быть толще в середине и тоньше по краям, где они скрываются под другой начинкой. Заполните остальную часть пространства более темным, красным цветом:
Шаг 20
Добавьте для колец небольшие тени, а также несколько ярких пикселей, похожих на блики света:
Все кольца лука можно разместить на одном слое:
Шаг 21
В конце мы создадим нижний слой начинки. Элементы, составляющие начинку можно размещать в произвольном порядке, но они должны быть квадратной формы. Некоторые фрагменты могут сливаться. Их все нужно создать на новом слое:
Шаг 22
Затем создайте рядом с этими квадратами другие, более темно-красного или коричневого цвета, по краям слоя они могут быть еще темнее:
Шаг 23
Добавьте небольшую тень. Самые темные линии помогают создать объем, но они не должны очерчивать контуры:
Шаг 24
Как и для колечек лука, добавьте несколько светлых бликов, похожих на блестящий жир:
Теперь я объединяю все элементы бургера в один слой.
Шаг 25
И в завершении я добавил тень, отбрасываемую гамбургером:
Наш билборд готов.
Теперь вы знаете, как превратить фотографию в изометрическое пиксельное изображение. Надеюсь, статья окажется полезной для вас.
Здраствуйте.
Самый большой вопрос по корелу у меня - как в нем делать широкомасштабные билборды /баннеры и пр. размером, скажем 3X6 м.
Видео на русском языке практически нет на ютуб. Наверное это связано с тем, что на маке нет корела.
Ладно если мы делаем какой-то примитивный баннер с 2-мя полосочками и надписью, это все можно отрисовать в кореле с нуля и оно будет векторное и хорошо масштабироваться под любой размер.
А если нужно вставить например картинки или фото уже готовые какие-то в баннер. Их же не будешь искать специальные векторные. Просто скачанные с интернета растровые размером, например 500X1000 пикселей пойдут картинки для этих целей?
Как они будут выглядеть при увеличении в 10-15 раз? Они же растянутся на пиксели, или корел эти картинки тоже как-то векторизирует?
Вот например баннер (фото) , предположим, что он сделан в Кореле. Как они сделали Гарольда в таком большом масштабе без потери качества?
Основным выходом является подбор изображений хорошего разрешения.
"корел ни векторизует автоматически вставленные Вами растовые изображения"
Tiff - CMYK 8 бит, без слоев (все изображение должно быть сведено в единственном слое Background), без дополнительных альфа-каналов (Channels), без путей (Paths)
Векторные файлы не являются готовыми к печати и в работу принимаются только после дополнительной подготовки за отдельную оплату.
Если Вы сделали макет в CorelDRAW, Adobe Illustrator или какой-либо другой векторной программе, экспортируйте его в формат TIFF (CMYK). Откройте и проверьте размер изображения и значения цветов в Adobe Photoshop.
Разрешение растровых файлов:
- Для печати с разрешением 360 dpi – 35-50 dpi. Для изображений 3х6 м и более, достаточно 35 dpi, при размере файла не более 100 Mb
- Для интерьерной печати с разрешением 720 dpi – 70-100 dpi. Для изображений, состоящих только из фотографий - 70 dpi, для изображений, содержащих текстовые элементы - 100 dpi, при размере файла не более 200 Mb
- Для интерьерной печати с разрешением 1440 dpi – 100-200 dpi. Для изображений, состоящих только из фотографий - 100 dpi, для изображений, содержащих мелкий текст (менее 5 мм) - 200 dpi, при размере файла не более 400 Mb
Для уменьшения размеров файлов используйте LZW компрессию или архивирование (обязательно при пересылки файлов по Интернету).
Увеличение разрешения свыше рекомендуемого приводит к неоправданному увеличению времени и трудоемкости обработки исходного файла и печати изображения при не меняющемся качестве получаемого изображения.
Рекомендации по выбору разрешения печати:
- 360 dpi – для изображений, использующихся на улице и просматриваемых с расстояния более 3-5 м
- Интерьерная печать 720 dpi – для изображений, использующихся в помещениях и на улице, просматриваемых с расстояния менее 1,5-2 м, содержащих текстовые элементы менее 30 мм
- Интерьерная печать 1440 dpi – для изображений, использующихся в помещениях, просматриваемых с расстояния менее 1,5 м, содержащих текстовые элементы менее 10 мм
Критерием определения цвета служит не принтерная распечатка и не отображение макета на мониторе компьютера, а процентное соотношение цвета (CMYK) в каждой конкретной точке изображения. Для контроля цветопередачи мы предлагаем изготовление цветопроб на тиражном материале. Претензии по цветопередаче без подписанной цветопробы не принимаются.
Цветоделение файлов RGB в CMYK мы рекомендуем производить со следующими настройками Color Settings программы Adobe Photoshop:
- Ink Colors: Toyo Inks(Coated)
- Dot Gain: 8 %
- Separation type: GCR
- Black Generation: Medium
- Total Ink Limit: 300 %
- Black ink Limit: 100 %.
- Для получения насыщенного черного цвета рекомендуется делать его композитным (C50; M50; Y50; K100)
При наличии белого фона по краям изображения необходимо обозначить границы контуром 60% серого толщиной в 1 пиксель.
Сопроводительная информация должна быть представлена в письменном виде и содержать:
- Название файла
- Точные размеры изображения (ширина х высота в мм)
- Материал, на котором необходимо печатать изображение
- Разрешение печати
- Количество
- Какая требуется постпечатная обработка (люверсы, проклейка, резка и т.п.)
- Дополнительные требования (припуск фона, поля и т.п.)
Corel, Illustrator, не важно. Некоторые кмопании требуют исключительно растровый формат в печать, с определённым dpi.
Александр, устройства печати в итоге все равно печатают «растр» – точку за точкой. У растрового изображения есть размер: сколько-то точек по ширине, по высоте. Есть понятие «разрешения»: сколько точек помещается на дюйм физическо величины (dots per inch, "dpi").
Картинку 1000 х 1000 точек можно напечатать на 1 квадратном дюйме, и тогда разрешение её будет 1000 dpi. А можно на 1 метр на 1 метр, и тогда её же разрешение окажется всего 25.4 dpi.
Векторный макет возможно, весит меньше, легче файл, и позволяет растеризировать / печатать его с любым разрешением. Но векторный макет, где шрифты и кривые линии, допустим, векторные кривые, может так же содержать растровые вставки. Скажем, фото.
Тут надо найти исходное фото в разрешении не ниже того (или не значительно ниже), в котором предполагается печатать.
На видео, очевидно, уже растровый макет – все изначально векторные фигуры «отрастрировали» - перевели в точки-пиксели.
Александр, ну не совсем. Там явно дилетант который никогда на практике дела не имел. Фотки берутся в 300 DPI и банально растягиваются. Фото растянутое в 2 раза становится уже 150 DPI.
НО, да, как он делает - можно использовать. У него 300DPI и 4к.Х2к. пикселей. При ресайзе в 150 DPI - это станет уже 8к.Х4к. При ресайзе в 96 - еще больше. Но я не уверен за такой подход. Ты не знаешь конечный результат. Тут надо высчитывать исходя из реального размера билборда. + да, использование RGB - это ошибка.
Для билбордов вполне хватает 96 dpi. На таком расстоянии от глаз - шумов от ресайза тупо не видно. Вот и ответ. Надо изначально подбирать изображение с высоким DPI чтобы минимизировать потери при увеличении.
Нет, шикороформатники в массе своей в ФШ не делают. Из-за таких вот условностей. Но тут уже зависит от руки мастера. Умеешь? -Красава. Дерзай. Нет? - здуй в люстру и делай тоже самое в векторе. Можно подготовить изображение для него в фш, но потом все равно перенести этот подготовленный для ресайза растр в корел или люстру. Те эффекты, которые можно сделать в фш - на выходе в исходнике дадут тебе просто огромный размер (При условии что комп еще вывезет).
Тот пример что скинул ты - это не билборд. Такое - да. Вполне можно сделать и в фш. На фотостоках этого типа спокойно можно найти в 300 DPI. Тут, скорее всего макет был в 150, потому что близко к глазам. Его просто растянули и все. Для глаза это незаметно.
Ресамплинг - это программное увеличение. Когда например твой 1 черный пиксель превращается в 4. Но для его корректной работы, ну или хотя бы +- хорошего результата, надо всегда придерживаться правила х2. 1 пиксель легко превратить в 4. А вот 1 пиксель в 5 - уже вопрос. "Откуда программе знать, с какой именно стороны добавить этот 5й пиксель".
"а в по умолчанию все кривые (фигуры) и шрифты в векторной графике? " - фотошоп НЕ векторный редактор. Он умеет работать с вектором, но не умеет его выводить. Твоя прямоугольник который был вектором в макете, на выходе будет обычным растром. SVG - который умеет сохранять фотошоп, это банальный png запихнутый в svg.
Вот в pdf да, там он умеет текст переводить в реальные кривые. Но это всё.
Александр, Ну допустим что финальный макет билборда должен быть 3х6 с 96 dpi.
Ты хочешь сделать его в фш. Но не будешь же ты 3х6 реальных метра там делать - у тебя все повиснет.
Тебе надо уменьшить рабочую область, начинаешь считать. 3х6/2 = 1.5х3. Размер уменьшается - а DPI увеличивается. Значит уже ты можешь делать макет 1.5метра Х 3 метра с (96х2=192DPI). Все равно много? - верно, много. Опять уменьшаешь. 1.5х3 /2 = 0.75х1.5 (192х2=384DPI) - с этим уже можно спокойно и комфортно работать в фш. Потому что ты знаешь, что при ресамплинге в 4 раза, у тебя получится 3х6 с 96 dpi. Поэтому и надо знать заранее требования типографии. Спрашивать - как в финале будут выводить. К сожалению, нет "золотого" DPI, он всегда разный в зависимости от расстояния до глаз. +все типографии не выставляют для текучки печать на максимальное качество. Экономят краски и время.
Я для билбордов использую 96 т.к это для меня золотая середина. Это не 40, но и не 150. Если ниже - это уже прям для очень больших или отдаленных объектов. Ну просто я люблю четкую картинку. А так, обычно у нас для билбордов печатают в 40 dpi.
Читайте также: