Нет комментариев 24.10.2006

Сегодня я расскажу вам, как сделать коробку для веба. Туториал может пригодится тем, кто продает какую-то интеллектуальную (виртуальную) собственность и хочет оформить ее в привычную покупателю упаковку - коробку.

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

На коробке можно разместить различные элементы - полосы, название, типа-текст (“типа”, потому что потом картинка искажается и текст может стать нечитаемым). Все эти элементы надо расположить на коробке до ее создания, а потом слить все слои (в меню Layer > Merge Visible). Далее многие операции я буду описывать с помощью горячих клавиш и напоминаю, что сочетания клавиш работают только при английской раскладке клавиатуры.

Картинка на изображении выше уже немного уменьшена и помещена в центр рабочего поля. Следующий этап - расставляем направляющие (для краткости - рулеры). Для начала “отбиваем” картинку вертикальными и горизонтальными рулерами по краям.

Рулер ставится просто. Кликните по вертикальной (или горизонтальной) линейке и как бы “вытяните” из нее рулер и подведите к картинке. Рулер должен как будто “прилипнуть” к краю. Чтобы видеть линейки, они должны быть включены (View > Rulers), а “прилипание” - View > Snap.

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

Теперь вертикальные. От левого края отмеряем примерно треть ширины картинки (примерно где заканчивается текст, чуть за календарем). Ставим рулер. Полученное расстояние делим пополам и снова ставим рулер.

Закончили разметку, теперь приступаем собственно к производству коробки.

Берем инструмент М и выделяем левую область.

Трансформируем выделенную область. Нажимаем CTRL+T. У полученного выделения курсором с зажатым CTRL и SHIFT “подтягиваем” верхний и нижний левый уголок к первому горизонтальному рулеру (первый внутри ограничителей-рулеров).

Теперь сжимаем эту область до второго вертикального рулера и нажимаем ENTER.

Теперь М и работаем с правой областью.

CTRL+T и по аналогии с левой частью “подтягиваем” уголки до второго горизонтального рулера.

И сжимаем по горизонтали примерно на одну треть от правой половины. Нажимаем ENTER.

Снимаем выделение - CTRL+D. Снова CTRL+T и сжимаем всю получившуюся картинку по вертикали до первого горизонтального рулера. Нажимаем ENTER.

Теперь будем настраивать изображение.

Выделяем (M) левую часть нашей коробки. Вызываем настройку яркости/контраста (Image > Adjustments > Brightness/Contrast) и уменьшаем яркость.

Снимаем выделение (CTRL+D). Теперь к слою надо применить эффект внутренней тени, потому что правый край у нас белый и сливается с фоном (помните, я говорил, что лучше использовать темную картинку). На палитре слоев (F7) внизу есть такой значок похожий на “f“. Кликаем на него и выбираем Inner Shadow. Настройки следующие - Opacity=25, Angle=0, Distance=0, Size=20.

Получим следующую картину.

И осталось совсем чуть-чуть. Делаем тень от коробки.

Создаем новый слой - SHIFT+CTRL+N. Проследите, чтобы этот слой находился под слоем с нашей картинкой. Нам нужен инструмент Lasso (L), а точнее Polygonal Lasso.

Этим инструментом выделяем область в левом нижнем углу картинки примерно как нарисовано. И заливаем черным цветом (нажмите D, потом ALT+BackSpace).

Идем Filter > Blur > Gaussian Blur. Значение = примерно 5, но тут на ваше усмотрение. Размываем темную область и делаем ее прозрачность примерно 20-30% (нажмите 2 или 3 или соответствующий ползунок на палитре слоев).

CTRL+H - прячем (но не удаляем) все рулеры.

Вуаля.

В дополнение, небольшая анимация, показывающая описанные выше шаги.

Вопросы, комментарии? Предлагайте темы для других туториалов.