Метка: gif

Как сделать баннер

Как отредактировать анимированную картинку (аватарку, баннер, смайлик)

3

Чаще всего непрофессиональные дизайнеры сталкиваются с проблемой редактирования анимации в формате gif. Это самый старый, довольно простой и очень популярный формат для создания движущихся картинок. Есть, конечно, и другие виды анимации: flash, silverlight, анимация с помощью css или javascript т.п., но эти темы мы оставим пока на будущее.

Анимированные аватарки, смайлики – это почти всегда формат gif. Чтобы отличить анимацию gif от flash, нужно кликнуть правой кнопкой мыши по этой анимации. Если в последней строчке написано что-то про Adobe Flash Player, значит, это флэш-анимация:

Как отличить flash от gif

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

(далее…)

Уроки Photoshop

Как сделать мигающую аватарку или баннер в Фотошопе

4

В этом уроке для новичков будет подробно и в картинках рассказано, как сделать вот такую вот мигающую женскую аватарку с помощью программы Photoshop:

Пример женской мигающей аватарки 120x120

Сделать мигающую аватарку несложно. Для этого нам достаточно будет программы Adobe Photoshop CS3 (Adobe Photoshop CS2 и Adobe Photoshop CS4 тоже подойдут). Кроме возможности редактировать отдельные кадры нашей анимированной аватарки Фотошоп дает возможность создания самой анимации, т.е. нам достаточно будет одной этой программы.

Если вам не очень удобно делать анимацию в Photoshop, можно воспользоваться им для подготовки кадров аватарки или баннера, а саму анимацию сделать в другой программе. Наиболее популярная программа, которая позволяет делать анимированные картинки — Ulead GIF Animator 5. Я подробно описывал работу с ней в статье Как сделать анимированный GIF баннер. Лично я gif-анимацию всегда делаю в Ulead GIF Animator 5, а Photoshop использую только для подготовки кадров баннера или аватарки – привычка :).

(далее…)

Как сделать баннер

Как обойти антибанерные фильтры при размещении своей рекламы

3

В своей статье как избавиться от баннеров раз и навсегда я писал о программах, которые позволяют отфильтровать классическую баннерную рекламу, контекстные объявления Яндекса и Google, всплывающие окна и rich-баннеры, появляющиеся посреди экрана. Программ и плагинов, которые следят за тем, чтобы пользователь видел как можно меньше рекламы на сайтах, появляется все больше и они отлично справляются с поставленной задачей. Особенно, если использовать несколько разных фильтров против рекламы одновременно.

Предлагаю увидеть работу двух работающих одновременно фильтров рекламы (антибаннерный модуль в антивирусе KIS9 и встроенный ad-охотник браузера Maxthon) на примере популярного сайта zaycev.net. Справа оригинальный сайт, без применения фильтра баннеров, слева – результат автоматической фильтрации (кликните по картинке для увеличения):

Пример работы анти-баннерных фильтров

По мере роста числа грамотных пользователей интернета эффект от баннерной рекламы будет снижаться и дальше – люди просто не будут ее видеть. Уже сейчас эффективность баннерной рекламы в США на 40% меньше, чем в русскоязычном интернете. Причиной тому являются не только фильтры баннеров, но и привычка не обращать внимание на анимированную блочную информацию, выработанная у опытных интернетчиков.

(далее…)

Инструкции и советы / Как сделать баннер

Баннеры какого размера стоит заказывать

8

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

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

По мнению разработчиков популярной программы Ulead GIF Animator 5, которая чаще всего используется для создания анимированных gif-баннеров, пользователями востребованы баннеры следующих размеров:

Популярные размеры баннеров в Ulead GIF Animator

Если это внутренний акционный баннер для собственного сайта, тогда формат этого баннера вы можете легко определить по ширине колонки, в которой он будет размещаться. Для этого сделайте принтскрин своего сайта, вставьте его в Фотошоп, вырежьте на скрине фрагмент колонки размером с будущий баннер и посмотрите размер этого фрагмента. Аналогично можно узнать размер любого баннера, в т.ч. flash, на любом сайте. Конечно, если баннер – это статическая нефлэшевая картинка или gif-анимация, его размер можно узнать проще и быстрее: кликните по картинке правой кнопкой мыши и выберите Свойства.

(далее…)

Секреты верстки сайтов

Чем отличается GIF от JPG. Разница между популярными графическими форматами

2

Для графики в интернете есть 2 основных требования: картинка должна быть максимально возможного качества и в тоже время она должна быстро загружаться. Когда интернет был дорогим и медленным, важнее была скорость загрузки фотографии, сейчас же более важно качество и отсутствие искажений на ней. Но, как и прежде, основными графическими форматами в интернете остаются GIF и JPG (JPEG).

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

Формат JPG (JPEG) лучше всего подходит для того, чтобы хранить фотографии, картины, яркие рисунки с плавным переходом одного цвета в другой (градиенты). Сохраняя информацию в формате JPEG, вы сами определяете, что вам важнее – четкость и достоверность графики или скорость, с которой ваши фотографии смогут отправляться по почте или загружаться с online-фотоальбомов и блогов.

Пример графики, которую нужно сохранять в JPG:

Фото нужно сохранять в jpg

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

(далее…)

Подробные инструкции / Уроки Photoshop

Прозрачность и полупрозрачность в Photoshop

16

Прозрачность в Photoshop – одно из ключевых понятий. Если вы только начали изучать Фотошоп и еще не знаете, как сделать прозрачным фон фотографии или как сделать часть рисунка прозрачной, этот небольшой урок с иллюстрациями будет для вас полезным.

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

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

1. Открываем Photoshop. Открываем в нем картинку, которую нужно разместить на прозрачном фоне (File->Open…).

2. Выделяем все изображение/фото (Ctrl+O).

3. Копируем выделенную картинку (Ctrl+C).

4. Открываем новый файл в Фотошопе (File->New… или Ctrl+N). В появившемся окне в самом нижнем выпадающем списке выбираем значение Transparent – «прозрачность»:

Новый файл в Photoshop с прозрачным фоном

(далее…)

Создание сайтов

Векторная и растровая графика для web

9

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

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

Растровые (точечные) изображения

К растровой графике, которой гораздо больше, чем векторной, относятся все картинки форматов JPEG, GIF, PNG, ICO, BMP. Это привычные нам фотографии, иконки и рисунки, которые состоят из точек (пикселей, растров).

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

При увеличении размера файлов растровой графики теряется четкость изображения, становятся заметными отдельные пиксели, из которых состоит картинка. Самым популярным пакетом для обработки растровой графики является, конечно же, Adobe Photoshop (PSD).

Растровый формат GIF, позволяет создавать анимацию. Правда, она проще и дольше загружается, чем flash, зато сделать gif-анимацию, как правило, намного легче.

(далее…)

Как сделать баннер / Подробные инструкции

Как сделать анимированный GIF баннер

50

анимированный GIF баннер

Для продвижения своего сайта нужны баннеры. Их можно размещать бесплатно в блогах своих знакомых или на коммерческой основе на сайтах с высокой посещаемостью. Создание баннера можно заказать в профессиональной веб-студии, а можно сделать самому.

В этой статье мы научимся делать анимированные GIF-баннер средней сложности с нуля. Для этого нам понадобится немного времени и терпения, т.к. шедевр анимации у новичка за час не получится никак. Из программ мы будем использовать Adobe Photoshop – для подготовки кадров баннера и Ulead GIF Animator 5 – для создания из готовых кадров анимационного ролика в формате GIF. Если вы не знаете, где взять эти программы, рекомендую прочитать статью Чем бесплатно скачать любую информацию.
(далее…)