Готовые баннеры для надписей — уроки фотошоп

Как создать баннер в программе Photoshop за 5 минут

Со временем, когда сайт набирает обороты, у него появляется неплохая посещаемость и растут показатели ТИЦ и PR, тогда веб-мастера начинает задумываться о рекламе своего проекта.

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

Кто-то скажет, что такими делами должен заниматься профессионал и незачем новичкам тратить свое время, лучше статью новую написать.

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

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

Как сделать баннер в Фотошопе за 5 минут

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

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

Далее надо определиться с размером будущего баннера, в основном используют размеры 468×60, 240×400. Мы будем делать баннер размером 468×60, для этого открываем «Меню» — «Файл» — «Создать» и выставляем размеры по ширине 468, по высоте 60.

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

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

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

В том окне, которое откроется задаете размеры и поставьте птичку в окне «сохранять пропорции». Бывает что у картинки есть свой фон, тогда вам нужно вырезать ее и сохранить с прозрачным фоном.

После всего проделанного перетаскиваем картинку на будущий баннер, а уже там поместим ее в нужном для нас месте и объединяем ее с фоном.

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

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

Теперь осталось сделать какую-нибудь надпись в фотошопе на баннере. Выбираем в панели инструмент «Текст» и пишем нужную фразу.

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

После всех процедур должно получится два шаблона:

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

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

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

Посмотрите что у меня получилось в итоге за 5 минут простой, а главное интересной работы.

Путь к этому баннеру будет иметь вид < img srс=" URL баннера на хостинге" >< /а>.

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

А если кто-то спросит, как сделать баннер для сайта в фотошоп, то вы уверенно сможете дать правильный ответ. Пока!

Источник: http://SEOslim.ru/webdizajn/kak-sdelat-banner-dlya-sajta-v-fotoshope.html

Как в Photoshop создать простой веб-баннер?

  • Сайтостроение
  • Статьи
  • Веб-дизайн
  • Photoshop
  • Баннер или шапка сайта HTML представляют собой графику, которая находится в верхней части сайта. На ней обычно отображается название компании. Часто это первое, что видит человек при посещении сайта. В этой статье мы расскажем, как с помощью Photoshop создать простой веб-баннер.

    Создание простого веб-баннера в Photoshop

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

    Разрабатываем простой веб-баннер в Photoshop

    1. Откройте новый документ. Открываем в Photoshop новый документ нужного размера:

    Новый документ

    1. Нарисуйте прямоугольник с помощью инструмента «Прямоугольная область». Перед тем, как сделать шапку сайта HTML, создайте на новом слое прямоугольник любого цвета:

    Прямоугольник

    Стиль слоя> Наложение градиента. Нажмите на стиль, а затем примените градиент:

    Стиль «Наложение градиента»

    1. Выбор формы кисти. После применения к прямоугольнику градиента и создания нового слоя поверх него, создайте выделение фигуры. Удерживая нажатой клавишу CTRL, кликните по фигуре прямоугольника. Активируйте кисть и настройте ее параметры, как показано на рисунке ниже. Зарисуйте одну сторону прямоугольника:

    Форма кисти, настройки кисти

    1. Создайте новый слой. Создайте новый слой и выберите инструмент «Овальная область». Измените настройки выделения и перетащите его на фигуру прямоугольника, как показано на рисунке ниже. Измените режим наложения на «Перекрытие», создайте еще два дубликата этого выделения:
    2. Инструмент «Эллиптическое выделение»

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

      Эллиптические фигуры

      Используйте кисть, чтобы удалить лишние области, поместите эти три слоя в группу и кликните по иконке маски слоя. Выберите любой размер кисти, но не очень большой. Установите «Жесткость» — 0%, «Непрозрачность» — 10%. Зарисуйте края этих эллипсов, чтобы смешать их, и уменьшите непрозрачность:

      Кисти — разработка простого баннера

      1. Выберите инструмент «Горизонтальный текст» и введите надпись шапки сайта HTML. Введите основную надпись баннера, а затем добавьте дополнительную информацию о сайте:

      Надпись на баннере

      1. Создайте новый слой и создайте тень баннера. Создайте новый слой, кликните кистью один раз в любом месте и установите тень внизу веб-баннера так, чтобы прозрачность составляла 50 или 40%:

      Тень веб-баннера

      1. Создайте новый слой ниже слоя баннера. Создайте новый слой ниже слоя баннера, как показано на рисунке ниже, и кликните один раз кистью белого цвета, «Жесткость» — 0%. Затем разместите эту светлую область на основном баннере и уменьшите непрозрачность слоя до 70%:

      Светлая область

      1. Поместите все слои в группу. Затем продублируйте эту группу и измените цвет градиента. Измените градиент и надпись баннера, как показано на рисунке ниже:

      Простой баннер

      Заключение

      Мы закончили создание шапки сайта HTML. Надеюсь, что эта статья оказалась полезной для вас.

      Перевод статьи «How to Design Simple Web Banner In Photoshop» дружной командой проекта Сайтостроение от А до Я.

    Источник: http://www.internet-technologies.ru/articles/kak-v-photoshop-sozdat-prostoy-veb-banner.html

    Дизайн наружной рекламы

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

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

    Если в полиграфии вы новичок, осваивать подготовку к печати вам лучше со статей:

    • Как сделать флаер (в трех частях)
    • Подготовка к печати за 10 минут

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

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

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

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

    • большие баннеры
    • очень-очень-очень большие баннеры.

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

    Простая математика пикселей —  даже чистый лист 10 на 5 метров в Фотошопе при разрешении всего 50dpi занимает 800MB и около 20 000 на 10 000 px. И это чистый лист. С графикой будут все 10 гигов. Чтобы оперативно работать с такими размерами, вам понадобится очень мощный компьютер. А исходной фаил таких размеров у вас никто не примет.

    В этой статье мы разберем вариант попроще. О подготовки крупных 10ти метровых баннеров мы поговорим в следующих статьях. В этой же статья мы сделаем квази дизайн небольшого уличного постера. Он не многим отличается об обычного постера размером A0, A1 или A2.

    Разница лишь в том, что он больше. Но и не такой большой чтобы работать не с оригинальными размерами 1:1. На самом деле идея этой статьи посетила меня утром, во время поездки на работу. На трамвайной остановке я как раз увидел уличную рекламу мясной продукции. Это и будет основой для нашей работы.

    Я подробно опишу настройки и ход работы.

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

    Материал для дизайна уличной рекламы

    В этом уроке у нас будет все. Вектор, растр. Вначале мы подготовим растровую графику в Фотошопе. Затем как обычно импортируем её в Иллюстратор и закончим дизайн нашей рекламы.

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

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

    В дизайнерской социальной сети deviantart.com я подыскал текстуру дерева в хорошем разрешении, автором которой является  Digital-amphetamine.

    Создаем новый фаил

    Мы начнем с создания новой рабочей области File > New. И я не знаю точные размеры этого плаката, но пускай это будут условные 1,5 метров на 2 метра. То есть в размерах устанавливаем 150 x 200 cm.

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

    Разрешение наружной рекламы

    Отдельно хочется поговорить о разрешении. Когда мы печатаем полиграфию вроде флаера, визитки или листовку, речь всегда идет о 300dpi то есть 300 пикселей на 1 дюйм.

    Чтобы мы не печатали, будь то книга, или каталог или просто листок бумаги — если рассматривать его будут с расстояния вытянутой руки 300dpi это та степень детализации, которая нам нужна.

    Кстати, если вы не очень понимаете, что такое dpi графики, то вам стоит прочитать мою статью Разрешение в Фотошопе.

    В случае более крупной графики количество Dpi уменьшается так же стремительно, как и увеличивается расстояние, с которого мы будем смотреть на эту графику. Для крупного постера формата А0 вы можете смело ставить от 150-200dpi. А для плакатов в вытянутый рост 90dpi.

    В крупной графике просто не требуется такая высокая степень детализации. Мы не смотрим на подобные постеры с книжного расстояния. Мы смотрим на них издали (5-20 метров).

    Поэтому в дизайне наружной рекламы, размер которой превышает несколько метров вы можете смело устанавливать 90dpi и даже меньше.

    Второй аспект — вес графики. При размере в 150 на 200 см и 300dpi пикселей на 1 дюйм у нас выходит около 17717 на 23622 пикселей. Вес такого плаката выходит в 1,17 гигобайт. Даже на самых крутых фотостоках вы не сможете найти фотографию более 4000-5000px по ширине.

    Но давайте избавимся от столь высокого и ненужного разрешение в 300dpi. При 90dpi и точно таких же размерах в 150 на 200 см мы имеем всего 5315 на 7087 пикселей. Вполне реальные размеры. Хотя скорее всего нам все равно придется немного увеличить нашу графику. Но насильное увеличение размера не будет столь заметно.

    Читайте также:  Рисуем в фотошопе виньетки для фото - уроки фотошоп

    Создаем дизайн для наружки

    В дизайне нашего плаката я буду придерживаться той же структуры что и в сфотографированном мною постере. Для начала откроем всю графику в Фотошопе. Можете сразу переключить раскладку окон на сетку. А далее инструментом Move Tool перетянуть графику на рабочую область уличного постера. Изображения уже отделены от заднего фона, что сильно экономит работу.

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

    Впрочем это не очень страшно, когда речь идет о крупных рекламных постерах.

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

    Я начну с заднего фона. Нажимая ALT и работая инструментом Move Tool я несколько раз продублирую текстуру дерева и сооружу из них следующий фон. Продублированные слои можно сразу слить вместе Layer > Merge Layers

    Далее я применю Free Transform к повару, немного увеличу его. Аналогично с мясом и зеленью. Мясо я разместил правее повара, зелень несколько раз продублировал и поместил под мясом.

    В заключении я выделил все слои и куски зелени и объединил их в один Smart объект. Я не стал сливать слои, так как на всякий случай не хочу их терять.

    С другой стороны меня интересует зелень как единый объект, поэтому мой выбор Смарт слой Layer > Smart Object > Convent to Smart Object.

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

    Сверху я положу кусок мяса, к которому тоже применю стиль слоя тени Drop Shadow, а за одно и к самому повару.

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

    Цветокоррекция наружной рекламы

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

    Он серый скучный, и это явно не тот максимум яркости, который нам может дать CMYK. Эффективность наружной рекламы упирается в её броскость и яркость.

    А это значит нам придется немного поработать с цветом и светом.

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

    Точно так же я создано новый пустой слой, и нарисовал уже белым цветом, большой кистью с мягкими краями области света. Этому слою я задам режим наложения Soft Light или Overlay. И того, вот наш деревянный фон до и после.

    Теперь я поработаю с поваром. Немного яркости через цветокорректирующий слой Brightness  и совсем чуть чуть контраста с помощью слоя коррекции кривых Curves. Так как повар находится на отдельном слое, я могу легко встроить коррекцию внутрь него, при помощи Layer > Create Clipping Mask. Вместо того чтобы создавать маску для каждого слоя.

    Тоже самое с зеленью и мясом. К зелени я подсоединил цветокорректирующий слой Levels, чтобы повысить яркость и контраст. К мясу я встроил 3 слоя. Две цветокоррекции Levels и Brightness. А так же один пустой слой, на котором я кистью нарисовал тень, и применил режим наложения Liniae Burn.

    В заключении я применю популярный прием шума, который создает подобие эффекта фильма, и в какой то степени скрывает насильное увеличение изображения. Для этого мне понадобится пустой слой, залитый серым цветом С50M50Y50K50, эффект шума Filter > Noise > Add Noise и режим наложения Overlay.

    Чтобы как-то объединить цветовое пространство можно использовать ещё один слой цветокоррекции Color Balance. Этот слой надо расположить над всеми слоями. А его эффект должен иметь действия на все цветовое пространство дизайна наружной рекламы.

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

    Верстка наружной рекламы в Иллюстраторе

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

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

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

    Даже самый маленький размер шрифта на уличном постере не будет меньше 5 см. А 5 см это 141 pt.

    То есть если для визитки, или флаера вы используете шрифты размером от 6-18pt, то для уличного постера шрифт менее 140pt будет просто не виден с расстояния более 1-2 метра.

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

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

    Перед импортом постера в Иллюстратор мы сохраним его в Фотошопе. Сохранив постер, я получил PSD фаил размером 1,1 гигобайт. Вот такие размеры. Не смотря на то что Иллюстратор прикрепляет растр через ссылки, это все равно слишком крупный фаил, чтобы встраивать его напрямую. Поэтому я сохраню его в TIFF прямо в фотошопе.

    В настройках TIFF фаила я выберу JPEG сжатие высокого качества. Только это уже снесет около 500Mb. Я так же выберу настройку слития всех слоев, чтобы ещё сильнее уменьшить фаил.  Итого, я получаю фаил TIFF размером в 70Mb что является разумным размером для пересылки фаила по FTP.

    Создаем рабочее пространство

    Для рабочего пространства в Иллюстраторе я выберу 150 на 200 см и 2см на обрезку. Учитывайте так же, что эти 2 см нужно заложить в дизайн изначально. Но если вы этого не сделали, можете смело растянуть прямо в Иллюстраторе. Ничего страшного не случиться. И и без того увеличили изображение повара на 200-300% от его изначального размера.

    Окончательная верстка наружного постера

    Вставляйте изображение через File > Place. Объект можно сразу заблокировать на панели Layer. Теперь я нарисую прямоугольник и задам ему следующий стиль на панели Appearance.

    Основная белая заливка. Темно оранжевая заливка на самом верху с живым эффектом Effect > Path > Offset Path. Этот эффект сделает оранжевую заливку меньше. А так же две окантовки ниже заливок.

    Далее инструментом Type Tool напишем текст, к которому применим фильтр Effect > Stylize > Drop Shadow. Размер шрифта около 330pt

    Я так же нарисовал прямоугольник по форме наружной рекламы и поставил ему белую окантовку толщиной 150 pt. В настройках Stroke для этой окантовки я настроил пунктирную линию 100pt длина черточки и 50pt длина промежутка.

    Ну и чтобы закончить работу я сохраню постер в PDF. В диалоговом окне сохранения выбираем PDF/X-1a:2001.

    В вкладке Marks and Bleeds ставим галочку Use Documents Bleed Settings и Trim Marks. Отличными от сохранения маленькой полиграфии будут и настройки самих линий реза.

    Вместо 0,25pt поставьте 0,50pt — это толщина линии реза. В качестве отступа поставьте 20мм.

    Вот и все. Дизайн наружной рекламы готов к употреблению. Итоговый вес моего фаила получился 60MG. К сожалению по понятным причинам я не могу приложить к статье ни его, ни гиговый PSD исходник. Теперь вы знаете как подготовить к печати дизайн наружной рекламы. Удачи в экспериментах!

    Источник: http://hronofag.ru/2012/04/26/street-adv-design/

    Обзор бесплатного видеокурса «Баннера в Photoshop своими руками»

    Всем привет! Клуб Offerinvest продолжает заниматься «ликвидацией безграмотности» среди его участников. И в его рамках появился очередной обучающий бесплатный видеокурс  под названием «Баннера в Photoshop своими руками», автором которого выступает Владимир Фирсов.

    Создать баннер в фотошопе

    Имя Владимира Фирсова достаточно давно «на слуху»: он является создателем баннеров для проектов клуба Offerinvest – это хостинг Offerhost и биржа фриланса Offerlancer.

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

    На мой взгляд, все баннера выполнены очень профессионально: без сомнения у Владимира Фирсова есть дизайнерский талант!

    Кроме этого совершенно случайно по какому-то запросу уже достаточно давно я наткнулась на канал Владимира Фирсова на Ютуб под названием Info Navigator. Любите смотреть обзоры тренингов и курсов?  – добро пожаловать на канал Владимира! И что меня очень приятно удивило – Владимир Фирсов является владельцем магазина мягких игрушек в Санкт-Петербурге Большой-мишка. рф.

    Видеокурс “Баннера в Photoshop своими руками”

    Теперь возвращаемся непосредственно к видеокурсу «Баннера в Photoshop своими руками». И если уж вас заинтересовала данная статья, значит, вы ищите ответ на вопрос как сделать баннер самостоятельно.

    Понятно, что лучше Владимира – человека, который непосредственно занимается данной деятельностью, объяснить  этот материал не сможет никто. Видеокурс Владимира Фирсова «Баннера в Photoshop своими руками» включает в себя полных 12 видеоуроков по созданию баннеров в фотошопе.

    Сейчас в Интернете часто можно встретить такую фразу «много- мало воды» в отношении курсов, тренингов и т.д.

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

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

    Во втором уроке Владимир знакомит нас программой Фотошоп. Естественно официально она предлагается в платном варианте с бесплатным тестированием в 30 дней. Но все знают, что скачать ее можно и бесплатно, если хорошенечко «пошерстить» в Интернете. Я всегда в таких случаях пользуюсь Ютубом.

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

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

    Лично для меня это была очень нужная информация! Когда-то я пользовалась специальными сервисами в Интернете в качестве эксперимента для создания анимированных баннеров, но, как оказалось, создавать в фотошопе анимированные баннера не так уж и сложно. А возможно просто Владимир Фирсов очень хороший «учитель»)).

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

    Читайте также:  Пиксельная графика в реальной жизни - уроки фотошоп

    И этой теме посвящен пятый и шестой урок видеокурса «Баннера в Photoshop своими руками». В 5 уроке Владимир проводит анализ стоимости рекламных баннеров, а в 6 – объясняет, как можно заработать на создании баннеров.

    И здесь вам в помощь будет биржа фриланса Offerlancer.

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

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

    Или скачайте данный курс с главной страницы биржи фриланса Offerlancer.ru (внизу).

    ○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○○

    Возможно, Вас заинтересуют следующие статьи:

    ○ Как установить баннер на сайт

    ○ Offerinvest: клуб по созданию множественных источников дохода

    ○ Биржа фриланса Offerlancer

    Денежные ручейки

    Источник: https://denezhnye-ruchejki.ru/kak-sdelat-banner/

    Заработок на создании баннеров: как сделать и заработать

    Описание: наверное каждый видел рекламные баннеры на сайтах. Многие рекламодатели не умеют сами создавать их, поэтому им нужна помощь. Но заработок на создании баннеров доступен не каждому. Нужно уметь работать в программах и знать основы создания баннеров.

    Оплата: в среднем 1000 рублей за баннер.

    Требование: уметь работать в программах Photoshop или CorelDraw

    Заработок на баннерах

    В основном создание баннеров заказывают владельцы сайтов или интернет-магазинов. Все хотят привлечь к себе внимание, а зазывающие картинки действуют очень эффективно. Но многие не знаю, как сделать рекламный баннер, так что заказывают у фрилансеров эту услугу. Вы можете стать одним из исполнителей – начните с самых простых типов баннеров (JPEG и GIF), а потом научитесь и более сложным.

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

    Формат изображений: используют в основном JPEG (статичная картинка) и GIF (сменяющиеся картинки).

    Если с JPEG все понятно (это самый распространенный файл), то про GIF многие слышали только понаслышке или рассматривая «гифки». Они создаются с помощью программ (к примеру, GIF Animator). Для работы нужно несколько картинок, который будут последовательно сменяться. Посмотреть пример gif-баннера можно внизу страницы.

    Размеры баннеров

    Типы баннеров

    1. Статический (jpeg, png)– простое изображение, в котором нет анимации.
    2.  GIF-баннер (динамичный) – используется несколько изображений, которые последовательно сменяют друг друга. Что-то вроде мини-рекламного ролика на 5 секунд.Для его создания используется несколько картинок, чтобы создался эффект плавности движения. Но желательно, чтобы размер не превышал 3-5 кб.
    3. Flash-баннеры (интерактивный) – самый востребованный тип, но и сложный для создания. Такой рекламный баннер сделать может далеко не каждый, но и цена на него соответствующая. Его создают в Adobe Flash, используя векторную графику. Желательный вес – 50-100 кб.В них можно добавить звуковые эффекты и обычно внешний вид таких баннеров намного привлекательней, чем у обычных. Кроме того, их можно создавать интерактивными (глаза следят за мышкой, при наведении меняется картинка и др.)

    Заработок на создании баннеров

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

    1. Тип баннера – понятно, что стоимость на статичный баннер и flash-баннеры будут сильно различаться. Нужно оценить временные затраты на создание разных типов и определиться с ценой.
    2. Количество баннеров.

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

    В принципе это логично, ведь ваша работа уменьшается почти вдвое.

    Ориентировочные расценки*:

    Статичный – от 100 рублей; GIF-баннер – от 1000 рублей

    Flash-баннер – от 2000 рублей

    Как сделать рекламный баннер

    Рассмотрю вариант создания самого просто статического баннера – продажа инфопродукта.

    Для работы нам понадобится Photoshop. Откройте и создайте новый проект (Файл-новый) с размерами поля 200х300.

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

    • Добавить фоном картинку (просто перетащите на поле нужную картинку);
    • Добавить один цвет;
    • Залить градиентом (один цвет переходит в другой).

    Я выбираю третий вариант. Для этого нужно выбрать на панели инструментов (слева) на верхнее поле Цвета (два белых листа). Появится Палитра цветов, в которой мы можем выбрать нужный цвет.

    После этого нажмите на нижний листок, который остается белым, и выберите цвет для него. Делается точно так же.

    Найдите на панели инструментов Заливка, нажмите правой кнопкой мыши (ПКМ) и выберите Градиент. Теперь на белом холсте (наш баннер) проведите вертикальную линию сверху вниз. Просто нажмите наверху левой кнопкой мыши (ЛКМ) и, не отпуская ее, проведите до самого низа.

    Фон готов. Теперь нужно закинуть картинку товара (или другое изображение по теме). У меня нет никаких книг и товаров для продажи, так что я поищу в интернете.

    Источник: https://xn--80aaacq2clcmx7kf.xn--p1ai/zarabotok-na-sozdanii-bannerov-kak-sdelat-i-zarabotat

    Как сделать красивый баннер в фотошопе. Как сделать баннер в фотошопе

    Всем привет! Баннер – это анимированная картинка небольших размеров, изображения которой, как правило, поочередно меняются. Чаще всего баннер состоит из 3-4 изображений, каждое из которых демонстрируется несколько секунд.

    Анимированные (gif, flash) баннеры отлично привлекают внимание посетителей сайта, а это значит, что трафик можно перенаправлять с одного ресурса на другой.

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

    Программы для создания баннера

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

    1. Ulead Gif Animator
    2. Banner Maker Pro 7.0.5
    3. Banner Designer Pro 5.0
    4. Easy GIF Animator

    Каждая из них имеет свои достоинства и недостатки, описывать которые нет смысла. Я рекомендую попробовать все (они небольшие – каждая занимает около 25 МБ), а остановиться на самой удобной, на ваш взгляд.

    Easy GIF Animator

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

    Первым делом вам нужно будет скачать данную программу в интернете – выбирайте нужную версию, подходящий язык, скачивайте и начинайте работать (я, к примеру, использую русифицированную версию «5 PRO»).

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

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

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

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

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

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

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

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

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

    На этой странице рассматривается создание баннера в фотошоп в формате GIF (анимированный баннер photoshop) . Аналогично можно создать анимированный баннер в Corel Photo Paint или в программе Corel Paint Shop Pro Photo. Баннер в Corel Draw можно создать только статический, т. к.

    программа не поддерживает анимацию. Ссылку в изображение (баннер) в программе Фотошоп вставить нельзя, в отличии от CorelDraw. Примеры созданных анимированных GIF баннеров в Photoshop можно посмотреть в галерее в разделе мои баннеры . Урок создание анимации в фотошоп.

    Создание анимированного баннера в Photoshop. Рассмотрим 3 приема создания GIF анимации в фотошоп. Анимированный баннер

    Анимация текста, Переключение слоев, 3. Затухание (переход).

    Создание движущегося текста в фотошоп.

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

    Так как Adobe Photoshop это программа для работы со слоями растровой графики, то она даст нам возможность создавать растровые изображения с анимацией слоев и сохранением в формате GIF, который поддерживает анимацию.

    Кнопки и инструменты Adobe Photoshop, которые нам понадобятся для создания баннера анимация движущийся текст: кнопки меню ФАЙЛ, ОКНО, ПРОСМОТР, панель инструментов, инструменты ТЕКСТ, окна АНИМАЦИЯ, СЛОИ, СИМВОЛ.Создаем новый документ — кнопка ФАЙЛ — в раскрывающемся меню жмем НОВЫЙ.

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

    На панели инструментов слева жмем кнопку текст (Т ) и на поле документа набираем текст, допустим «ТЕКСТ» для последующей анимации движения еще раз набираем второе слово «ТЕКСТ» на таком расстоянии от первого, чтобы второе слово вышло за пределы баннера справа (стало невидимым).

    Настройки текста можно задать в верхнем меню — жмем кнопку ОКНО — в раскрывающемся меню жмем СИМВОЛ — в окне меню СИМВОЛ задаем нужные параметры текста: шрифт, размер, цвет и т.д.

    Создание анимации текста в фотошоп

    В верхнем меню — жмем кнопку ОКНО — в раскрывающемся меню жмем АНИМАЦИЯ — в окне меню АНИМАЦИЯ видим первый кадр.

    Для создания анимации необходимо несколько кадров. В окне АНИМАЦИЯ снизу слева от кнопки корзины жмем кнопку в виде листа и создаем копию кадра. На обоих кадрах задаем время отображения кадра (допустим 0,2 сек, но можно подобрать под нужную скорость в соответствии количеством промежуточных кадров для себя).

    Нажимаем на второй кадр и в окне СЛОИ нажимаем на слой с нашим текстом для активации слоя. Если нет по краям окна программы линеек для создания направляющих — в верхнем меню — жмем кнопку ПРОСМОТР — в раскрывающемся меню жмем ЛИНЕЙКИ. Нажимаем на левую линейку и, не отпуская, тянем (по умолчанию голубенькую) направляющую к началу текста.

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

    В окне АНИМАЦИЯ внизу слева от кнопки создание нового кадра нажимаем на Добавление промежуточных кадров, в открывшемся окне задаем количество промежуточных кадров, допустим 10 с параметром «предыдущий кадр» (чем больше кадров зададим, тем плавне будет движение анимации, но, соответственно, увеличится вес изображения баннера) жмем ДА. По идее анимация готова. Теперь надо проверить анимацию. В окне АНИМАЦИЯ жмем на кнопку воспроизведение анимации и просматриваем в основном окне программы на баннере движение текста.

    Читайте также:  Космическое сияние - уроки фотошоп

    Если все устраивает — сохраняем — жмем ФАЙЛ — сохранить для web устройств. Перед сохранением нужно чтоб активный кадр был первым на готовом баннере (с него начнется анимация) или задать кадр для начала анимации.

    При сохранении для веб устройств открывается окно, в котором задаем формат GIF (только формат GIF для анимации!) если надо выбираем количество цветов colors (чем меньше оттенков, тем легче баннер), для данного черного текста хватит 8 цветов. Цикличность (looping option) оставляем forewer (без остановки).

    В этом окне сохранения для веб устройств можно поменять размер баннера — уменьшим — 100 на 50. Здесь же можно просмотреть результат анимации. Если все устраивает — жмем Save и указываем место сохранения баннера, допустим на рабочий стол. Назвать для последующей загрузки на сайт необходимо латинскими буквами, например banner_text.

    Просматриваем готовый баннер и если устраивает — можно загружать на сайт. Такой же эффект движения можно сделать не только с текстом, но и с частью изображения (объектом).

    Второй способ создания анимированного баннера в Adobe Photoshop.

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

    Создадим 2 слоя с разными изображениями.

    Слой 1 и слой 2. Создаем в окне анимации 2 кадра. Задаем время показов. В первом кадре оставляем включенный слой 1, слой 2 выключаем. Просматриваем анимацию и сохраняем для веб устройств в формате GIF. Для более точной передачи цветовой гаммы выставляем количество цветов 256.

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

    Опять создаем 2 слоя, но не выключаем их, а применяем функцию прозрачности. Создаем 3 кадра. В кадре 1 первый слой непрозрачность 100%, во втором кадре слой 1 непрозрачность 0%. В 3 кадре слой 1 опять непрозрачность 100%. Между тремя кадрами создаем необходимое число промежуточный кадров и получаем эффект перехода изображения.

    Уменьшение размера gif анимации (баннера) в Фотошоп

    Что делать, если необходимо уменьшить размер анимированного баннера (изображения), а нет PSD исходника? Напряпрямую готовый гиф со слоями в фотшоп не откроешь. Это можно сделать в Corel Photo paint. Как уменьшить размер анимированного gif баннера в фотошоп ? Тут надо знать маленькую хитрость.

    В Фотошоп gif анимацию загружаем через меню ФАЙЛ — импортировать — кадры видео в слои. На данном этапе и начинается фокус. Во первых, на компьютере должен быть установлен Quick Time Player. Во вторых, в открывшемся окне загрузки сразу наш gif не найти (по умолчанию-видео форматы).

    Чтобы найти наш баннер, необходимо в строку ИМЯ ФАЙЛА в окне поиска Фотошоп при импорте написать расширение гиф следующим образом — «*.GIF» без кавычек.

    Нажимаем загрузить и вдруг появляется в окне наш баннер в формате гиф! Выбираем его и жмем загрузить еще раз. Появляется окно, с предустановкой От начала до конца, где устанавливаем галку — Создать покадровую анимацию — жмем ДА!. В итоге наш gif баннер загрузился со всеми слоями. Осталось изменить размер изображения и сохранить для веб устройств опять же в формате gif как в прошлый раз.

    Видео наглядно показывает создание анимированного баннера.

    Источник: https://bazava.ru/how-to-make-a-beautiful-banner-in-photoshop-how-to-make-a-banner-in-photoshop.html

    Как сделать анимированный баннер в Фотошопе 33

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

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

    А ещё быть может вы хотите привлечь внимание к своему инфопродукту. В любом случае, если нужно сделать баннер, то это можно сделать в графическом редакторе Photoshop.

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

    Я же хочу рассказать, как сделать баннер своими ручками от А до Я в графическом редакторе Photoshop.

    Что потребуется для создания баннера

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

    Разумеется, вам потребуется изображение. Изображение – это основа всех баннеров. В зависимости от тематики баннера, изображения легко найти в интернете.

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

    Выбор размера баннера

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

    Поэтому я советую использовать именно стандартные размеры баннеров:

    88 x 31;  100 x 100;  120 x 60;  120 x 90;  125 x 125;  120 x 240;  120 x 600;  160 x 600;  180 x 150;  234 x 60;  240 x 400;  250 x 250;  300 x 250;  300 x 600;  336 x 280;  468 x 60;  500 x 100;  600 x 90;  728 x 90; 970 x 90.

    Размеры приведены в пикселях (px). Первая цифра – ширина, вторая – высота. Выбирайте размер исходя из расчёта размещения баннера.

    Процесс создание баннера

    Итак, допустим, я решил сделать баннер 300 x 300 для своего бесплатного курса «Как набрать текст голосом». Это нестандартный размер, но для своего блога я могу использовать этот размер, так как знаю где его разместить.

    Открываем графический редактор фотошоп и создаём новое изображение с размерами 300 х 300 пикселей.

    Пункт меню «Файл»«Новый» — задаёте размер и жмёте кнопку «Да» или «ОК».

    Создать новое изображение

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

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

    Я создал 4 слоя с изображениями. Точнее, одно с изображением и три с текстом.

    Готовим слои для анимации

    Теперь нужно включить отображение панели «Анимация». Для этого открываем пункт меню «Окно»«Анимация».

    Подключаем панель анимации

    В панели «Анимация» будет отображаться один кадр с текущим слоем. Отображение остальных слоёв следует временно отключить (убрать пиктограмму «глаз» напротив слоя).

    Первый кадр

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

    Второй кадр

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

    Промежуточные кадры

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

    Промежуточные кадры

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

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

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

    Сохранение баннера

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

    Выбор формата gif

    В результате у вас получится подобный баннер.

    Как установить баннер на сайт

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

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

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

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

    Для этого открываем административную панель WordPress – «Внешний вид»«Виджеты» — тип виджета «Текст».

    Виджет

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

    Вставка кода в виджет

    Готово, — наслаждаемся плодами своего труда.

    А теперь смотрим видеоурок, в нём вы увидите всё наглядно и многие вопросы решаться сами собой.

    Друзья, на этом сегодня всё. Я желаю вам удачи и хорошего настроения! До встречи в новых статьях.

    С уважением, Максим Зайцев.

    Источник: https://1zaicev.ru/kak-sdelat-animirovannyj-banner-v-fotoshope/

    Рисуем красивый баннер в Adobe Photoshop — Уроки Photoshop

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

    Шаг 1: Создайте новый документ размером 500х300 пикселей, цвет заднего фона – белый.

    Шаг 2: Используя RectangleTool(значение Radius: 5 px) сделайте тень (цвет тени #6d9e1e), как на рисунке ниже.

    Шаг 4: После этого примените для текущего слоя Gradient Overlay с настройками как на рисунке ниже:

    Вы должны получить вот такой результат:

    Шаг 5: Растрируйте слой с тенью, после этого инструментов RectangularMarqueeToolвыделите область, как на рисунке ниже и примените к выделенной области градиентную заливку.

    После градиентной заливки у вас должен получиться приблизительно такой эффект:

    Шаг 6: Теперь мы добавил на наш баннер графический элемент. В уроке мы будем использоваться вот эти часы (скачать картинку будильника)

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

    Шаг 7: Для того, чтобы придать часам больше резкости воспользуйтесь инструментом SharpenTool.

    Шаг 8: Теперь, при помощи инструмента HorizontalTypeTool напишем текст в шапке баннера. Например «SPECIAL OFFER!».

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

    Вы получите вот такой эффект:

    Шаг 9: Перейдем к украшению нашего баннера и добавлению в него нескольких небольших штрихов. Воспользуемся инструментом CustomShapeToolи стандартной тенью из поставки Adobe Photoshop и расположим на баннере два «солнца», как на рисунке ниже.

    Шаг 10: Объедините два слоя с тенями в один. Теперь нам нужно избавить от части теней за пределами нашего баннера.

    Нажмите Ctrl+ leftclickна иконке объединенного слоя с тенями в панели слоем для того, чтобы появилось выделение.

    После этого инвертируйте выделение (Ctrl+Shift+I) и нажмите Delete для очистки выделенной области.

    Снимите выделение с слоя, нажав Ctrl+D. После этого поставьте значение наложения для слоя на SoftLight и Opacity 20%.

    Шаг 11: Теперь мы должны избавиться от ненужных элементов (часть тени) в шапке баннера. Для этого, используя инструмент RectangularMarqueeTool, выделите область как показано на рисунке и нажмите Delete для очистки.

    Внимание! Во время выполнения этих действий вы должны находится на слое с тенями.

    После удаления снимите выделение, нажав Ctrl+D.

    Шаг 12: Снова используем инструмент HorizontalTypeTool. Пишем текст как на рисунке ниже.

    Шаг 13: Последние штрихи в работе над баннером. Используя инструмент RoundedRectangleTool(ставим значение Radius в 2 px) рисуем тень (цветом 69990d) как на рисунке ниже.

    Снова используем инструмента HorizontalTypeTool и добавляем текст на только что созданную полоску.

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

    Источник: http://psd.by/risuem-krasivyj-banner-v-adobe-photoshop/

    Ссылка на основную публикацию