Обновление пароля

 > Журнал > Мастер-Классы > Создание информативного баннера

Создание информативного баннера

15.08.2011 22:37     Просмотров: 10732     Комментариев: 26     
Виды творчества:   Фотография и видео
Сложность:   средняя
Время работы:   1 час

Здравствуйте, дорогие мастерицы и мастера, а также покупатели и все, кто интересуется обработкой фотографий в редакторе PHOTOSHOP.


Предлагаю Вашему вниманию свой очередной мастер класс, который поможет Вам создать ИНФОРМАТИВНЫЙ баннер, тоесть такой, который отразит Ваше кредо, выразит основную идею Вашего магазина, баннер, который содержит 90 процентов текста.

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

Прежде всего, если у Вас еще нет баннера, предлагаю обдумать ОСНОВНУЮ МЫСЛЬ. Если хотите юмора, можете воспользоваться сервисом генератор слоганов, например Ваш магазин будет называться "ЗОЛОТЫЕ НОЖНИЦЫ" или "ЗОЛОТЫЕ РУКИ" или просто "МАГАЗИН МАСТЕРА АННЫ".

И, достижения:

Болит голова? День не задался? Магазин золотые ножницы - именно то, что тебе нужно!
Магазин ЗОЛОТЫЕ НОЖНИЦЫ удовлетворит все твои желания.
Магазин ЗОЛОТЫЕ НОЖНИЦЫ и мир станет проще.
Магазин золотые ножницы - почувствуй нашу любовь!
Магазин ЗОЛОТЫЕ НОЖНИЦЫ - выбор президентов.
С любимым хорошо, а с магазин золотые ножницы ещё лучше!


Теперь приступим непосредственно к созданию баннера.

Познакомимся с его свойствами.

Баннер имеет размеры: 760 x75. Смотрите фото.

Итак, сохраняем любой баннер на рабочем столе и открываем его в редакторе.

Выделив все содержание баннера инструментом ПРЯМОУГОЛЬНАЯ ОБЛАСТЬ удаляем содержимое, для того чтобы оставить белый фон. Либо создаем новый графический файл таких размеров самостоятельно.

photoshop

У вас появился чистый баннер нужного размера.

редактирование фото

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

баннер

Как я уже говорила, наш баннер будет информативным, поэтому на нем мы расположим несколько надписей - две или даже три, а еще постараемся уместить небольшое украшение в виде фигуры.
Убедитесь, что у Вас открыто окно СЛОИ в редакторе. Если нет, то откройте его: ОКНО - СЛОИ.
Выделите инструментом ТЕКСТ ту область баннера, на которой мы впишем наш слоган.

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

Выберете подходящий размер шрифта.

мастер-класс

Цвет шрифта выбирайте исходя из преобладающих цветовых оттенков сайта ЯРМАРКА МАСТЕРОВ, либо ВАШЕГО МАГАЗИНА. Хотя на вкус и цвет... Для того, чтобы подобрать подходящий цвет, сделайте скриншот страницы Вашего магазина, нажав на клавиатуре клавишу PrtS, затем в редакторе PHOTOSHOP нажмите ФАЙЛ - СОЗДАТЬ и РЕДАКТИРОВАНИЕ - ВСТАВИТЬ. У Вас кроме баннера появится скриншот Вашего магазина, где Вы и сможете подобрать подходящие цвета для баннера, выбрав инструмент кисть и кликая на разных цветовых оттенках при этом удерживая клавишу ALT. Слева на панели инструментов, в инструменте ОСНОВНОЙ ЦВЕТ Вы будете видеть Ваш выбор.

обучение

Воспользуйтесь таблицей WEB цветов в случае необходимости.

https://cs6.livemaster.ru/storage/cd/26/b3747eafdf772b0d549c3a8b4bep.jpg

Введите надпись.

https://cs6.livemaster.ru/storage/87/2a/533232fcbf71378633563c5e8fep.jpg

Если вас не устраивает размер текста, уменьшайте или увеличивайте его. Также изменяте гарнитуру.

Также можно просто использвать инструмент ТРАНСФОРМИРОВАТЬ, нажав комбинацию клавиш CTRL +T и растянуть Вашу надпись так, чтобы она поместилась на весь баннер.

Изменить шрифт

 

Если вас все устраивает, оставьте такой вариант, однако я предлагаю воспользоваться не только цветом, а еще поэкспериментировать со стилями. (ОКНО-СТИЛИ - откройте эту вкладку в редакторе).

Если у вас не имеется дополнительно загруженных стилей, воспользуйтесь стандартным набором, например WEB стили. (Как вызвать это меню, смотрите фото).

https://cs6.livemaster.ru/storage/16/81/5388653c6ca37645fe73ce6db78v.jpg

Кликните на понравившемся стиле и ваша надпись измениться. Экспериментируйте!

https://cs6.livemaster.ru/storage/37/21/2a5881e57f8befebd6669640d88v.jpg

Снова перейдя в инструмент ТЕКСТ, добавьте еще одну надпись и затем еще одну.

https://cs6.livemaster.ru/storage/8a/88/3ceb4374e9f29f3cecfc8ba1388v.jpg

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

На нижних скриншотах появились фигурки ввиде рук (сердечки, цветочки и прочее). Как добавить их я расскажу ниже.

https://cs6.livemaster.ru/storage/1d/97/1bc580ed7c021a1944f2e45ada8v.jpg

Я разместила фигурки рук справа и слева. Для перемещения объектов и текста перейдите на самый первый инструмент в панели инструментов ПЕРЕМЕЩЕНИЕ.

https://cs6.livemaster.ru/storage/78/bb/a0580cbcf188ccac340f1359928v.jpg

Убрали надпись "нет ничего проще".

https://cs6.livemaster.ru/storage/5d/53/1c6eab44353cb13b0803959d74gs.jpg

Справа, в окне СЛОИ вы видите ВСЕ ОБЪЕКТЫ, которые Вы создали. Кликните на объект и изменяйте его, перемещайте, удаляйте, делайте с ним что хотите, но предварительно его нужно выбрать в слоях.

https://cs6.livemaster.ru/storage/01/0c/3537458bb59052eb741c2bd8e4gs.jpg

 

Если надпись Вам не нужна, вы можете удалить ее просто перетащив слой в корзину РЕДАКТОРА или нажав кнопку DELITE на клавиатуре.


Приступим к украшению. На картинке показан инструмент ПРОИЗВОЛЬНАЯ ФИГУРА.

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

https://cs6.livemaster.ru/storage/5c/31/fdf95d6a9f5c0bdc031f597d1bgs.jpg

https://cs6.livemaster.ru/storage/b4/17/c6491d6f97f8a805578d77ddffgs.jpg

Для того, чтобы подогнать фигуру используйте ОПЦИЮ ТРАНСФОРМИРОВАНИЯ ИЗОБРАЖЕНИЯ. Вызвать ее можно клавишами CTRL +T, меняте форму фигуры, вращайте ее вокруг своей оси, пока Вам не понравиться результат. Далее нажмите кнопку ENTER. Если фигура Вам не подошла, просто нажмите кнопку DELITE и она удалиться, либо перетащите ее на значок корзины в редакторе. 
К фигуре таже примените СТИЛИ.


По желанию Вы можете изменить ЦВЕТ ФОНА баннеру.

https://cs6.livemaster.ru/storage/6b/0c/e4420840140a714ffe758de0e4gs.jpg

Выберите слой ФОН и создайте его ДУБЛИКАТ, нажав комбинацию клавиш CTRL +J, либо СЛОИ - СОЗДАТЬ ДУБЛИКАТ СЛОЯ. И воспоьзуйтесь инструментом ЗАЛИВКА.

https://cs6.livemaster.ru/storage/aa/cd/448d7de2d42131d0e4e1633599ud.jpg

Или снова поэксперементируйте со стилями. Находясь на ДУБЛИКАТЕ СЛОЯ, кликните на понравившемся Вам СТИЛЕ.

https://cs6.livemaster.ru/storage/f5/0d/d4cfdfa5520a465ec042ad3464ud.jpg


В конце Ваших услилей, не забудьте СВЕСТИ СЛОИ! И сохраните полученный баннер, либо, если Вы планируете продолжать работать с проектом сохраните вашу работу в формате .psd и позже можно будет продолжить коррекцию баннера.

https://cs6.livemaster.ru/storage/7a/f4/67c9bce1fe0d4f47f78b036fceud.jpg

 

Примеры баннеров:

 

https://cs6.livemaster.ru/storage/ab/fb/baca07bc3d7424deac288dcb25ud.jpg

 

https://cs6.livemaster.ru/storage/6b/96/e0a3bc065ba8c767bd694500a2ud.jpg

 

https://cs6.livemaster.ru/storage/68/a5/a59684b9da90d24f25b66cfc173d.jpg

 

 

пример баннера

https://cs6.livemaster.ru/storage/09/64/5e9e030eac7f04f6325e5f77983d.jpg


С уважением, Ирина.

 

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

Основная цель мастер класса - показать новичкам принципы работы в редакторе photoshop с целью САМОСТОЯТЕЛЬНОГО и БЕСПЛАТНОГО создания простого баннера.

Ключевые слова:  
Материалы:  
Ярмарка Мастеров - ручная работа, handmade
 
Жми «Нравится»
и подписывайся на нас в Facebook!

Сообщение модератору

Отправьте сообщение модераторам, если считаете, что данная работа нарушает Правила Ярмарки Мастеров.

Шаг 1 из 3: Создание магазина

Откройте собственный онлайн-магазин в несколько простых шагов и зарабатывайте любимым творчеством
Как будет называться магазин?
Какой у него будет web-адрес?

Шаг 2 из 3: Регистрация

Укажите контактные данные для своего магазина. Уже есть аккаунт?
Введите email
Придумайте пароль
Укажите свой город
< Назад

Шаг 3 из 3: Проверка email

  • Магазин
  • Регистрация
  • Проверка email
Остался завершающий шаг! Мы отправили Вам письмо, перейдите по ссылке в нем, чтобы подтвердить свою почту и начать работу с магазином.
Если письмо не пришло — можем отправить еще раз