дата:
книга
- Получить ссылку
- Электронная почта
- Другие приложения
Как сделать простой баннер
В этом сообщении я расскажу Вам как сделать простой (не анимированный) баннер или заготовки для баннера, содержащего анимацию. Рассмотрим самый простой способ. В следующих уроках я преложу вам другие способы создания баннеров.
1. Находим в поиске Яндекса по картинкам или в любом другом месте нужный нам фон
2. Обрезаем его согласно стандартым размерам:
Наиболее распространены баннеры размером 468 x 60.
Перед тем как обрезать фон, нужно "подогнать" его по размерам, т.е. в фотошопе открываем Изображение - Размер изображения. здесь указываем ширину изображения 468px. при этом обращаем внимание, на то, чтобы в настройках гадочка стояла напротив параметра "Сохранять пропорции":
Затем на панели инструментов выбираем прямоугольное выделение
и при помощи него выделяем понравившийся фрагмент во всю ширину изображения.
Изображение - Кадрировать
3. Изображение - Размер холста. Здесь указываем высоту 60px:
Если пропорции не важны, то можно поступить иначе: Изображение - Размер изображения. здесь высота - 6оpx, убираем галочку напротив "сохранять пропорции". Получили следующее изображение:
4. пишем на полученной заготовке
На панели инструментов выбираем кнопку "текст"
, определяем шрифт, цвет, размер, выравнивание и другие настройки.
Вот что у нас получилось:
Теперь загружаем изображение на фотохостинг, например, на Радикал, и вставляем в приветствие своего блога используя следующий HTML код:
<a href="Адрес вашего блога"><img src="прямая ссылка на изображение"></a>
Теперь вставляем этот код в окошко для кодов, чтобы другие пользователи могли добавить его в свои дневники:
<textarea rows="2" cols="40"> КОД НА ВАШ БАННЕР </textarea>
P.S. Подобным образом можно сделать баннер в Jimp, этапы те же, как и для создания графической шапки. Об этом я уже писала в уроке Как сделать шапку для блога в GIMP. Подставляем только размеры баннера.
1. Находим в поиске Яндекса по картинкам или в любом другом месте нужный нам фон
2. Обрезаем его согласно стандартым размерам:
| 300 x 250 | прямоугольник средней величины |
| 250 x 250 | всплывающий квадрат |
| 240 x 400 | вертикальный прямоугольник |
| 336 x 280 | большой прямоугольник |
| 180 x 150 | прямоугольник |
| 468 x 60 | длинный баннер |
| 234 x 60 | половина длинного баннера |
| 88 x 31 | микро полоса |
| 120 x 90 | кнопка 1 |
| 120 x 60 | кнопка 2 |
| 120 x 240 | вертикальный баннер |
| 125 x 125 | квадратная кнопка |
| 728 x 90 | ведущий стенд |
| 160 x 600 | широкий небоскреб |
| 120 x 600 | небоскреб |
| 300 x 600 | объявление на полстраницы |
Наиболее распространены баннеры размером 468 x 60.
Перед тем как обрезать фон, нужно "подогнать" его по размерам, т.е. в фотошопе открываем Изображение - Размер изображения. здесь указываем ширину изображения 468px. при этом обращаем внимание, на то, чтобы в настройках гадочка стояла напротив параметра "Сохранять пропорции":
Затем на панели инструментов выбираем прямоугольное выделение
и при помощи него выделяем понравившийся фрагмент во всю ширину изображения.Изображение - Кадрировать
3. Изображение - Размер холста. Здесь указываем высоту 60px:
Если пропорции не важны, то можно поступить иначе: Изображение - Размер изображения. здесь высота - 6оpx, убираем галочку напротив "сохранять пропорции". Получили следующее изображение:
4. пишем на полученной заготовке
На панели инструментов выбираем кнопку "текст"
, определяем шрифт, цвет, размер, выравнивание и другие настройки.Вот что у нас получилось:
Теперь загружаем изображение на фотохостинг, например, на Радикал, и вставляем в приветствие своего блога используя следующий HTML код:
<a href="Адрес вашего блога"><img src="прямая ссылка на изображение"></a>
Теперь вставляем этот код в окошко для кодов, чтобы другие пользователи могли добавить его в свои дневники:
<textarea rows="2" cols="40"> КОД НА ВАШ БАННЕР </textarea>
P.S. Подобным образом можно сделать баннер в Jimp, этапы те же, как и для создания графической шапки. Об этом я уже писала в уроке Как сделать шапку для блога в GIMP. Подставляем только размеры баннера.
Источник: http://13stroy.ru/load
Комментарии
Отправить комментарий