На главную

Библиотека Интернет Индустрии I2R.ru

Rambler's Top100

Малобюджетные сайты...

Продвижение веб-сайта...

Контент и авторское право...

Забобрить эту страницу! Забобрить! Блог Библиотека Сайтостроительства на toodoo
  Поиск:   
Рассылки для занятых...»
I2R » Сайтостроительство » Adobe Photoshop

Actions. Автоматизация производства веб-графики

Лучше день потерять, зато потом за пять минут долететь...
Все actions в этой статье - для Adobe Photoshop 7.

В этих статьях я умышленно пропускаю детали создания экшнов. Это все есть в хелпах, и нет нужды это все множить. Я попытаюсь просто поделиться пользовательским опытом.

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

Итак, стиль на сайте. Даже начинающие веб-мастера уже поняли, что все картинки на сайте должны подчиняться определенным принципам, иметь что-то между собой общее. Например, размер. Картинки могут быть нескольких размеров, но они не могут быть все абсолютно разными, иначе верстать придется вручную, или это все поползет. При нынешних системах с базами данных это настолько естественно, что можно было бы и не говорить об этом. Итак, ТИПОРАЗМЕР.

Я определил, что на этом сайте все картинки (или, скажем, баннеры) должны быть 100х100 с текстовым комментарием. Я включаю запись экшна и создаю картинку от начала до конца с учетом размера исходника, требуемой гаммы и других данных. Затем этот экшн нужно оптимизировать (исключить пустые команды, ненужные и задействовать активные меню там, где они могут понадобиться, например, шрифтовая часть). Давайте на примере... Например, баннер с текстом для сайта новостей. Составим последовательную логику действий.

1. Кадрирование снимка. Это когда с исходной фотографии берется нужный фрагмент, вырезается и определяется в типоразмер (длина и ширина в пикселах).

Инструментом Crop Tool вырезаем нужный нам формат (примерный квадрат, в размер вгонять будем позже).

Останавливаем запись экшна. Теперь, если мы пустим экшн на эту же фотографию - он вырежет точно также. Но на другой фотографии этот экшн вырежет именно этот формат именно в этом месте без учета содержания (а там может оказаться не портрет этого жирафа, а совсем другая его часть). Да и откуда машине знать, чего хотите именно вы и именно с какой-то фотографии. Значит, в этот момент машина должна передать управление вам. Да и сама фотография может оказаться меньше определенного вами сейчас квадрата, и все границы обрезки могут оказаться за пределами снимка. Их достать потом можно, но это время и нервы. На потоке вы изругаетесь вдрызг...

Посему лучше сразу определить какой-то универсальный фрагмент (типа небольшой в левом верхнем углу), а потом руками скадрировать.

То есть вы кадрируете абстрактно в левом верхнем, вырезаете, останавливаете запись экшна и активизируете в экшне пользовательское меню (в кружочке). Теперь на любой фотографии экшн будет размещать рамку обрезки именно здесь и притормаживать. Вы руками форматируете кадр (сдвигаете и раздвигаете рамку как вам нужно, примерно как на первой картинке), давите Enter, и экшн продолжает свою работу. Картинка скадрирована (но она пока не 100х100 и не обязательно квадрат)

2. Задание типоразмера (в нашем примере 100х100).

В простом варианте короткую сторону следует задать Image Size, а длинную - вторым шагом Canvas Size. В первом случае картинка будет уменьшена или увеличена до требуемых 100 пикселов с интерполяцией и прочими атрибутами изменения размеров. Во втором - просто обрезана (или надставлена пустышками) с двух сторон. И в таком случае может потребоваться уточнение кадрирования, а вроде как уже и нечего уточнять. Поэтому перед вторым шагом (Canvas Size) образмеренную по высоте картинку копируем в буфер обмена (ctrl+C), а после обрезки Canvas Size снова вставляем в новый слой (ctrl+V). У нас получилась картинка форматом 100х100 и в ней слой с запасом по сторонам, который инструментом Move можно подвигать чуть вправо-влево. Затем после уточнения сливаем слои и снова останавливаем экшн. И опять лезем в него разбираться и оптимизировать.

Команда Move не имеет своего меню и потому будет сдвигать картинку все время одинаково. Мы удаляем эту команду и вместо нее вставляем Stop с комментариями типа "move pik for better...". Команда Стоп находится в меню экшнов (нужно нажать кружок со стрелкой вверху общего меню.

В итоге мы имеем вот такой экшн >> (скачать). Его мы можем назвать модулем-обрезалкой (резаком или еще как). Если в нем включить меню на Image Size и Canvas Size, то получим полномасштабный резак на любые размеры, но для конкретного сайта проще настроить несколько таких резаков на каждый размер отдельно.

3. Создание дизайна баннера.

Эта часть (рамка, подкладки, шрифтовая часть) может существенно разниться и просто записывается одно в одно к действиям. Я пока создал новый экшн в том же сете и выполнил дизайн. Получилось вот как на фото.

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

Я специально имитировал такую ситуацию в педагогических целях, что бы показать, что иногда при оптимизации придется находить дополнительные решения и вводить новые команды. В данном варианте понятно, что привести к единому разрешение удобно сразу же, на самом первом шаге (чем потом вводить еще кучу корректоров). Поэтому перед обрезкой я вставил команду Image Size, которая не трогает пикселы, а изменяет разрешение картинки на 72dpi, что для веба вполне нормально. И снова начал тестировать...

Ну вроде почти готово (как может показаться)... Я создаю третью кнопку "Финиш!", в которой просто команда Save for web в нужный мне каталог (в данном примере корневой на c:\ - это есть у всех). Можно перекурить и нашлепать тонну баннеров...

4. Оптимизация.

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

Например, все те же исходные фотографии. Разрешение мы определили, но остается еще формат (RGB, grayscale, CMYK, duotone, indexed color), и на многих из них многие фильтры и инструменты просто вообще не работают. Невозможно в indexed color (исходный GIF) создать новый слой... и ваш экшн замрет в недоумении, в лучшем случае сообщив вам об этом дежурной фразой. То есть нужна еще команда конвертирования исходника в RGB.

Чем больше таких ситуаций вы предусмотрите - тем беззаботнее будет ваша последующая жизнь. Для однотипных фото (скажем из-под цифровика определенной модели) можно создать конкретный модуль (блок в экшне), корректирующий тон и цвет именно после этой камеры. А можно создать универсальный модуль коррекции тона и цвета к единому результату. И при этом слишком темные и слишком светлые исходники он будет приводить примерно к одному результату. Модуль может состоять из 7-10 команд и работать неплохо, а может быть из 150 команд, связанных логикой, и вытаскивать любую фотографию на высокий уровень, но работать он будет дольше.

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

Вот те же 4 баннера с новыми дополнительными подстройками.

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

5. Финиш.

 

И теперь логичнее было бы все три кнопки собрать в одну (нафига нам три раза кликать, когда достаточно раз?). Это делается совсем просто. Выбираете все команды второй кнопки (не через shift, а через ctrl) и перетаскиваете в хвост первой. И состав третьей прицепляете в тот же хвост. Последовательность та же, а экшнов стало меньше.

Осталось придумать ему фамилию и сохранить куда надо. Экшн для баннеров готов.
скачать >>

6. Работа.

Теперь осталось научиться им правильно работать. Легче осваивать экшны своего производства и сложнее чужие. Есть определенные тонкости в поведении фотошопа при игре экшнов. Например, в только что созданном таких тонкостей две.

1. При вырезке инструментом Crop следует учитывать композицию (нижняя часть закроется красной плашкой) и при формировании квадрата стараться в ширину его сделать больше чем в высоту. В обратном случае у вас выскочат две пустышки по краям. Если они меньше 2 пикселов каждая - они прикроются красной рамкой как раз в эти 2 пиксела. Но если они шире 2 пикс - то придется перезапускать экшн (или плюнуть на такую фигню, как качество и профессионализм в работе).

2. Вторая тонкость чисто техническая. Когда при наборе текста вы вместо ??????? вбили что-нить внятное, то для продолжения работы экшна нужно выбрать другой инструмент в палитре TOOLS.

Если вы уверены в работе экшна на все сто, тогда можно добавить команду закрытия файла (и сэкономить еще пару кликов).

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

Еще подарок для интернетчиков-коллекционеров картинок. ImageDoctor - Magnificar >> скачать.

Думаю, многие (я в их числе) собирают коллекции из картинок, найденных в инете. Раньше картинки были маленькие и тусклые, сейчас большие и яркие. Но маленькие все одно встречаются. И выбросить жалко, хорошая картинка, и разглядывать - глаза потеют. Да еще этот jpg-овский маразм...

Известная фирма Alien Skin выпустила комплект "лекарственных средств" под названием Image Doctor. Я скачал триал, покрутил - штука хорошая, но с недостатками. Ремувер царапин (аналог моего по задаче) я так и не смог использовать, получая жуткие пятна на лицах и других частях фотографий, наверно привык к своему. А вот штука для лечения маразмов мне понравилась. Я тут же слепил свой вариант, добавив к оному увеличитель...

Взяв в инете картинку пикселов 300-400 и измученную jpg-ом, мой "доктор" увеличивает ея до 768 по высоте (если картинка вертикальная), поправляет тон и по мере возможности правит маразмы (правильнее - артефакты). Другая кнопка - для горизонтальных картинок, их она растаскивает до 1024 (монитор у меня такой). Вы сами можете в пункте Image Size проставить любой нужный вам размер в пикселах, сантиметрах или процентах. Наиболее удобный формат увеличения - 130-180%. Иногда удобнее увеличивать поступенно с промежуточными операциями, но опять же это тема уже для другой статьи. Если вам нужно лечить без увеличения - отключите птичку изменения размера. Если маразмы с первого раза не ушли - можно еще раз повторить. Картинка автоматом сохраняется в c:\Мои документы. Но если вы взяли картинку именно оттуда - пересохранит сверху и вас не спросит.

Любое лекарство имеет противопоказания. Не нужно лечить "здоровые", нормальные картинки. Им будет только хуже... Их размер проще изменить руками. При увеличении более чем в 2,5-3 раза картинка становится настолько мутнее и расплывчатее, что работа теряет смысл. Иногда картинка такая, что ей уже ничто не поможет (пациент скорее мертв, чем жив) - тады ой!... в корзинку... Для примера я пошел в инет и выцепил почти первую попавшуюся для данного примера. И надо помнить одно - реальная информация только в исходнике. Все остальное - уже искажения, плохие или хорошие, но искажения.

Виктор Вязьминов
MrDeSign

Спонсор раздела

Рассылки Subscribe.ru:

Библиотека сайтостроительства - новости, статьи, обзоры
Дискуссионный лист для web-разработчиков
Подписка на MailList.Ru
Автор: NunDesign
Другие разделы
Оптимизация сайтов
Web-студии
» Новое в разделе
Web-дизайн
Web-программирование
Интернет-реклама
Раскрутка сайта
Web-графика
Flash
Adobe Photoshop
Рассылка
Инструменты вебмастера
Контент для сайта
HTML/DHTML
Управление web-проектами
CSS
I2R-Журналы
I2R Business
I2R Web Creation
I2R Computer
рассылки библиотеки +
И2Р Программы
Всё о Windows
Программирование
Софт
Мир Linux
Галерея Попова
Каталог I2R
Партнеры
Amicus Studio
NunDesign
Горящие путевки, идеи путешествийMegaTIS.Ru

2000-2008 г.   
Все авторские права соблюдены.
Rambler's Top100