Создать баннер сайта в photoshop самостоятельно

Добрый день, уважаемые читатели! При создание своих сайтов и блогов необходимо не упустить ниодну мелочь. Вы будете продвигать свой проект всеми способами- обмен ссылками, обмен контентом, а еще и такой картинкой как банер. Это маленькое такое изображение, помещающее в себе логопит сайта, его url и небольшой слоган . Баннер может быть как статичным так и анимированным. Его размеры стандартные, это  88 х 31, 88 х 40, или 81 х 63. Конечно в интернете есть много ресурсов предлагающих за определенную плату вам помочь, но зачем тратить деньги если можно все сделать самостоятельно . Для этого необходима программа photoshop и небольшие навыки работы в ней. Я постараюсь сегодня вам показать как создать баннер для сайта.

Работа начинается с запуска программы phptoshop и создания нового изображения размером 88 х 31 пиксель, то есть File — New (Ctrl +N) и задаем нужны размер и нажимаем Ok. В итоге получаем  изображение .

Теперь предстоит подобрать цвета для фона и тип заливки. Для данного примера я выбрала в качестве основного цвета — белый, фоновый — нежно голубой (pantone 297c)  и тип заливки градиент (G)- diamont gradient. Щелкаем указателем мыши в центре нашего прямоугольничка и не отпуская левой клавиши ведем указатель вправо или влево по горизонтали. И в итоге получаем

Для продолжения создаем новый слой в палитре слои (Shift +Ctrl + N) или же просто нажимаем на значок  создать новый слой.Выбираем инструмент «Т» (T)и пишим название нашего сайта.В палитре Character прописываем следующие параметры: цвет выбираем #0b66c2.

Затем получившующую надпись выравниваем по горизонтали и слегка вверх и применяем к ней стили слоя — внешнее свечение и скосы. С параметрами указанными на скриншотах

В итоге применения двух стилей у нас должно получиться

Снова создаем новый слой (Shift +Ctrl + N) и применяя инструмент «T» (T) пишим первую фразу, в моем случае это будет «Все лучшее», отключив видимость слоя с название сайта.К получившимуся тексту применяем те же параметры, что и для названия сайта. Применим стиль слоя — внешнее свечение и обводка. Параметры смотрите на скриншотах

Включаем видимость слоя с названием нашего сайта и вот результат

Отключить видимость обеих текстовых слоев и снова создать новый слой (Shift +Ctrl + N).Пишим вторую фразу — Только для вас! Применяем к ней те же параметры.И используем теже  стили, и еще применим один дополнительно

У нас получилось всего 4 слоя и теперь необходимо добавить к нашему баннеру аниммацию. Для этого, если вы работаес с CS3 зайдите во вкладку Окно и выбирите пункт Аниммация. Если же у вас просто CS, то выбираем ImageReadi ( Shift +Ctrl + M), находящуюся в самом конце палитры инструментов. Появляется вот такое окошечко управления аниммацией

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

для просмотра получившегося баннера нажимаем на значек Play

Остается теперь только сохранить. В CS3 заходите в Файл — Сохранить для web, с расширением .gif. Для сохранения в CS File — Save Optimizet AS…( Ctrl+Shift+Alt+S) и выбираете тип файла — HTML and Image (.gif) В итоге проделанной работе я получила баннер

с размером 4, 89 КГ , что соответствует норме. Обычный баннер для сайта не должен превышать 18 КГ.

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

Вам понравилась статья? Расскажите о ней друзьям!