Плакат нарисован мною и используется в качестве обложки програмки для спектакля «Пигмалион», который состоится сегодня 24 марта в 19:30 в Доме Москвы.

Вот такой у меня куб:

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

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

Я выбрал источник света справа, выше линии горизонта.

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

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

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

Ещё нужно так же учесть:

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

Замечание: точка схода всегда должна находиться ниже источника света. Если конечно ваш куб не приклеен к потолку.

От точки схода к каждому углу принадлежащему нижней грани проводим направляющие.

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

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

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

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 версия!

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

Кроме того, для лучшей совместимости общественная организация «Barcamp Latvija» была переименована в «Social Media Bridge», которая будет заниматься не только организацией мероприятий подобных BarCamp, но и продвижением и популяризацией Новых Медиа.

логотип

визитки

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

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

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

Результаты конкурса «Чья Магда круче?»

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

Победитель

• Проходит по восьми слоям и изменяет им прозрачность,
• Экспортирует картинку в gif,
• Повторяет действие восемь раз с изменёнными значениями прозрачности для каждого раза. В этоге экспортируется восемь картинок.

Что нужно сделать вам?

• Скачайть action-файл и psd-файл.
• Action-файл киньте в папку [Adobe Photoshop folder]/Presets/Photoshop Actions
• В psd-файле восемь слоёв обозначеных номерами. Нарисуйте на каждом слое фрагмент иконки.
• Запустите Action.

Важно: перед запуском action’a убедитесь, что у вас на диске C: есть папка ajax_icon. Именно в эту папку будут экспортироваться готовые картинки. Если папки не будет или она будет неправильно названа, то экспорт работать не будет.

В итоге будет создано восемь файлов с названиями a1.gif, a2.gif … a8.gif. Из этих картинок вы можете сделать анимированный gif вашим любимым способом, будь то ImageReady, Photoshop CS3 или какая-нибудь другая программа.

Тем, кто не умеет создавать анимации в программах могу посоветовать online-генератор gif-анимаций — Gifninja.

Каждую такую иконку я создаю с помощью моего Action’a за пару минут.

Рисовал в Corel Draw, так что если захотите сами такое творить, то используйте векторные редакторы, там будет проще чем в фотошопе.

Одноточечная (прямая) перспектива.

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

Двухточечная (линейная) перспектива

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

Видео-урок, о том, как сделать куб в такой перспективе в Gimp.

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

Трёхточечная (воздушная) перспектива

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

Четырёхточечная (широкоугольная) перспектива

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

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

Пятиточечная (сферическая) перспектива

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

У меня, конечно, не очень правильно получилось, но думаю, принцип вы поняли.

Шестиугольная (двойная сферическая) перспектива

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

Дополнительный материал:

• http://graphic.org.ru/hagan4.html
• http://demiart.ru/forum/index.php?showtopic=20342
• http://demiart.ru/forum/index.php?showtopic=14029
• http://www.artlebedev.ru/kovodstvo/101
• http://ru.wikipedia.org/wiki/перспектива
• http://www.termespheres.com/perspective.html

Вот такой кубик можно получить если делать его по всем правилам:

Прямой излом

Самый простой способ создать ломаный градиент в 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-дизайне?

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

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

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

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

Нельзя!

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

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

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

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

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

Настроение было порисовать. Но вообще статья будет не о графике, а о коде.

События JavaScript

Те кто изучал JS знают, что в основном события пишутся внутри тэга как атрибуты и применяются к конкретному элементу. Например:


<div id="someblock" onmouseover="this.backgroundColor='#eee'; onmouseout="this.backgroundColor='#fff' ">-----</div>

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

Событие можно так же описать только в javascript коде.

• Или вызвать функцию выполняющую действия над объектом:

  
function MouseOver(){
.........
}
object.onmouseover = MouseOver


• Или создать тут же анонимную функцию и сотворить с объектом всё что хочется:

  
object.onmouseover = function(){
.........
}


В моём новоиспечённом блоге вы могли заметить меняющие цвет поля ввода. Очень часто начинающие программисты неправильно выбирают события для активирования поля. Они выбирают onclick. Но они забывают, что существует ещё кнопка [TAB], с помощью которой пользователь может переключаться по полям ввода постепенно заполняя форму. Событие onclick это щелчёк мышью. Чтобы изменять фон поля ввода при активации оного, следует использовать событие onfocus, а при деактивации – onblur.

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


function add_focus(element){
element.onfocus = function(){
this.style.backgroundColor = "#FFF"
}
element.onblur = function(){
this.style.backgroundColor = "#ebebe4"
}
}



function Input_Live(){
var elements = document.getElementsByTagName("input")
for (i = 0; i < elements.length; i++){
if (elements[i].type == "text" || elements[i].type == "password"){
add_focus(elements[i])
}
}
var elem_txt = document.getElementsByTagName("textarea")
for (i = 0; i < elem_txt.length; i++){
add_focus(elem_txt[i])
}
}

Функция Input_Live(), получает все элементы по тэгам input и textarea, проверяет у тэгов input атрибут type, и если он равен "text" или "password", применяет функцию add_focus() к каждому объекту. Функция add_focus() добавляет к объекту обработку событий onfocus и onblur в качестве анонимных функций.

Обратите внимание: внутри анонимной функции мы можем обращаться к объекту напрямую через this. Это очень удобно.

Ну и осталось всего лишь запустить функцию Input_Live(). Это можно сделать или в body:


<body onload="Input_Live()">

Или в самом конце html-шаблона (если для Wordpress, то это footer.php) написать:


<script type="text/javascript">
<!--
getElements()
// -->
</script>


Кстати, пока статья не закончилась, хочу задать вопрос: Кто как делает дебаг? Я имею в виду получение значения функции или переменной или свойства объекта в JavaScript?

Я, например, делаю так:
У меня две функции:

1. Первая почти имитирует оператор echo в php:

   
function echo(str){
document.write(str)
}

   В нужном месте вызываем:

   
echo (something);


2. Вторая почти такая же, только помещает вывод в указанный объект:

   
function echoIn(obj, str){
var obj = document.getElementById(obj)
obj.innerHTML += str
}

   И вызывается так:

   
echoIn ("obj_id", something)

   где, obj_id - id элемента в который мы хотим вывести результат.

Поделитесь своими секретами. ))