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

Sam Jack

Капитан-Узурпатор
Команда форума
Созидатель
5 Май 2015
13.918
4.894
113
Россия
null-prog.ru
banners_svreen.jpg

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

Скачать новую версию Фотошоп

1. Открываем фотошоп. Верхнее горизонтальное Меню -> Файл -> Новый.
В открывшемся окне вписываем размеры в пикселях: для нашего случая ширина 468, высота – 60, разрешение 150пикс/дюйм, содержимое – прозрачность, далее жмем «ОК».

2. На баннере размещают логотип или любую желаемую картинку, а также необходимый текст, например «как увеличить посещаемость сайта«. Этим мы сейчас и займемся.
Слева в фотошопе имеется вертикальное меню (вы видите его на блоге тоже слева). Левой клавишей мышки нажимаем на левое окошко палитры цветов и для примера выбираем зеленый. Жмем «ОК».

3. Выбираем инструмент «ведро». Если вы не видите инструмент, о котором я буду говорить, тогда нажмите правой кнопкой мышки на место предполагаемого инструмента, и вы увидите весь набор инструментов для данного окошка меню. После выбора «ведра», жмем по баннеру левой кнопкой мышки. Баннер окрасится в зеленый цвет. Получилось? Должно быть как на кртинке ниже.



4. Теперь будем помещать картинку на баннер. У меня картинка, например, для RSS-подписки с изображением шахматной фигуры в виде коня. Она имеет расширение jpg, но можно и расширение gif. Открываем картинку в фотошопе. Будет лучше, если мы поместим не всю картинку, а только изображение коня. Идем: Меню -> Изображение -> размер изображения. Запоминаем размер картинки.

kon.jpg


5. Верхнее горизонтальное Меню -> Файл -> Новый. Для нового документа пишем размеры, как у картинки с конем (у меня 84х84), содержимое – «прозрачный».

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

7. Выбираем инструмент «волшебная палочка», щелкаем им по фону вокруг коня. Если фон достаточно контрастный, то большая его часть выделится. Нажимаем клавишу «del» и удаляем выделение. Если не удалось за одно нажатие «волшебной палочки» удалить фон, то нажимайте на оставшийся фон и повторяйте процедуру необходимое количество раз. В нашем случае, я сделала это за 2 раза. См. ниже.

proba4.jpg


8. Теперь необходимо сделать так, чтобы конь поместился в баннере. Далее идем: верхнее горизонтальное Меню -> Изображение -> размер изображения. Пишем высоту 60 (по высоте нашего баннера). Обратите внимание, чтобы внизу стояла галочка «сохранять пропорции». Жмем «ОК», при этом картинка должна изменить размеры.

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



10. Осталось написать текст. Выбираем инструмент «Текст» и цвет текста, как в пункте 2. Для нашего случая это белый. Пишем, например, «Подпишитесь на RSS-ленту». Инструментом «перемещение» вы можете установить текст так, как вам это требуется.

11. Верхнее горизонтальное Меню -> сохранить как … -> присваиваем имя лучше с расширением .jpg и сохраняем на своем компьютере. После этого заливаем, полученный баннер, на хостинг и прописываем путь к нему в следующей ссылке.
Ссылка на баннер имеет вид: < а href="URL ВАШЕЙ СТРАНИЧКИ">< img srс=" URL БАННЕРА " >< /а>. Данный код вы устанавливаете в том месте сайта, где хотите видеть ваш баннер.

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