Меню

Как сделать бумагу для писем в фотошопе



Как сделать крутой баннер в Photoshop для email рассылки (пошаговое руководство)

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

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

Где брать идеи для создания баннера?

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

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

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

  • Pngtree (огромная база бесплатных изображений и готовых шаблонов).
  • Freepik (немного меньше, чем Pngtree).
  • Pixabay (лучший фотосток, есть поиск и доступны разные размеры для скачивания).
  • IM Free (есть поиск, но архив не такой большой, как у Pixabay).
  • Pickupimage (в тройке лидеров среди стоков).
  • Creative Commons Search (это скорее не сток, а поисковик по стокам, но иногда очень здорово выручает).

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

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

Пошаговая инструкция по созданию баннера для емейл-рассылки интернет-магазина

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

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

А теперь самое интересное

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

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

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

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

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

Рабочий документ готов, ничего сложного, не так ли?

Если все сделано правильно, должен открыться документ с исходными параметрами по высоте и ширине.

Основные элементы интерфейса Photoshop, с которыми нам предстоит работать:

  • Рабочая область, в которой отображаются все графические элементы при создании баннера.
  • Панель “Инструменты”.
  • Панель “Слои” со структурой документа, в которой последовательно будут отображаться графические элементы.

Перетягиваем изображение в рабочую область:

В рабочем документе и на панели “Слои” появится изображение. Эти действия нужно подтвердить клавишей Enter или галочкой, я ее тоже отметил на скриншоте.

Пройдемся по инструментам, с которыми будем работать:

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

Работа с фоном картинки

Инструментом “Перемещение” двигаем изображение к краю рабочей области:

Фон, на котором находится девушка, мне нравится, но что делать, когда цвет фона не подходит к общему оформлению емейл-рассылки? Для этого нужен “ластик”, а точнее “волшебный ластик”. Выбрать его можно нажатием правой кнопки мыши по ластику.

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

Читайте также:  Как сделать домик из бумаги и картона для монстер хай

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

Жмем по голубому фону, если вы все правильно сделали, фон должен удалиться.

Удаляем таким же способом оставшийся фон с изображения.

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

Цвет выбрать можно на панели инструментов.

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

Создаем текст и призыв к действию

Для добавления текста выбираем соответствующий инструмент:

После выбора инструмента “Шрифт” появится панель с настройками его параметров (тип шрифта, размер, дополнительные параметры).

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

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

Для этого, с помощью инструмента “прямоугольник”, рисуем кнопку и добавляем нужную надпись.

Если в дальнейшем нужно изменить размер кнопки, сделать это можно с помощью комбинации клавиш CTRL+t, изначально выделив слой с кнопкой на панели “Слои”. Потянув за нужный угол, можно растянуть кнопку по ширине и высоте. По завершению подтвердит действие “ок” или Enter.

Цвет кнопки можно изменить двойным щелчком мыши по слою с кнопкой.

Если текст не отображается, нужно на панели “Слои” выделить текстовый слой и переместить его выше слоя с кнопкой.

Чтобы расположить текст по центру кнопки, выделяем слой с текстом и кнопкой с помощью клавиши CTRL на панели “Слои”.

Включаем инструмент “Перемещение”, на появившейся панели центрируем текст относительно кнопки.

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

  • Выбираем слой с кнопкой, нажатием правой кнопкой мыши из выпадающего меню выбираем “Параметры наложения”

2. В появившемся окне включаем “тень”

3. Меняем значения:

  • непрозрачность в пределах 60-70%;
  • смещение — 10-20 пикс;
  • размер — 50-60 пикс.

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

Последние штрихи и баннер готов!

Давайте на панеле инструментов выберем эллипс:

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

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

Настройки тени выбираем такие :

  • непрозрачность — 25%;
  • смещение — 3%;
  • размер — 15%.

Осталось только добавить логотип.

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

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

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

С помощью нашего редактора вы сможете:

  • без труда добавить кнопку, текст и даже видео в шаблон емейл письма;
  • работать с несколькими слоями, и это не вызовет у вас трудностей и дискомфорта;
  • использовать готовые элементы (меню, разделители, соц. сети), которые имеют ряд функциональных и визуальных настроек;
  • создать свой собственный баннер с помощью блока “Баннер”, когда под рукой нет Photoshop.

Источник

Создаём текстуру бумаги

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

Такую текстуру бумаги мы получим в конце урока:

Создаём текстуру бумаги

1. Создайте новый документ размером 1280x1024px. Сразу залейте фон любым цветом, отличным от белого (иначе бумажный лист на первых шагах сольётся с фоном). Возьмите Rectangular Marquee Tool (Прямоугольное выделение) и сделайте выделение в форме будущего листа бумаги:

Читайте также:  Как сделать букет из разных бумаг

2. Нажмите Q для активации режима быстрой маски. Теперь Filter (Фильтр) -> Pixelate (Пикселизация) -> Crystalize (Кристаллизация) со значение Cell Size (размер ячейки) 7px. Вновь нажмите Q для выхода из режима быстрой маски. Создайте новый слой (Shift+Ctrl+N) и заполните выделение белым цветом. Теперь снимите выделение (Ctrl+D):

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

3. Идём в Filter -> Texture (Текстура) -> Texturizer (Текстуризатор) с такими параметрами:

4. Идём в стиль слоя (двойной клик по нему в панели слоёв). Ставим такие значения Drop Shadow (Отбрасывание тени):

5. Наведите курсор на эффект отбрасывания тени в панели слоёв, нажмите по нему правой кнопкой мыши и выберите Create Layer (Создать слой)

Это отделит слой с тенью от текстуры бумаги:

6. Перейдите на слой с тенью, нажмите Ctrl+T (Свободная трансформация), кликните правой кнопкой мыши и выберите Warp (Деформация). Отредактируйте форму слоя с тенью таким образом:

Это создаст эффект того, что кончики текстуры бумаги находятся на некотором расстоянии от поверхности:

7. Теперь возьмите линейный градиент, установите режим смешивания Difference (Разница). Создайте новый слой и примените на нём множество чёрно-белых градиентов. Это должно выглядеть примерно так:

8. Как вы наверно догадались, эти градиенты послужат для создания помятостей на бумаге. Идём в Filter -> Stylize (Стилизация) -> Emboss (Тиснение) и устанавливаем такие параметры:

9. Нажмите Ctrl+L для вызова меню редактирования уровней и сдвиньте тёмные и светлые тона ближе к центру:

Теперь нажмите сочетание клавиш Ctrl+Alt+G для создания Clipping Mask. Непрозрачность слоя установите 10%:

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

Источник

Текстура старой бумаги в Фотошоп

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

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

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

Шаг 1

Начнем с создания нового документа. Для этого, войдите в меню Файл – Новый ( File > New).

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

Шаг 2

Измените цвет документа, воспользовавшись меню Редактирование – Выполнить заливку ( Edit > Fill).

В открывшемся окне в параметре Использовать (Use) из выпадающего списка выберите Цвет (Color).

В окне выбора цвета выберите светло-коричневый, установив значения R 211 , G 178 и B 140 и нажмите ОК.

Вы увидите, что документ заполнен светло-коричневым цветом:

Шаг 3

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

Созданный пустой слой будет назван Layer 1:

Шаг 4

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

Теперь примените фильтр Облака (Фильтр – Рендеринг – Облака / Filter > Render > Clouds):

Этот фильтр не имеет настроек – он добавит облака в случайном порядке:

Шаг 5

Теперь примените фильтр Разбрызгивание (Фильтр – Штрихи – Разбрызгивание / Filter > Brush Strokes > Spatter):

Перед Вами появится диалоговое окно Галереи фильтров (Filter Gallery) с окном предварительного просмотра слева и параметрами настройки справа. Установите те значения, которые видите на сриншоте:

Шаг 6

Измените режим наложения слоя с облаками на Перекрытие ( Overlay). Уменьшите непрозрачность слоя приблизительно до 15%, чтобы проявить облака сквозь цвет:

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

Шаг 7

Создайте новый слой (Shift + Ctrl + N) – этот слой будет назван Layer 2.

Шаг 8

К этому новому слою также примените фильтр Облака (Фильтр – Рендеринг – Облака / Filter > Render > Clouds):

Шаг 9

Также, добавьте пятна, применив фильтр Аппликация (Фильтр – Имитация – Аппликация / Filter > Artistic > Cutout):

В окне настройки фильтра установите те значения, которые показаны на скриншоте:

После применения фильтра Ваш документ будет выглядеть так:

Шаг 10

Измените режим наложения второго слоя с облаками на Перекрытие (Overlay) и уменьшите непрозрачность до 10-15%.

Так выглядит документ после добавления пятен:

Шаг 11

Удерживая нажатой клавишу Alt, кликните по верхнему слою правой кнопкой мыши и выберите пункт Объединить видимые (Merge Visible):

Читайте также:  Как сделать новогодний шарик из бумаги вырезать 3 шара

Обычно, после выбора команды Объединить видимые (Merge Visible), выполняется сведение всех существующих слоев. Но, если удерживать нажатой клавишу Alt, будет создана объединенная версия всех существующих слоев на новый слой. Этот слой появится над всеми слоями:

Шаг 12

Шаг 13

Затем, большой кистью с мягкими краями, затемните края документа. Для изменения размера кисти используйте клавиши: ( [ ) – для уменьшения размера кисти, ( ] ) – для увеличения размера кисти. Если нужно изменить жесткость кисти, воспользуйтесь этими же клавишами, только при нажатой клавише Shift.

Для достижения наилучшего результата, постарайтесь держать курсор кисти инструмента Затемнитель (Burn Tool) на серой рабочей области, чтобы затемнить только края.

Если Вы ошиблись, отмените последнее действие, нажав клавиши Ctrl + Z.

Источник

Компью А рт

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

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

2 Помещаем текст в новый слой.

3 Заменяем шрифт на каллиграфический. В данном примере это GE Quilt Script.

4 Инструментом Move Tool перемещаем блок текста на середину листа.

5 Настраиваем расстояние между строками, включив панель управления Character (меню Window > Character) по своему усмотрению. В данном примере использована величина 20 pt .

6 Настраиваем кегль шрифта; в нашем примере это 27.

7 Растеризируем слой с текстом (панель управления слоями; Rasterize Layer).

8 Выделяем весь слой с текстом и копируем его.

9 Помещаем скопированный текст в новый слой.

10 Инструментом Move Tool перемещаем текст так, чтобы он с небольшим смещением перекрывал первый слой с текстом.

11 Применяем к слою фильтр Colored Pencil (меню Filter > artistic > Colored Pencil), выставив Stroke Pressure на максимум, Paper Brightness на минимум, а Pencil Width оставив примерно на 5-7.

12 Придаем буквам более чернильный оттенок. Открываем диалоговое окно Hue/Saturation (меню Image > Adjustments > Hue/Saturation) и настраиваем параметры следующим образом: Hue – 212, Saturation – 74, Lightness – +4.

13 Отключаем видимость слоя с листком пергамента, щелкнув по пиктограмме глаза в панели управления Layers, и склеиваем слои с текстом (Ctrl+Shift+Alt+E).

14 Снова включаем видимость слоя с пергаментом и дублируем новый слой (меню Layer > Duplicate Layer).

15 Открываем диалоговое окно Layer Style (меню Layer > Layer Style), выбираем функцию Stroke, Fill Type устанавливаем на Color. Щелкнув по прямоугольнику с цветом, выбираем темно-синий оттенок.

16 Устанавливаем Size на 2, Position на Outside, Blend Mode на Hard Light, а Opacity оставляем на 100%.

17 Отключаем видимость верхнего слоя, возвращаемся к слою Layer 1 и слегка изменяем его цвет с помощью настройки параметров Hue/Saturation (меню Image > Adjustments > Hue/Saturation). Включив режим Colorize, устанавливаем Hue на 300, а Saturation — на 80.

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

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

20 То же самое проделываем на слое Layer 1.

21 Отключаем видимость слоя с пергаментом и объединяем все слои с текстом (Ctrl+Shift+E).

22 Снова включаем видимость слоя с пергаментом и открываем диалоговое окно Liquify.

23 Инструментом Turbulence Tool с помощью большой кисти создаем небольшие искажения: текст не должен быть идеально ровным. Особенно важно уделять внимание заглавным буквам: они не должны выглядеть абсолютно одинаково.

24 Добавляем искажения с помощью нескольких других инструментов: Forward Wrap Tool, Bloat Tool и Pucker Tool. Размер и интенсивность нажатия кисти регулируем по своему усмотрению.

25 Инструментом Eraser Tool аккуратно стираем часть буквы, оказавшуюся поверх сложенного уголка.

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

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

Источник