Создание баннера с помощью Adobe Photoshop и Image...

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

Сисчерные Требования: живописец - 1 шт...

После выходы в свет на базаре графических программ редактора от фирмы Adobe - Photoshop'а версии 5.5 со интегрированным продуктом этой же фирмы - ImageReady 2.0, все программы существа анимированной графики безвыходно отстали. Без сомнения дело в том, что ранее, процесс существа плаката (а плакат и есть анимированная графика, неанимированные плакаты в этом начальстве тщательно не рассматриваются) традиционно сводился к попросту последующему:

- творение в Photoshop'е (или же всяком ином однозначно графическом редакторе) файлов, которые после чего будут кадрами плаката;

- компоновка данных кадров в 1 gif (в анимирующей програмке, к примеру, Animagic, Ulead GIF Pro, GIFLine Pro, GIF Movie Gear и др; таковых программ огромное количество, довольно непременно зайти в сообразный раздел всякого вебсайта с програмками);

- оптимизация (здесь также используются иные программы, в большинстве случаев оптимизационные возможности аниматоров очень слабы).

Три ступеньки, кроме того любая из их настоятельно срочно просила в целом отдельной программы, потому что превосходно эти все процессы сразу исполнять не могла ни 1 программа. Иными словами хотя надобно совершенно принять, что 2 из 3-х некие программы осилили. Например, пакет PaintShop Pro от Jasc и его аниматор Animation Shop отлично трудится с анимацией и творением в общем-то трудоемкое графики (пакет и вообще считается попыткой Jasc скоро настигнуть Adobe Photoshop), хотя оптимизация в данной програмке стоит отчасти на варварском уровне. И наконец данная заметка обрисовывает процесс существа плаката при помощи Adobe Photoshop'a и ImageReady, версии 5.5 (просто-напросто заключительная 6.0) и 2 (3) в соответствии с этим.

Что необходимо иметь? Голову, PC, Photoshop версии 5.5 и повыше (ImageReady входит в шаблонный набор установки Photoshop'а 5.5 и повыше); иметь взаправду малюсенько, необходимо к тому же обладать. Надо сказать статья рассчитана на жителей нашей планеты с минимальными познаниями Photoshop'a и ImageReady. Вполне возможно, что создание плаката - применительно к нам формата 468 пикселей на 60 - обычно наступает в Photoshop'е. Честно говоря на рисунке 1 хладнокровно показано ненамного диалоговое окошко творения новейшего файла (команда file\new).

На рисунке 1 самостоятельно показано полностью диалоговое окошко существа новейшего файла (команда file\new).

В согласовании со ветхими обыкновениями ставится рамка в 1 пиксель, как заметно на рисунке 2 она располагается по-человечески в отдельном слое, желая данное не нужно было. Ну что же принято предварительно считать, и мне может комично показаться на первый взгляд в отсутствии причин, что рамка в плакате дает ему какую-либо аккуратность.

рисунок 2 Green Kakadu : Стоит отметить, что рамка - данное не совсем только для эстетики. Поверьте ваш плакат станет видеться на разных веб-сайтах, и вполне вероятно это, что фон плаката и фон вебсайта, на котором он показывается, станут соединяться - рамка предотвращает аналогичные действа.

Дайте мне кисточку!

Начинаем живописать составляющие нашего плаката. Предположим в этом случае я добровольно собираюсь нарисовать нескольких отвлеченных человечков, 1 из которых станет быстро различаться по расцветаю от других, помимо прочего я рассчитываю совершенно сделать надпись "design different" - подражание слогану фирмы Apple Macintosh "Think different". С одной стороны я желаю, чтоб и надпись и оранжевый человечек мигали.

Человечков живописую при таком варианте попиксельно (другими словами повышаю изображение до 1600% и заливаю краской любой пиксель вручную). И вообще это даёт невообразимую экономию в объеме файла. Как всегда если на рисунке 3 голова человечка крайне имеет по бокам области просто-таки серого - это превосходно заметно при сильном увелечении, то в следствие я переведу вручную все очень-очень серые пиксели в 1 расцветка и устрою голову наиболее примитивной, на качестве прорисовки данное не скажется, но несмотря на все просто-напросто вышесказанное выдаст экономию в объеме файла.

рисунок 3 Green Kakadu: Автор не спроста разговаривает о объеме файла: при рисовании плаката нужно будет неустанно припоминать, что на "авторитет" плакатов присутствуют строгие лимитирования!

Обратите внимание, на рисунке 4 есть выделенная пунктиром область. Больше того она станет значительно залита довольно-таки белоснежным вполне в отдельном слое Layer 2, он "повыше" слова и с помощью подключения/выключения данного слоя громко выйти мигание слова "different". Безусловно аналогичная обстановка с мигающим человечком, оранжевый нарочно присутствовать в слое yell .

Как видите плакат готов. Известно, что он еще не мигает и никак не оптимизирован. Не исключено, что сохраняем в его формате psd и давим на значок ImageReady, значок подсвечен на рисунке 5. Не удивительно, что после чего же Photoshop механически запустит ImageReady, кроме того наш psd файл теснее станет открыт в ImageReady.

На рисунке 6 мы видим не очень большую область окошки ImageReady. По правде сказать попробую разъяснить. А впрочем внешне ImageReady на 80% вполне схож на Photoshop. Но его однозначно главная область работы - интернет, в следствии этого у него по-старому собственные выкладки. Например, в истории с плакатом нам пригодятся 2 выкладки - animation и optimize. И все-таки и та и иная как следует особенно заметны на рисунках 7 и 9. Можно подумать, что про оптимизацию позднее, а в настоящий момент немного словечек о анимации.

Выкладка анимации разрешает сделать кадр (набросок 7, левее плетенки; в ImageReady - Duplicates current frame), назначить время его проигрывания (всплывающее рациона на рисунке 6), проиграть.

Техническое отступление. К примеру, помимо Animation еще есть 2 выкладки: Slice и Rollover. Но первая разрешает "резать" наш набросок и улучшить вполне отдельные его фрагменты (slices) с всевозможными установками. Например, есть великий набросок, в некой его доли есть порожняя область, в иной кусочек фотки. А вот сохраняя любую область рисунка раздельно мы предварительно получим довольно по-человечески немалую экономию очень-то совокупного объема. Как известно, кроме того, как скоро грузится не 1 немаленький набросок, а весьма большое количество малюсеньких, создается воспоминание, что страничка грузится прытче. К несчастью выкладка Rollover разрешает немедленно действовать с иллюстрациями, html и JavaScript'ом, с тем, что принято именовать роловерами - мало-мальски графическими событиями, происходящими при прохождении курсора мышки в областных регионах рисунка. Например, мы разумно желаем нарисовать рацион, при наведении мышки на которую пункты рациона станут слепо поменять просто-напросто собственный вид (технически данное просто смена иллюстраций). И правда, с поддержкой выкладки Rollover данный процесс станет практически отсутствует: нарисовать набросок, его вариант реакции на курсор мышки (к примеру, слои), хладнокровно установить условия Rollover и сберечь Save Optimized As.. кликнув галочку Update HTML.

На рисунке 7 в нашей анимации успешно присутствует всего 2 кадра (в определениях ImageReady - frame). Мысль о том, что первый кадр тщетно продолжается 1 секунду, 2-ой - 3. Само собой разумеется, что отличия кадров я самостоятельно не демонстрирую, хотя, как я теснее часто упоминал, я включаю\выключаю слои, с помощью чего же в окончательном файлике формата gif мы предварительно получим мигание.

Наприпоминаю: мы до сих пор трудимся с файлом psd. Неудивительно, что и нам еще доступны слои. Можно сказать когда мы сохраним анимированный gif и попробуем добросовестно открыть его в этом же ImageReady, то мы предварительно получим анимированный gif, при этом не станет практически никаких слоёв - лишь кадры. И кроме того если добросовестно открыть данный gif в Photoshop'е, то мы хладнокровно увидим только 1 кадр анимации.

На рисунке 8 в данный момент у нас 7 кадров. Тем более обратите внимание, все кадры имеют различное время показа (delay). В таком случае собственно плакат готов. Другими словами нажав клавишу Plays animations мы самостоятельно увидим, как станет смотреться наш анимированный gif файл. По всей вероятности осталось улучшить и сберечь.

На рисунке 9 - оптимизация. Как обычно я быстро избираю 16 расцветок, желая при таком варианте возможно подобрать 3 расцветки, т.к. в плакате применены просто-напросто серый, по-особенному белоснежный и оранжевый. Обычно вообще вопросец оптимизации gif'а для начала сводится к уменьшению числа применяемых расцветок. Поэтому в неких вариантах приходится правильно использовать иные пункты выкладки optimize. Именно но конкретных советов здесь выдать невозможно - проводите эксперимент. Прежде всего кстати, на рисунке 6 заметно, что окошко нашего плаката лично имеет немного закладок:

Original - для psd;

Optimized - плакат смотрится согласно с нашими установками рационами Optimize;

2-Up - 2 рисунка для сопоставления опций;

4-Up - 4 рисунка для сопоставления.

Все данные закладки сделаны, чтоб посодействовать наиболее наверняка добросовестно установить оптимизационные опции. Как правило рекомендую в последствии установки оптимизационных опций проиграть наш файл в закладках 2-Up и 4-Up. Выяснилось, что так станет возможно узреть по сравнению итог работы.

Для сбережения нашего плаката в формат gif добросовестно раскрываем рационах file и регулярно избираем пункт Save Optimized As.. А главное даём файлу фамилия, давим Ok, плакат готов!

Вот эффект: простой анимированный плакат, задача окончательно исполнена. "Вес" файла 2,53 Кб. Итак, для анимированного плаката этого формата (468 на 60 пикселей) обычный объем в пределах 12-16 Кб (GK: я бы заявил не типовой, а прямо-таки верхний потолок. Например, а верховодила устанавливают баннерные Сети). Тогда причина такового совсем небольшого "веса" моего плаката - использование всего 3-х расцветок, попиксельная прорисовка и минимальное количество частей.

плотно обсудить заметку в форуме

Создание баннера с помощью Adobe Photoshop и Image...