Сделан видео ролик по заказу «TCEngine». Инструменты: Adobe After Effects, Steinberg Nuendo.
Для озвучки были использованы сэмплы от Video Copilot.

В этом уроке я хочу рассказать как при помощи Photoshop сделать эффект мокрого пола для текста. Для примера возьмем одну букву. Пусть это будет буква «К». Для урока понадобится Photoshop не ниже CS3.

Отражение

Как создавать новый файл, написать текст и изменить шрифт я рассказывать не буду. Начнем с копирования слоя с нашим текстом. Полученный слой переворачиваем по вертикали (Edit/Transform/Flip vertical). Далее выравниваем его верхнюю линию с нижней линией первого слоя инструментом Move (V). Растеризируем его (Layer/Rasterize/Type) и превращаем в Smart Object (Layer/Smart Objects/Convert to Smart Object). Теперь этот слой нужно немного размыть до состояния как на рисунке ниже (Filter/Blur/Guassian Blur). В появившемся Smart Filters выделяем маску, выбираем Gradient Tool (G) от черного до белого и тянем его снизу вверх, от 80% слоя до самой верхней линии слоя. Таким образом получаем размытость отражения относительно дальности. Теперь нам нужно создать маску для слоя отражения, для этого кликаем по иконке
Add layer mask на панели слоев. Выделяем получившуюся маску и повторяем все, что мы сделали с маской для Smart Filters. Осталось только повысить прозрачность для отражения. На панели слоев, в поле Opacity меняем значение на 30%. Отражение готово.

Тень

Теперь нам нужно создать тень от текста. Для этого создаем новый слой, передвигаем его в самый низ по списку (но не ниже Background). Выбираем инструмент Brush Tool (B) с параметрами: Hardness 0 и диаметром чуть большим чем толщина линии буквы и рисуем два пятна как на рисунке ниже. Далее сплющиваем слой почти до минимума и ставим прозрачность 80%.

Рефлекс

Для полной реалистичности создадим на букве рефлекс от пола. Для этого применяем самой букве градиент (Layer/Layer Style/Gradient Overlay) с цветами как на рисунке ниже.

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

Скоро третье декабря. Всемирный день компьютерной графики. К сожалению, пока еще не официальный.

3December уже несколько лет справляют во многих странах мира. Надеюсь и в Ташкенте что-нибудь придумаем. В Москве, в этом году устраивают крупный эвент, с такими спонсорами как Adobe и nVidia. Компания Autodesk каждый год во всем мире устраивает незабываемые эвенты с презентациями и мастер-классами.

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

На моем любимом, прекрасном, красивом, удобном, лучшем сервисе Preloaders.net сегодня было зафиксировано (внимание) один миллион (1.000.000) скачиваний прелоадеров. Поздравляю себя и Тимура Гаффорова со столь знаминательным событием. Шампанское, салют, гуляния.

P.S. Google PR уже 5, а вот Яндекс тормозит — ТИц 20.

Я всегда мечтал, чтобы при помощи CSS можно было применить несколько фоновых рисунков к одному элементу, чтобы можно было обрезать фоновые рисунки. Мне надоело высчитывать у элементов padding, border, margin, чтобы потом присвоить width и height.

В CSS3 наступит почти рай для верстальщиков. Можно будет наконец сделать идеальную верстку.

Самое полезное в CSS3

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

На самом деле все максимально просто, нужно всего лишь прописывать url и его параметры через запятую.
Пример: background: url (‘bg1.jpg’) top left no-repeat scroll, url (‘bg2.jpg’) 100px 20% repeat-x scroll, url (‘bg3.jpg’) bottom right repeat-y scroll;

Сайты с большим количеством графики, иконок и т.д. обычно делаются «спрайтами», то есть вся графика в одном файле. Сейчас все поместить в один файл не получается, потому, что файл придется делать огромных размеров (если страница «резиновая»). Но в CSS3 решили эту проблему, придумав параметр image-rect, при помощи которого можно обрезать фоновую картинку убирая лишнее. В данный момент этот параметр работает только в последних версиях Mozilla Firefox и пишется -moz-image-rect.
Пример: background-image: -moz-image-rect (url (‘bg.jpg’), 20, 30, 15, 40);

Следующее супер-мега нововведение — параметр box-sizing. В CSS 2.1 padding и border добавляют элементу ширину и высоту. К примеру, если к диву применить width: 10px; border: 10px; padding: 10px, то в иторе этот див будет 50 пикселей в ширину. Если же применить к элементу box-sizing: border-box, то все бордеры и паддинги окажутся внутри элемента, естественно это отразится на содержании элемента.

В CSS3 к селекторам можно будет применять особые атрибуты. Нужны они для того, чтобы применять стили к элементам с определенными атрибутами и значениями. Существует три варианта записи: [атрибут^=значение], [атрибут$=значение], [атрибут*=значение]. Первый применяет стили если к элементам потомкам, которым присвоен указанный атрибут и его значение начинается с указанного, второй если заканчивается и третий если содержит.
Пример: ul.filelist a[href$=”mp3”] { background: url (‘mp3.png’);}

Еще несколько полезностей

word-wrap: break-word позволяет разбивать слово для переноса его на следующую строку. Еще бы ставил знак переноса, так ему бы цены не было.

Сейчас многие сайты пишут заголовки не стандартными шрифтами, вставляя их при помощи Adobe Flash. Теперь вместо flash можно воспользоваться @font-face.
Пример: В CSS файле прописываем нужный шрифт @font-face { font-family: Helvetica; src: url(Helvetica.ttf'); }. Ну, а дальше можно спокойно указывать Helvetica в font-family.

Думаю про border-radius, border-image, text-shadow, box-shadow, opacity все уже слышали и использовали.

Сегодня нашему любимому городу Ташкенту исполнилось 2200 лет. Тестовый салют уже прогремел вчера.
Я как истинный узбекистанец, не могу пройти мимо такого события. Вложу свои пять копеек этой маленькой иллюстрацией.

Повторяю свой пост из старого блога про прекраснейший сервис для генерации индикаторов загрузки ajax.

Ситуация с Preloaders.net сейчас такова — с сайта ежедневно скачивают минимум 2000 прелоадеров, новые прелоадеры появляются каждую неделю, количество ссылок на сервис всегда растет, а с ним и популярность. Две светлые головы продолжают думать над улучшениями, по ходу добавляя их.

Вставил бы в пост пару прелоадеров с сайта, но не хочу чтобы у меня на сайте, что-то шевелилось. Лучше сходите и сами посмотрите.