VectorDesigner

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

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

Заливка: без заливки, сплошная, градиентная (линейная, радиальная, гаусса), картинкой, монохромной картинкой.

Простые геометрические операции: сложение, вычитание, пересечение и операция «исключающее или».

Текст редактируется средствами MacOS X, но кроме того поддерживаются следующие возможности: расположение текста внутри фигуры и вдоль линии, сам по себе текст может иметь заливку на фоне, эффект тени, выравнивание.

Ко всем объектам можно применять эффект смешивания цветов (Blending Mode) и полупрозрачность. Поддерживаются слои и подключаемые/отключаемые фильтры.

Документы могут редактироваться только в трёх цветовых схемах: RGB, CMYK и Gray (хотя, что ещё нужно?).

Внимание!
Самая мощная фича на которую стоит обратить наибольшее внимание: встроенный Flickr browser. Но лучше всего объяснит его работу это видео.

Остальные видео-руководства расскажут об основных преимуществах программы.

Чего не хватает:

• Настройка градиента с несколькими ползунками;
• Возможность сдвига градиентной заливки и заливки картинкой внутри объекта.
• Более лёгкий способ редактирования сгруппированных объектов (например, при двойном щелчке «прыгать» внутрь сгруппированного объекта).
• Лучшая поддержка ai-файлов. Открывать-то открывает, но такие тормоза, что редактировать невозможно.
• Обводка для текста (сейчас можно только конвертнуть в кривые и тогда добавить обводку иначе обводится прямоугольная область вокруг текста).
• Не хватает более тонкой настройки текста (трекинг, кернинг, интерлиньяж).

Если бы все эти пункты были бы реализованы, я бы точно купил эту программу и снёс бы Adobe Illustrator. Если конечно она не станет дороже $100. Сейчас цена программы — $69,95.

Pixelmator

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

Накидал буквально за 5 минут:

Если добавят стили слоёв, тоже перейду на него, ведь стоит всего $59.

LightZone

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

Было:

Стало:

Было:

Стало:

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

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

Цена полной версии программы — $199.95. Внимание! Есть Windows и Linux версия!

Прямой излом

Самый простой способ создать ломаный градиент в Photoshop – это применение стиля Gradient Overlay к слою с объектом. Настраивается градиент примерно так:

1. Открываете окно со стилями слоя и выбираете стиль Gradient Overlay
2. Устанавливаете линейный градиент
3. Выбираете цвета и растанавливаете ползунки примерно так:

В итоге получается так:

По краям выбраны основные цвета градиента. В центре переходные цвета но не очень сильного контраста соедены вместе – получается преломление. Оно и создаёт иллюзию излома поверхности.

Но этот излом очень небольшого контраста без содержимого в объекте и без фона, конечно же, ничего из себя не представляет. Поэтому попробуем используя стандартные эфекты Photoshop’a изобразить, что-то существенное.

Стеклянная кнопка

Для начала уясним, что же создаёт этот эффект “стеклянности”? А создают его два параметра: прозрачность и глянец.

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

Глянец создаётся очень просто: градиент от светло-серого к тёмно-серому с Blend Mode: Screen. Причём, чем светлее оттенки серого, тем ярче кажется освещение отражаемое от кнопки.

Наглядным примером может послужить создание кнопки на подобие используемых в Mac OS X. Для освоения этого простого урока вам понадобится всего пара минут и Adobe Photoshop.

Рисуем

1. Создаём новый документ (не важно какого размера). И заливаем его светлосерым фоном.
2. Создаём новый слой. Выделяем область как показано ниже (это увеличенное изображение, реальный размер 71х19)

   

   т.е. выделение должно быть закруглено, но для этого не используйте Select -> Modify -> Smooth, а используйте к примеру инструмент Rounded Rectangle Tool, чтобы нарисовать векторный путь, а потом его выделить или сделайте это с помощью Marquee Tool скомбинировав два закруглённых выеления по-краям и одно прямоугольное по-середине.

3. Заливаем выделение любым сплошным но контрастным с фоном цветом.
4. Убираем выделение (Ctrl + D). Дублируем слои два раза. В итоге должны получиться три слоя (кроме фона).
5. Верхний слой называем “Glance”. Средний – “Volume”. Нижний – “Button”. Верхний и средний слой пока скрываем.
6. Открываем Blending Options у слоя “Button” и устанавливаем Gradient Overlay. Цвета конечно же выбираются наугад, главное чтобы в итоге верхний цвет был более тёмным, а нижний более светлым и ярким.

   

   

   Получаем следующее:

   

7. Добавляем стиль Stroke и выставляем параметры как показаны ниже:

   

   

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

   

8. Добавляем стиль Drop Shadow. Небольшая тень от кнопки, тоже добавит иллюзию объёма.

   

   

9. Выбираем слой “Volume”. Влючаем его видимость. Открываем Blending Options. С самого начала ставим Fill Opacity на 0%.
10. Добавляем стиль Gradient Overlay:

    

    

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

    

    т.е. края у кнопки должны быть затемнены.

11. Ну и последнее: глянец. Показываем слой “Glance”. И изменяем его форму и расположение, чтобы получилось примерно так (увеличенное изображение):

    

12. Обрезаем нижнюю часть:

    

13. Устанавливаем Fill Opacity на 0%. Применяем стиль Gradient Overlay:

    

    

    Получаем глянцевый эффект:

    

14. Можно добавить надпись:
    Для Windows (Tahoma):

    

    Для Mac OS X (Lucida):

    

Конечно же в Web-дизайне урок можно использовать для создания горизонтального меню, но не переусердствуйте, не лепите эти кнопки куда попало. Ну а в интерфейсе такие элементы весьма типичны.

Готовая кнопка в psd-формате: mac_button.zip

Направление градиентов

Давайте сравним объекты с разными направлениями градиентов. Для этой статьи я разберу только два вертикальных направления.

Если у вас с ощущениями всё в порядке, то вы наверняка заметите, что:

• градиент с переходом цвета от тёмного к светлому (сверху-вниз) создаёт эффект вогнутости
• градиент с переходом цвета от светлого к тёмному (сверху-вниз) создаёт эффект выпуклости

Почему так происходит?

Всё очень просто. Мы же привыкли что свет в основном падает сверху (в смысле от солнца, луны или ламп), поэтому выпуклые предметы сверху будут освещены, а снизу – затемнены. Логично также, то что вогнутые предметы сверху затемнены, и снизу освещены источниками света.

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

Как применять градиенты в web-дизайне?

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

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

Как подобрать цвета?

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

Нельзя!

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

Вы можете сами убедиться в этом если посмотрите на эти примеры.

А сходственные?

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

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

Color Schemer ColorPix

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

Использование очень простое:

1. Наводите курсор на любой пиксел на экране
2. Нажимаете любую клавишу чтобы заблокировать цвет
3. Нажимаете на любое числовое/кодовое представление цвета чтобы скопировать его

На мой взгляд, это самая удобная програмка в своём роде в силу своей простоты и компактности.
Скачать программу ColorPix

Color Schemer

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

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