rotorweb.ru » Photoshop

Прокачиваем шаблоны от 960.gs

rotor — Tue, 02 Aug 2011 07:42:25 +0000

Небольшой полезный трюк для тех, кто постоянно использует в своей работе шаблоны модульной сетки от 960.gs. Этот фреймворк довольно распространен и, в последнее время, находит все больше и больше поклонников среди дизайнеров и верстальщиков.

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

Размечать самостоятельно заготовки с помощью зебр-заливок и направляющих — не выход. Это лишняя трата рабочего времени, которое лучше потратить с большей пользой. Поэтому воспользуемся онлайн-генератором Modular Grid Pattern, чтобы доработать стандартные шаблоны 960.gs.

Задача: быстро получить из левой части картинки то, что изображено в правой:

Переходим по вышеприведённой ссылке, выставляем следующие параметры с картинок ниже и сохраняем полученные результаты в виде PNG или Photoshop-pattern.

Для 12-ти колоночного макета:

Для 16-ти колоночного макета:

Для 24-х колоночного макета:

Параметр Baseline (здесь используется для задания интерлиньяжа или line-height) я выставлял 18px в расчете, что размер основого шрифта 12px (font-size × 1,5 = line-height). У вас он может быть другим, в зависимости от личных убеждений и выбранного кегля для текста.

Высоту модулей (Module height) выставляйте по собственному вкусу, я оставил стандартные значения.

Полученные результаты в виде PNG-файлов также отлично подходят для наложения на макет в процессе HTML-верстки с помощью PixelPerfect (или подобных расширений для браузеров).

Особо внимательные могут обнаружить, что на сайте Modular Grid Pattern есть еще ссылка на расширение для Photoshop, но у меня с ним что-то не срослось. После n-ной попытки победить его недружественное автозаполнение параметров, я его удалил.

Ну и в конце, пара полезных ссылок в тему:

Статьи Алексея Черенкевича о модульной сетке.
Генератор вертикального ритма для сайтов.

Критикам и троллям — просьба обойти стороной тему достоинств и недостатков подобных фреймворков, суть поста не в этом.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

Автоматизация рутинной работы в Photoshop

rotor — Mon, 02 Feb 2009 21:29:51 +0000

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

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

В обход советов «профессионалов» на дизайнерских форумах, я не стал качать сторонний софт, ведь всё что нужно, уже есть под руками, точнее в Photoshop. Остаётся только потратить 15 минут на настройки и проверку алгоритма. А дальше — чашка горячего кофе и удовольствие от созерцания того, как работают роботы :)

Я не буду описывать интерфейс и назначение каждой кнопки в диалоговых окнах Photoshop, просто дам ссылки (создание макросов, пакетная обработка), а лучше опишу, как решить конкретную задачу с помощью пакетной обработки. Возможно, удастся переубедить тех, кто считал, что автоматизация в Photoshop, «это сложно».

Перед началом

Условно весь процесс автоматизации в Photoshop можно разбить на два этапа:

запись и проверка макроса (Action);
запуск макроса через диалоговое окно пакетной обработки (Batch).

Итак, допустим, есть исходники фотографий разных размеров (много штук), сортированные в папки по темам, которые нужно уменьшить до одинакового размера (360×150 px). Для примера и экспериментов можете взять это фото. Далее по шагам.

Автоматизируем

1. Запись макроса (Action)

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

1.1 Открываем в Photoshop нужную фотографию (Ctrl+O).

Окно Actions в Photoshop.

1.2 Запускаем запись макроса. В окне Actions (Alt+F9) создаём новый сет (иконка папки) и в нём action (иконка листка). На панели станет красной пиктограмма Record , а значит пошла запись всех действий, которые вы совершаете.

Здесь главное не торопиться, потому что программе всё равно сколько времени вы будете тратить на паузы между операциями. При воспроизведении они будут выполняться одна за другой.

1.3 Создаём копию фонового слоя (Ctrl+J). Это для того чтобы можно было свободно менять размеры изображения.

1.4 Меняем размер изображения Image → Image Size (Alt+Ctrl+I) на 360 px по горизонтали (включив галочку Constrain Proportions).

1.5 Теперь осталось подогнать размер по вертикали (сейчас 239 px вмето нужных 150). Image → Canvas Size (Alt+Ctrl+C) → Height = 150 px (не ставя галочку Relative и не меняя направления обрезки краёв Anchor).

1.6 Останавливаем запись макроса в окне — Stop playing/recording .

Обратите внимание, что с действиями в окне Actions можно выполнять операции как и со слоями, т.е. их можно менять местами, копировать, удалять, скрывать при выполнении и т.д. Очень удобно.

Я записал для упрощения примера всего несколько команд, хотя, если есть желание, можете добавить еще, например применить фильтр Sharpen для увеличения резкости.

2. Запускаем пакетную обработку

2.1 Здесь всё намного проще и делается в одном диалоговом окне File → Automate → Batch... В нём ставим в настройки такие, как на рисунке:

В группе контролов Source выбираем исходные фотографии для обработки, в группе Destination — куда и как сохранять полученные изображения.

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

Единственное на что стоит обратить отдельное внимание, флажки Override Action «Open» Commands и Override Action «Save As» Commands. Их стоит отмечать только тогда, когда действия открытия фотографии и её сохранения записаны непосредственно в макрос.

Если фотографии разбиты по темам в подпапки и нужно сохранить эту категоризацию, следует установить флажок Include All Subfolders, и в Destination указать эту же родительскую папку. Тогда исходники будут заменены обработанными фотографиями (мы же работаем с копиями), и также будут разбиты по папкам-темам.

2.2 Жмём Ok.

В заключение

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

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

* * *

Сканер блогов:

Утилиты для создания PNG-8. Fixed background images. Интересная реализация. Несколько простых правил для веб-дизайнеров.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

Психология пользователей и оптимизация изображений для веб

rotor — Sat, 29 Nov 2008 16:01:26 +0000

На мысль поэкспериментировать со способом оптимизации изображений для сети, натолкнул отчёт моих коллег по работе, побывавших на usability-семинаре Джеффа Джонсона в рамках конференции UserExperience '08.

Наверное, многие замечали, что изображения на страницах грузятся по-разному. Одни загружаются построчно, и создаётся впечатление что они грузятся сверху-вниз. Другие же грузятся сразу полным размером, но в «размытом» состоянии и постепенно детализируются.

Первый вариант получается, когда изображения просто сохраняются, а второй, когда при сохранении используется «прогрессивная развёртка». Какой способ сохранения лучше?

Эксперимент

Проведём небольшой эксперимент. Перейдите по двум ссылкам ниже (со сверхскоростным интернетом опыт не получится) и ответьте для себя на вопрос: «какая из картинок загружается быстрее?»

Ссылки: тест1 и тест2.

Результаты, которые я получил разослав ссылки своим ~~подопытным кроликам~~ друзьям и коллегам:

первый вариант — 9 человек;
второй вариант — 1 человек;
никакой вариант — 2 человека (буржуи на толстых каналах, у которых картинки грузились предательски быстро);
«задолбал ты со своими опытами!» — 2 человека.

Всего: 14 человек. Немного, но больше у меня испытателей не нашлось. Своими результатами вы можете поделиться в комментариях.

Военная тайна

Теперь раскрою секрет: оба изображения загружались одинаковое время, так как (в идеальных условиях) ваша скорость соединения была постоянной, а размер обеих картинок один и тот же — 290,8 KB. В первом случае изображение было сохранено с прогрессивной развёрткой, во втором — без.

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

Люди, за которыми я наблюдал, всегда говорили, что изображение уже загружено, хотя индикатор загрузки на закладке или в статус-строке браузера ещё показывал, что процесс не закончен.

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

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

Как

Теперь о мелочах, как сохранять.

Для этого достаточно просто поставить по галочке в диалоговом окне Save For Web & Devices в Photoshop для каждого формата:

Диалоговое окно при сохранении в формат JPEG.

Это для JPEG. Для форматов GIF и PNG есть аналог прогрессивной развёртки — чересстрочная развёртка, которая, по сути, даёт тот же результат.

Диалоговое окно при сохранении в формат GIF.

Диалоговое окно при сохранении в формат PNG.

Вроде бы полезная мелочь, о которой должны знать все, кто хоть раз открывал в самоучителе по Photoshop главу «Оптимизация изображений для Web». Но тем не менее не все используют. Да и я тоже, не всегда.

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

Что? Где? Когда?

Собственно, когда стоит и когда не стоит использовать.

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

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

Минусом может послужить то, что развёртка слегка увеличивает размер изображения, но я не заметил существенной разницы. Да и «быстрая» загрузка компенсирует пару лишних килобайт.

* * *

Сканер блогов:

Мужское и женское usability-начало на примере сайта Билайн :) Учитывайте пользователей с ограниченными возможностями при создании сайта.

* * *

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

Посетители сайтов: читатели, пользователи или участники?

rotor — Tue, 23 Sep 2008 00:38:54 +0000

Какую роль будет играть пользователь в жизни сайта? Это один из главных вопросов, на который нужно ответить ещё на ранних этапах проектирования, стоящий где-то между бизнес-стратегией и определением целей.

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

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

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

Пользователь — всегда ключевая фигура в любом проекте. Именно от его впечатлений, капризов, активности и интересов зависит, в итоге, судьба сайта, его популярность. И для этого нужно заранее определить его роль и возможности в каждом конкретном проекте.

Вроде бы определить роли просто: если «статичный» или корпоративный сайт — значит читатели, если онлайн-сервис (интернет-магазин) — пользователи (покупатели), если социальный проект или форум — участники (авторы). Но не так-то просто всё это увидеть в самом начале, при разработке, да и в одном проекте часто присутствуют пользователи с разными ролями.

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

В древности

Eщё лет пять назад, посетители скромно довольствовались ролью простых читателей. Единственным средством связи с автором были e-mail, опросы и гостевые книги, замечания в которых могли быть успешно проигнорированы или скрыты от чужих глаз тем же автором.

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

А потом появился загадочный «вебдваноль» и жизнь слегка изменилась...

Наши дни

Сейчас всё несколько сложнее, так как многие сайты должны совмещать в себе несколько функциональных ролей для различных групп посетителей, так как посетители могут быть не только читателями или участниками, но и авторами (например коллективные блоги, тот же habrahabr.ru).

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

Никто ведь не станет спорить, что для читателя важным является вывод текста и удобная навигация по материалам сайта, для автора — быстрый доступ к админке и удобные средства написания и публикации, для участника — удобство комментирования, доступ в личный кабинет, обзоры последних статей. Совместить всё это в одном проекте, чтобы было удобно одним и не мешало другим не такая простая задача, особенно если в самом начале что-то было упущено.

Послесловие

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

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

Ориентация на то, какую же всё-таки роль будет играть посетитель на отдельно взятом проекте, может значительно упростить процесс разработки, повлиять на выбор CMS для проекта, определить информационную архитектуру и компоновку страниц и т.д. А за бортом можно оставить крутизну разработчиков в познаниях hi-end-технологий, личные пристрастия и вкусы заказчика и умение дизайнеров рисовать непродуманные картинки вместо грамотных интерфейсов.

* * *

Сканер блогов:

Простая техника позиционирования изображения при обтекании текстом. Внимание! Фейковые знаки на дорогах! Восемь ошибок при развитии креативности.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

Секреты Photoshop для мастеров, часть 2

rotor — Wed, 20 Aug 2008 00:26:57 +0000

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

Итак, продолжаем.

1. Быстрое переключение между открытыми документами

Часто, при создании коллажей или хедеров для сайтов, в программе набирается не один десяток открытых файлов. И найти из них нужный бывает довольно затруднительно. Чтобы быстро переключиться между открытыми изображениями или просмотреть их, нужно запомнить комбинацию клавиш Ctrl + Tab. Это намного быстрее, чем просматривать изображения с помощью мышки.

2. Как освободить часть оперативной памяти

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

Диалоговое окно настроек General в Photoshop CS2.

Для этого зайдите в меню Edit -> Preferences -> General (или Ctrl + K) и уменьшите количество запоминаемых состояний изображения в поле History States. Чтобы изменения вступили в силу, необходимо перезагрузить Photoshop.

3. Как уместить большое трансформируемое изображение в открытом окне

Часто при трансформации объектов (Ctrl+T), если объект больше рабочего окна, угловые маркеры не видны. Приходится отменять трансформацию, затем изменять масштаб так, чтобы изображение полностью поместилось в окне и затем снова повторять попытку трансформации.

Если вы попали в такую ситуацию, не спешите всё отменять, нажмите Ctrl+0. Масштаб области активного окна изменится автоматически и угловые маркеры станут доступны для перетаскивания.

4. Как назначить собственные «горячие клавиши»

Помимо того, что в Photoshop существуют сотни клавишных комбинаций, вы можете назначить свои собственные для наиболее часто используемых операций (например я использую свои комбинации для быстрого доступа к фильтрам Gaussian Blur и Smart Sharpen).

Для этого заходите меню Edit -> Keyboard Shortcuts (Alt+Shift+Ctrl+K), выбираете из раскрывающихся списков нужную опцию и назначаете ей свою комбинацию клавиш. Все назначаемые комбинации должны быть вида: Ctrl + «нужная клавиша».

Если такая комбинация уже используется, программа выдаст предупреждение.

5. Как отменить сразу несколько действий

Обычно, для отмены последнего действия, удобно пользоваться комбинацией клавиш Ctrl+Z. Если же нужно отменить несколько последних действий сразу, пригодится Alt+Ctrl+Z. При каждом повторном нажатии этой комбинации, вы будете удалять (перемещаться по панели History вверх) по одному действию.

6. Быстрое изменение межбуквенного интервала (кернинга)

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

7. Как создать текстовый блок из обычного текста

При рисовании макетов сайтов часто приходится заполнять их тектовыми блоками, которые удобно сжимать/растягивать и не думать о поведении текста внутри (он растягивается и сжимается автоматически). А что делать, если вы забыли заключить текст в такой блок?

Пример текстового блока в Photoshop.

Чтобы вставить уже существующий текст в блок, нужно сделать активным слой с текстом, затем выбрать в меню Layer -> Type -> Convert To Paragraph Text.

Теперь при выделении любой части текста, вы увидите соответствующую рамку текстового параграфа.

8. Экспорт слоёв в отдельные документы

При подготовке графики для других редакторов, например для Flash, полезной может оказаться функция сохранения слоёв документа в отдельные файлы.

для этого зайдите в File -> Scripts -> Export Layers To Files. В открывшемся диалоговом окне можно указать каталог для сохранения, формат и префикс для названий файлов.

9. Как изменить фоновый цвет рабочего окна.

Установите необходмый цвет, и выберите инструмент Fill (G). Теперь зажмите Shift и переместите ведро за облать документа, на фон. Кликните и он заполнится выбранным цветом.

10. Как быстро раскрыть все сгруппированные в папки слои

Просто кликните на чёрный треугольник рядом с любой папкой сгруппированных слоёв, при зажатой клавише Ctrl. Точно также потом можно и скрыть все слои обратно в папки.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

Секреты Photoshop для мастеров, часть 1

rotor — Tue, 15 Jul 2008 19:14:41 +0000

Как сказал однажды мой коллега: «Photoshop — это такая программа, работая в которой на протяжении многих лет, можно каждый раз находить в ней что-то новое и ранее незнакомое».

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

1. Как найти центр любого документа

Допустим, вам нужно найти центр документа произвольного размера. Для этого сначала включите отобрежение линеек (Ctrl+R или меню View -> Rulers) и направляющих (Ctrl+H или меню View -> Snap). Затем нужно создать новый слой и залить его любым цветом (это необязательно, но помогает визуально определить середину). Установите приближение так, чтобы весь документ помещался в рабочей области. Затем наведите курсор на вертикальную линейку, зажмите клавишу мыши и тащите направляющую к центру документа. При приближении к центру, направляющая будет автоматически привязана к центральной точке по горизонтали. То же следует повторить и для верхней линейки.

Пересечение направляющих в центре документа.

2. Как скопировать сразу все слои

Например, у вас есть выделенная область, под которой находятся несколько слоев, которые необходимо скопировать. Чтобы не копировать каждый слой отдельно, а скопировать все сразу, достаточно выделить верхний из них и нажать Ctrl+Shift+C, чтобы скопировать и Ctrl+C, чтобы вставить скопированное отдельным слоем в этом или другом документе.

3. Как не терять время на отмену действий в диалоговых окнах

Работа с большинством диалоговых окон в Photoshop (таких как Levels, Hue/Saturation, галерея фильтров и др.) у среднестатистического пользователя обычно выглядит так: пользователь запускает диалоговое окно, например Hue/Saturation (Ctrl+U), делает некоторые манипуляции с изображением и вдруг видит, что результат ужасен, начальных настроек он не помнит, поэтому жмет кнопку Cancel (Прервать), и запускает это же диалоговое окно по-новому. И такой круг может повторяться несколько раз, пока не будет достигнут желаемый результат.

Чтобы сэкономить свое время при работе с диалоговыми окнами, пользуйтесь кнопкой Alt. Она заменяет значение кнопки Cancel (Прервать) на Reset (Сброс), и возвращает значения настроек диалогового окна в начальное состояние.

Изменение значения кнопки Reset при зажатой клавише Alt.

4. Увеличение/уменьшение масштаба без использования Zoom

Чтобы увеличить или уменьшить размеры изображения при работе совсем необязательно пользоваться инструментом Zoom (Z) или полями ввода в левых углах рабочего окна и окна Navigator. Photoshop предоставляет более быстрый и привычный способ изменения масштаба — нажатием клавиш Ctrl++ (увеличить) или Ctrl-- (уменьшить). Диапазон значений точно такой же, как и у инструмента Zoom (18,18, 25, 33,33, 50, 66,67, 100, 200, 300, 400, 500, 600, 700, 800, 1200, 1600 %).

5. Как получить цвет из другого документа или программы

Photoshop позволяет при помощи стандартной пипетки (I) получить нужный цвет с рабочего стола или из других программ, например браузера.

Для этого необходимо уменьшить окно Photoshop до минимального размера, чтобы на экране был виден нужный цвет. Затем вызвать инструмент Eyedropper Tool (I), кликнуть по документу в рабочей области Photoshop, и, не отпуская левой клавиши мыши, навести пипетку на любую нужную область экрана, за пределами редактора.

6. Как быстро изменить единицы измерения

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

Меню для быстрого изменения единиц измерения в Photoshop.

Двойной щелчок по линейке левой клавишей мыши откроет вкладку Units & Rulers диалогового окна Preferences, в которой можно поменять не только единицы измерения, но и разрешение экрана, печати и т.д.

7. Как быстро очистить оперативную память

Каким бы навороченным ни был ваш компьютер, Photoshop — это такой монстр, который сожрёт все её ресурсы. И рано или поздно всем придется с этим столкнуться.

Чтобы быстро умерить аппетит прожорливой программы можно очистить оперативную память от ненужных данных. Для этого нужно зайти в меню Edit -> Purge. откроется выпадающее меню с четырьмя пунктами Undo (предыдущее действие), Clipboard (буфер обмена), Histories (история состояний) и All (очистить все). Тут уж вам решать, чем можно пожертвовать для дальнейшей работы. Перед проведением экспериментов с этой опцией желательно сохраниться.

8. Как быстро менять размер и жесткость кисти

Чтобы постоянно не заходить в настройки текущей кисти правой клавишей мыши, в Photoshop предусмотрены несколько сочетаний быстрых клавиш. Чтобы быстро увеличить или уменьшить кисть, следует воспользоваться клавишами [ и ] соответственно. Также на ходу можно менять жесткость краев выбранной кисти: Shift+[ (более мягкая) и Shift+] (более жесткая).

9. Указание точных размеров колонок текста

Часто дизайнерам, при рисовании макетов, приходится создавать текстовые колонки. Однако простое растягивание рамки инструментом Type Tool (T) не позволяет точно задавать параметры блока. Приходится сначала вставлять такой блок, а затем, с помощью направляющих, настраивать его размеры.

Но есть способ и проще — достаточно при растягивании рамки для текста инструментом Type Tool (T) нажать Alt. После вставки текста откроется диалоговое окно, в котором можно точно указать высоту и ширину текстового блока.

Диалоговое окно для задания размеров текстового блока в Photoshop.

10. Как быстро перейти к нужному слою

Часто при выполнении больших проектов в PSD-файле находится больше сотни слоев. И даже если они все подписаны и хорошо сгруппированы между собой, чтобы найти единственно нужный приходится изрядно повозиться. Окно Layers (слои) становится слишком неудобным для такого поиска.

Для поиска нужного слоя пригодится инструмент Move Tool (V). Чтобы перейти на нужный слой с изображением, нужно нажать комбинацию клавиш Ctrl+V, при этом слой установится текущим в окне Layers.

* * *

Сканер блогов:

Недавно 12-ю горячими клавишами Photoshop, в помощь дизайнеру поделился Maxim Minin. Презренный манимейкер выразил свои соболезнования по поводу вылета сателлит из выдачи.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

Рисуем фракталы в Apophysis 2.0

rotor — Wed, 02 Jul 2008 09:51:13 +0000

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

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

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

Что может Apophysis

Для начала несколько примеров сгенерированных программой рисунков.

А вот примеры профессиональной работы с программой.

Качаем, устанавливаем, разбираемся

Скачать программу можно бесплатно с официального сайта разработчиков apophysis.org (версия 2.02 — 2.6 MB) или более новые бета-версии с sourceforge.net (версии 2.06^beta и 2.07^beta — по 1.2 MB ).

Установка до безобразия простая, поэтому на ней останавливаться не буду. Программа не является плагином для Photoshop, а значит устанавливается как отдельное приложение.

Интерфейс Apophysis выглядит примерно так:

Полностью все описывать не вижу смысла, все стандартно и легко постигается методом «научного тыка». По вопросам назначения кнопочек-менюшек рекомендую почитать блог Наталии Македы, целиком и полностью посвященный Apophysis. Там все это расписано в мельчайших подробностях.

Остановлюсь на некоторых полезных мелочах:

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

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

Установить лучшее качество картинки можно в меню Options (Ctrl+P) -> закладка Display, поле Quality (максимальное значение 100).

Применять различные алгоритмы к фракталу (менять его внешний вид), можно несколькими методами:

в панели Editor (F4) — ручное изменение всех параметров, много всяких полей для ввода значений переменных, изменения параметров осей, вариаций и т.д. Наверное самое сложное для освоения.
панель Mutation (F7) — автоматичесоке изменение (можно выбрать алгоритм и скорость мутации, если поставить галочку в чекбоксе “Same no. of transforms”, то изменения будут вноситься в текущий вариант, если нет — генерироваться новый).
Ну и рандомизатор (случайное изменение), доступен в меню Flame -> Randomize (или Random Weights). Сгенерированные варианты непредсказуемы.

Остальные средства, которые позволяют модифицировать внешний вид полученного варианта, спрятаны под кнопкой Adjust (F5). Здесь можно менять приближение/удаление камеры, гамму и яркость изображения, заливать другим градиентом, менять размер и другое.

Уроки и документация по Apophysis

Поучиться рисовать (или создавать?) некоторые вещи можно на apophysis.wikispaces.com (подборка уроков), arcanefractals.com (уроки, галереи и полезные ссылки), и apophysis.deviantart.com (статьи, уроки, примеры работ) и официальном сайте apophysis.org, в разделе tutorials.

Где применять

Первое, что приходит на ум, это обои, большие и красивые :) Можно попробовать и в дизайне сайтов, если будет в тему. У меня был такой опыт — hardkvas.com, для сайта о клубной жизни.

Красим фракталы в Photoshop

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

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

2. Открываем его в Photoshop и обесцвечиваем (ручками — Ctrl+U и ползунок Saturation максимально влево (-100) или автоматом Image -> Adjustments -> Desaturate).

3. Убираем лишние артефакты с черного фона (Ctrl+L -> черный ползунок вправо до получения приемлемого результата).

Далее можно пойти двумя путями:

Монохромный вариант

Если нужен одноцветный рисунок: Ctrl+U, ставим галочку в чекбоксе ‘Colorize’, и двигаем ползунки до нужного цвета (начните с верхнего Hue, а затем подкорректируйте насыщенность вторым Saturation, яркость (Lightness) обычно менять не требуется). Жмем применить (Apply).

Результат:

Цветной вариант

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

Затем меняем тип наложения для слоя gradient на overlay и ставим ему прозрачность около 60%. Все, можно сохранять.

Финальная версия:

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

* * *

Сканер блогов:

Много примеров креатива в наружной рекламе от Квадрата Малевича. shakin.ru порадовал очередным блог-шоу под номером 9 с кучей интересных материалов о жизни блогосферы.

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

Anti-aliasing для текста в браузерах и в Photoshop

rotor — Sun, 22 Jun 2008 21:58:07 +0000

Часто, просматривая различные портфолио с макетами сайтов, замечаю, что не все дизайнеры понимают, когда при рисовании к тексту следует применять anti-aliasing, а когда лучше оставить его «как есть».

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

Да и некоторые клиенты начинают задавать нежелательные вопросы типа: «А почему вы поменяли нам шрифт на сайте? А вот в нарисованной версии был другой!»

Что же такое anti-aliasing и когда его следует применять? Попробуем разобраться.

Немного теории

Определенение с ru.wikipedia.org

Сглаживание (anti-aliasing) — технология, использующаяся в обработке изображений с целью сделать границы кривых линий более гладкими, убрав «зубцы», возникающие на краях объектов. Сглаживание было придумано в 1972 в Массачусетском технологическом институте в Architecture Machine Group, которая позже стала основной частью Media Lab.

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

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

Как это выглядит в жизни

Специально для этой цели, написал небольшое приложение на JavaScript, запустив которое в нескольких браузерах, можно будет сделать для себя некоторые выводы.

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

Вот лишь несколько простых наблюдений на основе данного приложения:

к большинству стандартных гарнитур (Arial, Tahoma, Verdana, Times New Roman, Georgia) сглаживание применяется начиная с размера в 17-18 px, причем насыщенность начинает значительно отличаться от предыдущей;
к шрифту Courier New в обычных начертании и насыщенности сглаживание не применяется вообще;
текст меньше 9 px является нечитаемым;
в Opera не устанавливается размер шрифта меньше 9 px;

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

Разбираемся с Photoshop

Photoshop предлагает нам на выбор несколько вариантов anti-aliasing'а: Sharp, Crisp, Strong, Smooth.

В работе эти методы выглядят примерно так (увеличение 300%):

В нормальном размере (100%):

Теперь сравним как отличаются методы сглаживания реализованные в Photoshop от, например, сглаживания в браузере Mozilla Firefox 3. Скриншот из Anti-alias tester для шрифта Arial:

Возможно разница на примере не очень заметна, но в реальных работах для разных шрифтов она существенна. На мой взгляд, наиболее похожи на пример из браузера методы Crisp и Smooth. Именно их я чаще всего использую в работе. Хотя на практике случаи могут быть разными.

В общем тестируйте, сравнивайте и используйте в своих макетах. Удачи в работе!

Новости блога

Установил в блоге плагин Nofollow Free, который убирает в ссылках комментариев атрибут nofollow (и еще про nofollow) для комментаторов с количеством сообщений больше пяти. Возможно это подтолкнет некоторых посетителей к ~~обсуждению статей~~ общению со мной в комментах. Спамеров и флудеров буду безжалостно банить и модерировать всеми доступными методами!

Сканер блогов:

Денис Судилковский заставляет дизайнеров думать о своей работе правильными мыслями. Начинающий вебмастер делится секретами успеха технологии RSS. Настя Манно пишет о тенденциях в веб-дизайне 2008. Ну а на blogowar'e, я не сдвинулся ни на одну позицию :(

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи:

SiteGrinder 2 заменит HTML-кодеров? Обзор плагина для Photoshop

rotor — Mon, 16 Jun 2008 07:07:07 +0000

Хочу рассказать о своем знакомстве с весьма интересным плагином для автоматической верстки PSD-файла в HTML-страничку (а если точнее — в формат XHTML 1.1). От «верстальщика» требуется всего лишь нажать на кнопку, подождать пару минут и получить на выходе готовый CSS-шаблон!

Для начала обещания от разработчиков (дословно):

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

Заинтриговали? Тогда качаем бесплатную демо-версию (17,2 MB) и начинаем разбираться.

Установка и настройка плагина

В скачанном архиве находится exe-файл, поэтому особых проблем с установкой возникнуть не должно (он автоматически определит где находятся плагины для Photoshop на Вашем компьютере). Я инсталлировал в CS2 и CS3 — плагин нормально работал в обеих версиях.

После установки открываем Photoshop, открываем свой макет сайта (вообще-то он должен быть подготовлен к обработке плагином, но об этом ниже) и запускаем плагин (File -> Automate -> SiteGrinder 2). Произойдет проверка макета и Вам выведут предупреждение об ошибках, если таковые имеются, со ссылками на документацию, как их устранить.

Также, на закладке Report, есть примеры «типичной» подготовки макета к автоматической верстке.

Вообще закладок, как и настроек, в программе не очень много, поэтому разобраться с ними не составит особого труда. Наибольший интерес для работы представляют закладки Pages и Compression. На первой можно выбрать выравнивание макета на странице, прописать title, выбрать фоновые цвета. На второй же выбрать сжатие и формат для сохраняемых изображений при нарезке. Все теперь можно нажать кнопочку Build и полюбоваться полученным результатом.

Ах да, не удивляйтесь, но бесплатно порадоваться успехам нам не позволят — весь CSS-макет будет покрыт водяными знаками :(

Как это работает?

Из примерно 15-20 моих тестовых попыток, половина показала более-менее приемлемые результаты (возможно из-за того, что я особо не занимался подготовкой макетов к верстке и не следовал некоторым рекомендациям). Во всех случаях XHTML и CSS-код соответствовали требованиям W3C.

По большому счету, каждый слой в PSD-файле преобразуется в отдельный div (название слоя станет названием CSS-идентификатора или класса), который располагается относительно других с помощью абсолютного позиционирования. Тут уже задача для дизайнера — заранее склеить все слои, которые должны выводиться в одном блоке, что, в принципе, не сложно, если есть способность «видеть» как должен выглядеть макет в HTML.

Дизайн должен быть заранее подготовлен к верстке. Тоесть в соответствии с документацией, слоям должны быть прописаны определенные названия.

Все слои с текстом преобразуются в текст на странице (кодировка UTF-8), но с кириллицей как всегда проблема — все русские буквы почему-то прописываются HTML-сущностями. Так, что, с редактированием статичного текста впоследствии могут быть проблемы. Лучше его заранее поменять на «нормальный». Свойства текста полностью копируются из исходника, поэтому лучше сразу подумать об иерархии, читабельности и цветах.

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

Все изображения вставляются на страницу с помощью свойства background-image.

С кроссбраузерностью особых проблем тоже не наблюдалось, да и откуда им взяться-то, при абсолютном позиционировании. Было пару проблем с отображением меню, но это из-за моей лени при подготовке к верстке.

Выводы

Мне не с чем сравнить SiteGrinder 2, потому что ничего подобного я раньше не видел, а сравнивать с WISYWIG-редакторами не стану. Так как тут процесс полностью автоматизирован. Лично мне, плагин понравился, несмотря на то, что в глаза сразу бросаются многие его недостатки. Надеюсь в последующих версиях он станет только лучше.

Не рискнул бы его использовать в макетах со сложной версткой или на больших динамических сайтах. Зато он идеально подходит для создания сайтов-визиток и страниц-заставок, так как на выходе получится именно то, что нарисовано в дизайне без лишних усилий и затрат времени. Профессионалам пригодится в хозяйстве для того, чтобы просто «выключать мозг» на некоторых проектах, а дизайнерам, которые понятия не имеют о XHTML и CSS-верстке — для собственных небольших сайтов.

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

Немного о грустном

На данный момент существует две версии SiteGrinder 2: Basic и Pro (отличаются функционалом). И приобрести их можно на официальном сайте medialab.com за $129 и $349 соответственно. Быстрая пробежка по торрентам в поиске ~~взломанной~~ свободной версии не дала никаких результатов. По сети гуляют только демоверсии…

* * *

Сканер блогов (ищем братьев по разуму!):

«17 июня не забудьте скачать FireFox 3!» — хотел написать у себя, но уже написала вся блогосфера, поэтому не буду повторяться. Еще об этом же тут. Расскажите о своем будущем проекте на конкурсе фрилансера Zpro, и получите бесплатный домен в подарок!

Мой твиттер, в котором я делюсь полезными ссылками и мыслями — twitter.com/irotor.

Похожие статьи: