๑۩۩๑•Mullencamp•๑۩۩๑

Эффект стекла в фотошопе

Mullencamp™ — Fri, 26 Feb 2010 12:42:03 GMT

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

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

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

Как нарисовать стекло в фотошопе

1. Открываем какую-нибудь картику — она послужит нам в качестве фона:

2. Выбираем инструмент Rounded Rectangle Tool, радиус скругления углов сделаем равным 10 пикселей (Radius: 10px) и синим цветом (#2862f4) нарисуем такую фигуру (конечно точно такую фигуру рисовать не обязательно — всё на ваше усмотрение):

3. Непрозрачность (Fill) слоя с этой фигурой сделаем равной 20%:

4. Открываем окошко Layer Style (кликаем правой клавишей по слою с фигурой и выбираем пункт Blending Options), там переходим на вкладку Drop Shadow и добавим немного теней:

5. Затем добавим внутреннее свечение (вкладка Inner Glow):

6. Сделаем вокруг нашего будущего стекла чёрный контур (на вкладке Stroke):

7. Неплохо было бы добавить штриховку (как это делается вы можете прочесть в уроке о создании логотипа (пункт №6) или UserBar'а (в пункте №5), только в качестве текстуры создавайте изображение размером 1x2 px и закрасьте нижний квадрат белым цветом):

Жмём Ok и смотрим результат:

8. Теперь неплохо бы добавить небольшие блики от источника света. Для этого сначала создадим новый слой, затем зажимаем клавишу Ctrl и кликаем левой клавишей на слое со стеклом. Выбираем инструмент Paint Bucket Tool и заливаем выделение чёрным цветом:

9. Применим фильтр Lens Flare (Filter —> Render —> Lens Flare) со следующими настройками:

После применения фильтра должна получится такая картинка:

10. Сейчас нужно наложить это свечение на слой со стеклом. Для этого измените парамерт Blend Mode с Normal на Screen (данный параметр выбирается на панеле слоёв (Layers) в верхнем левом углу), после этого зажмите клавишу Alt и кликните между слоем со стеклом и слоем со свечением (с бликом):

11. На данном фоне эффект заметен слабо, но если выбрать более тёмный фон, то будет смотреться лучше. Сейчас добавим пару обычных бликов. Выберите инструмент Elliptical Marque Tool и выделите часть стекла, потом создайте новый слой и залейте выделение белым цветом (с помощью заливки — Paint Bucket Tool):

12. Сейчас снимите выделение (в меню Select выберите Deselect или нажмите Ctrl + D). Затем зажмите Ctrl и кликните по слою со стеклом, инвертируйте выделение (в меню Select вылберите Inverse или нажмите Shift + Ctrl + I) и удалите (клавиша Delete):

13. Добавьте к этому слою (к самому верхнему) маску (на панеле слоёв нажмите кнопку ввиде тёмного прямоугольника, внутри которого круг; или в меню Layers выберите Layer Mask —> Reveal All). Затем выберите инструмент Gradient Tool (цвет градиента — чёрный, плавно переходящий в белый) и залейте маску градиентом:

14. Таким же образом добавим ещё один блик:

15. И напишем какой-нибудь текст:

Создать иконки в стиле Vista

Mullencamp™ — Fri, 26 Feb 2010 12:39:25 GMT

Серия уроков PhotoShop по дизайну в стиле Windows Vista. Урок третий — рисуем иконку папки...

На днях мне пришло письмо с просьбой написать урок по созданию папки в стиле Windows Vista, что я и сделал.

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

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

Как нарисовать иконку папки в стиле Windows Vista (в фотошопе)

1. Создаём новое изображение с белым фоном. Затем выбираем Rectangle Tool и рисуем такой прямоугольник (любого цвета):

2. Непрозрачность слоя (Opacity) поставим равной 75%:

3. Выбираем инструмент Direct Selection Tool и трансформируем наш прямоугольник следующим образом:

4. Сейчас непрозрачность заливки Fill выставьте в 0% (находится там же, где мы изменяли Opacity).

Затем заходим в Layer Style данного слоя (для этого на панели слоёв Layers кликните правой клавишей по слою, выберите Blending Options...), там переходим на вкладку Inner Shadow (самозатенение) и выставляем следующие параметры:

5. После перейдём на вкладку Gradient Overlay (градиент) и там выставим следующие параметры:

Ниже показаны подробные настройки градиента (чтобы их открыть, кликните по полосе справа от надписи Gradient:) — красным текстом я написал шестнадцатеричные значения цветов для каждого из квадратов:

Жмём везде Ok и смотрим на результат:

6. Это мы нарисовали заднюю сторону папки. Начнём рисовать фронтальную сторону.

Создайте новый слой. Затем с помощью Rectangle Tool нарисуйте прямоугольник следующего вида:

7. Затем измените непрозрачность слоя (Opacity) на 75% и трансформируйте примоугольник следующим образом (с помощью инструмента Direct Selection Tool):

8. Примените к фигуре такие же эффекты, как и к предыдущей. Для этого на панели слоёв кликните правой клавишей по уже оформленному слою с задней стороной папки, и из появившегося меню выберите пункт Copy Layer Style, потом кликните по слою с фронтальной стороной папки и выберите Paste Layer Style.

Сейчас зайдите в Layer Style этого слоя и там, на вкладке Gradient Overlay измените угол поворота градиента (Angle) с -45 градусов на -75 градусов. Должно получится как у меня:

9. А сейчас создайте ещё один слой и на нём нарисуйте прямоугольник, трансформируйте его как показано ниже:

10. Скопируйте эффекты с ранее созданного слоя и примените их к этому слою (как мы это делали ранее).

Сейчас зайдите в Layer Style данного слоя и там, на вкладке Gradient Overlay измените угол поворота градиента (Angle) на -90 градусов.

Перейдите на вкладку Stroke (обводка) и установите там следующие параметры:

Получиться должно вот так:

11. Нарисуйте ещё один прямоугольник и трансформируйте его как показано ниже:

12. Скопируйте эффекты с предыдущей фигуры и примените их к этой:

13. А сейчас будет самое сложное из того, что есть в этом уроке.

Выберите инструмент Pen Tool и нарисуйте фигуру следующей формы (при этом используйте так же инструмент Direct Selection Tool):

14. Зайдите в Layer Style данного слоя, перейдите на вкладку Gradient Overlay и сделайте там так как у меня:

Вот подробные настройки градиента:

15. На вкладке Stroke настройте обводку:

16. Непрозрачность заливки Fill выставьте в 0%. Вот что должно у вас получиться:

17. Нарисуйте ещё один прямоугольник, трансформируйте его как у меня:

18. Непрозрачность заливки Fill выставьте в 0%.

Затем зайдите в Layer Style на вкладку Gradient Overlay и выставьте следующие параметры:

Ниже приведены подробные настройки градиента:

Жмём везде Ok и получаем следующую тень:

19. Сейчас нарисуйте фигуру следующей формы:

20. Непрозрачность заливки Fill выставьте в 10%, затем зайдите в Layer Style на вкладку Inner Shadow и там сделайте так:

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

21. Это ещё не всё. Нужно добавить блики. Что мы для этого будем делать: создайте новый слой, затем зажмите клавишу Ctrl и на панели слоёв кликните по слою с фронтальной стороной фигуры, чтобы создать выделение.

Выберите инструмент Paint Bucket Tool и залейте выделение белым цветом:

22. Не снимая выделение выберите Elliptical Marque Tool, зажмите клавишу Alt и выполните следующее выделение:

23. Инвертируйте выделение (нажмите Shift + Ctrl + I или в меню Select — Inverse), удалите выделенную часть слоя (клавиша Delete):

24. Добавьте к слою маску (на панели слоёв кликните по иконке в виде прямоугольника, внутри которого круг) и залейте её чёрно-белым градиентом слева направо (с помощью инструмента Gradient Tool):

Вот то вы получите:

25. Создайте ещё один слой и повторите последние действия для создания ещё одного блика:

Необыкновенно красивая кнопка для сайта в Фотошоп

Mullencamp™ — Fri, 26 Feb 2010 12:23:46 GMT

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

В данном уроке я вам покажу как можно нарисовать довольно неплохую кнопку для использования на вашем сайте.

Кнопка нарисована в стеклянно-неоновом стиле, поэтому она должна размещаться на тёмном фоне.

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

Как в фотошопе нарисовать кнопку для сайта

1. Создаём новое изображение с тёмным фоном (на светлом фоне кнопка будет смотреться плохо):

2. Выбираем инструмент Rounded Rectangle Tool, радиус скругления углов выставьте примерно в 15 пикселей (Radius: 15px) и нарисуйте заготовку для кнопки:

3. Заходим в Layer Style данного слоя (для этого на панели слоёв Layers кликните правой клавишей по слою, выберите пункт Blending Options...), там перейдите на вкладку Outer Glow и настройте параметры свечения следующим образом (красным цветом я написал шестнадцатеричное значение используемого цвета):

4. Затем на вкладке Inner Glow выставьте такие значения, как показано ниже:

5. Сейчас переходим на вкладку Gradient Overlay и там настроим градиент:

Ниже показаны подробные настройки градиента (чтобы открыть это окошко, кликните по полосе справа от надписи Gradient):

6. А теперь на вкладке Stroke настроим обводку:

Жмём везде Ok и получаем фон нашей кнопки:

7. Будем рисовать блики. Сразу нужно выделить нашу кнопку. Для этого зажмите клавишу Ctrl и кликните по слою на панели слоёв:

8. Выберите инструмент Elliptical Marque Tool и, зажав Alt, выполните следующее выделение:

9. Создайте новый слой и залейте выделение белым цветом (с помощью Paint Bucket Tool):

10. Теперь к слою с будущим бликом необходимо добавить маску. Для этого на панели слоёв, снизу, нажмите кнопку Add Layer Mask (ввиде прямоугольника, внутри которого круг).

Затем выберите градиентную заливку (Gradient Tool) и, чёрно-белым градиентом, залейте маску снизу вверх:

А получиться должно вот так:

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

12. Заходим в Layer Style и на вкладке Outer Glow добавим свечение:

13. Жмём Ok и получаем слегка светящийся текст:

14. Создадим копию слоя с текстом, отразим его по вертикали (используйте Edit —> Transform —> Flip Vertical) и разместим немного ниже:

15. Добавим к слою с текстом маску и зальём её чёрно-белым градиентом снизу вверх (как мы это делали ранее, при создании блика):

16. Выбираем карандаш (Pencil Tool) и на новом слое рисуем небольшой треугольник, затем добавляем к нему такие же эффекты, как и к тексту:

17. Теперь с помощью Pencil Tool нарисуйте две тоненькие вертикальные полоски — одну белую, вторую чёрную:

18. Измените смешивание (Blend Mode) с Normal на Overlay, а непрозрачность Opacity уменьшите до 60%:

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

Шапка для сайта в Фотошоп

Mullencamp™ — Fri, 26 Feb 2010 12:21:53 GMT

Как нарисовать в PhotoShop шапку сайта — урок...

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

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

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

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

Шапка для сайта в фотошопе

1. Создаём новый рисунок размером 800x150 px:

2. Заходим в Layer Style (кликните правой клавишей по слою, там выберите Blending Options) на вкладку Gradient Overlay. Там настраиваем градиент следующим образом (красным цветом я написал шестнадцатеричные значения цветов):

Жмём везде Ok и получаем фон:

3. За тем выбираем инструмент Pen Tool и рисуем такую фигуру (можете подключить свою фантазию), цвет — #313e5a:

4. Заходим в Layer Style на вкладку Drop Shadow и выставляем следующие параметры:

После этого должно получиться примерно как у меня:

5. Теперь выберите кисточку с пятнами краски (скачать можно в конце урока), создайте новый слой и что-нибудь «наляпайте» (фиолетовым цветом — #313e5a):

6. Снова создайте новый слой, смешивание (Blend Mode) измените с Normal на Overlay (данный параметр настраивается на панели слоёв Layers) и снова нарисуйте что-нибудь кисточками:

7. Создайте новый слой и залейте его любым цветом (с помощью Paint Bucket Tool), затем непрозрачность заливки Fill уменьшите до 0%.

Зайдите в Layer Style на вкладку Inner Shadow и настройте следующие параметры:

8. А на вкладке Pattern Overlay настройте заливку текстурой. В качестве текстуры выберите какую-нибудь штриховку (как создавать подобную текстуру сказано, например, в начале урока №21):

Получиться должно вот так:

9. А сейчас напишите название сайта:

10. Раскрасьте его по следующему принципу:

11. Нарисуйте ещё что-нибудь и напишите слоган вашего сайта:

12. А сейчас создайте копию слоя с названием сайта (для этого перетащите слой на иконку создания нового слоя или кликните по слою правой клавишей и там выберите Duplicate Layer).

Отразите по вертикали копию слоя с названием сайта (Edit —> Transform —> Flip Vertical) и разместите её (надпись) ниже:

13. Добавьте маску слоя (на панели слоёв кликните по кнопке Add layer mask):

14. Выберите инструмент Gradient Tool (градиент) и чёрно-белым градиентом залейте маску сверху вниз:

15. Снизу напишите названия основных разделов сайта:

16. Создайте новый слой. С помощью инструмента Rectangular Marque Tool выделите верхнюю часть изображения и залейте её белым цветом (с помощью Paint Bucket Tool):

17. Добавьте к данному слою маску, как это мы делали ранее, и залейте её чёрно-белым градиентом сверху вниз:

Вот мы и нарисовали в фотошопе шапку для сайта:

Умопомрачительный логотип

Mullencamp™ — Fri, 26 Feb 2010 12:17:41 GMT

Урок по фотошопу о создании красивого, стильного, современного логотипа для сайта...

Нарисовать логотип не очень то и сложно, сложнее его придумать.

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

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

А необходимые знания вы почерпнёте на данном сайте...

Как нарисовать стильный логотип в PhotoShop

1. Создаём новое изображение размером с будущий логотип.

Выбираем инструмент Ellipse Tool, зажимаем клавишу Shift и рисуем небольшой кружок (я нарисовал круг с диаметром в 30 пикселей):

2. Создаём много копий слоя с кружком (для создания копии слоя перетяните его на иконку для создания нового слоя, или кликните по нему правой клавишей и там выберите Duplicate Layer) и располагаем их следующим образом:

3. Объедините все слои с кружками в один — для этого сразу выделите все слои (зажимая клавишу Ctrl и кликая на каждом слое на панели слоёв Layers), а за тем в меню выберите Layer — Merge Layers.

Сейчас нужно придумать как будет выглядеть наш логотип, в моём примере он будет в виде стрелки. Представили? Теперь нужно удалить лишние кружки (выделяем лишние кружки с помощью Rectangular Marque Tool и жмём клавишу Delete):

4. Раскрасим наш логотип. Для этого зайдите в Layer Style (чтобы туда зайти, на панели слоёв Layers кликните на слое с логотипом правой клавишей и выберите пункт Blending Options...) на вкладку Gradient Overlay и установите следующие параметры градиента:

Ниже показаны подробные настройки градиента (чтобы их открыть, кликните по полосе с градиентом, справа от надписи Gradient), красным цветом я написал шестнадцатеричные значения цветов:

Жмём везде Ok и получаем раскрашенный логотип:

5. Сейчас сделаем так, чтобы наш логотип казался расположенным в пространстве, для этого нужно его немного трансформировать. Зайдите в меню Edit —> Transform —> Distort и исказите логотип следующим образом:

6. Отлично! Теперь напишите название вашего сайта (если это логотип сайта) и слоган (шрифт, который я использовал в примере, можно скачать в конце урока (называется Macaroni), а лучшие шрифты вы найдёте тут):

7. Немного украсим надписи. Добавим эффект отражения.

Сделайте копию слоя с надписью и отразите её по вертикали (для этого в меню выберите Edit —> Transform —> Flip Vertical) и расположите ниже:

8. Добавите к отражённому слою маску (для этого нажмите на кнопку Add layer mask, расположенную на панели слоёв, снизу) и залейте её чёрно-белым градиентом снизу вверх:

После этих действий вы получите следующее отражение:

9. Таким же образом сделайте отражение слогана:

10. Добавим эффект стекла. Для этого сразу нужно выделить название сайта. Зажмите клавишу Ctrl и кликните левой клавишей по слою с названием сайта (на панели слоёв):

11. Создайте новый слой и залейте выделение белым цветом (с помощью заливки — Paint Bucket Tool):

12. С помощью Rectangular Marque Tool выделите нижнюю часть надписи:

13. И удалите её, нажав клавишу Delete:

14. Добавьте к слою маску и залейте её чёрно белым градиентом, как мы это делали ранее:

15. Таким же образом добавьте эффект стекла к логотипу:

Ну вот и всё — оригинальный логотип готов! Спасибо за внимание!

Если что-то не поняли, то не стесняйтесь и не ленитесь — задавайте свои вопросы и показывайте что у вас получилось на нашем форуме или лично мне.

Анимации а аватары

Mullencamp™ — Fri, 26 Feb 2010 12:14:33 GMT

Как нарисовать вращающуюся шестерёнку, повёрнутую в 3D. Анимация в фотошопе...

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

Ну вот и всё предисловие, можно приступать к творчеству...

Вращающаяся 3D шестерёнка в фотошопе, использование в качестве аватара

1. Создаём новое изображение, размер побольше (чтобы лучше было с ним работать, уменьшим потом), в моём примере 400x400 px.

Начнём рисовать шестерёнку. Выбираем Rectangle Tool и рисуем такой прямоугольник (в примере я нарисовал прямоугольник размером 56x295 px):

2. Теперь нужно сделать три копии этого прямоугольника и повернуть каждую относительно предыдущей на 45 градусов. Но для этого не нужно повторять одну и ту же операцию 4 раза, можно сделать проще...

Перейдите на панель Actions и нажмите кнопку Create New Action:

3. Введите название и жмите кнопку Record:

4. Сделайте дубликат слоя с прямоугольником, для чего нажмите сочетание клавиш Ctrl + J (или перетащите изображение слоя на иконку для создания слоя; или кникните на изображении слоя правой клавишей и выберите пункт Duplicate layer).

Поверните дубликат на 45 градусов, для чего используйте произвольную трансформацию: в меню выберите Edit —> Free Transform (или нажмите сочетание клавиш Ctrl + T) и в поле Rotate введите число 45:

5. Примените трансформацию, нажав клавишуEnter и в окошке Actions нажмите кнопку Stop Playing/Recording.

Сейчас кликните по только что созданному (записанному) экшену (Action) и нажмите два раза кнопку Play Selection. Вот что должно произойти:

6. Создайте новый слой. Сейчас выберите инструмент Ellipse Tool и, зажав клавиши Shift (для рисования круга, а не овала) и Пробел (для перемещения фигуры во время рисования), нарисуйте по центру круг:

7. Сейчас будем учиться работать с альфа каналом. Перейдите на панель Channels и там нажмите кнопку Create new channel, должен создаться новый канал (это и есть альфа канал):

8. Теперь зажмите клавишу Ctrl и кликните по любому другому каналу чтобы создать выделение. Инвертируйте выделение (через меню: Select —> Inverse или комбинацией клавиш Shift + Ctrl + I), выберите Paint Bucket Tool и залейте выделение белым цветом:

9. Размойте альфа канал, применив фильтр: Filter —> Glur —> Gaussian Blur со следующими настройками:

10. Вот что должно получиться:

11. Теперь сделаем изображение более чётким. Для этого зайдём в меню: Image —> Adjustment —> Levels и в открывшемся окошке выставим следующие параметры:

12. Жмём Ok и получаем чёткую шестерёнку:

13. Шестерёнка у нас нарисована в альфа канале, а нужно сделать её на слое. Для этого зажмите Ctrl и кликните по альфа каналу с шестерёнкой, перейдите в окошко Layers, создайте новый слой и залейте выделение чёрным цветом (с помощью Paint Bucket Tool):

14. Все остальные слои уже можно удалить, чтобы они нам не мешали (ну или хотя бы отключить).

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

Т.к. у неё 8 зубцов, то нужно повернуть её на 45 градусов. С углом определились, теперь нужно определиться с колличеством кадров.

Чтобы анимация казалась более плавной, разобъём её на 6 кадров, т.е. на каждом кадре шестерёнка будет поворачиваться на 7,5 градусов (45 / 6 = 7,5).

Делать мы это будем по такому же принципу, как и во 2м пункте: создайте новый экшен (на панели Actions), создайте копию слоя и поверните её на 7,5 градусов (используя произвольную трансформацию), остановите запись:

15. Теперь выберите только что созданный экшен и 4 раза нажмите кнопку Play Selection (напанели Actions). Вот что мы получим:

Вот так будет выглядеть панель слоёв (Layers):

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

17. Разместим шестерёнки в перспективе. Для этого примените трансформацию: Edit —> Transform —> Distort, исказив фигуру следующим образом (не обязательно точно так, можно и подругому):

18. Начнём украшать шестерёнки. Выберите нижний слой. Зайдите в Layer Style (кликните правой клавишей по изображению слоя на панели слоёв Layers и выберите пункт Blending Options...) на вкладку Drop Shadow и настройте параметры отбрасывания тени:

19. За тем перейдите на вкладку Inner Glow и там настройте внутреннее свечение:

20. Вкладку Bevel and Emboss настройте следующим образом:

21. На вкладке Gradient Overlay настройте параметры градиента:

Вот как выглядит окошко с подробными настройками градиента (открывается при клике по полосе с градиентом в прошлом окне):

Теперь жмём везде Ok и смотрим на результат проделанных операций:

Это же эффект нужно применить ко всем остальным слоям с шестерёнками. Для этого на панели слоёв кликните правой клавишей по слою с готовой шестерёнкой и выберите пункт Copy layer style, потом кликните правой клавишей на другой шестерёнке и выберите пункт Paste layer style, повторите это для каждого слоя с шестерёнками.

22. Теперь нужно обрезать ненужную часть изображения. Для этого выберите инструмент Crop Tool, зажмите клавишу Shift и выделите область с шестерёнкой:

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

23. Теперь, если вы хотите сделать аватар, уменьшите изображение до размеров 100x100 px. Делается это через меню: Image —> Image Size (или комбинацией клавиш Alt + Ctrl + I):

24. Вот что произойдёт после нажатия кнопки Ok:

25. Теперь создайте новый слой, разместите его под всеми остальными слоями и залейте любым цветом (с помощью Paint Bucket Tool):

26. Примените к этому слою несколько эффектов, зайдя в Layer Style. Сразу самозатенение (Inner Shadow):

27. За тем цветной оверлей (Color Overlay):

28. И обводку (Stroke):

Жмём Ok и вот что получаем:

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

Выберите инструмент Custom Shape Tool, в качестве фигуры выберите шестерёнку (это не стандартная фигура, скачать её можно в конце урока):

30. Создайте новый слой и нарисуйте несколько шестерёнок различных размеров (при этом зажимая клавишу Shift):

31. Каждая шестерёнка получилась на отдельном слое. Давайте их украсим. Будем работать с одной шестерёнкой, а потом скопируем её эффекты для каждой.

Сразу непрозрачность заливки (Fill) выставьте в 0%:

32. За тем зайдите в Layer Style на вкладку Outer Glow и настройте свечение:

33. Вкладку Color Overlay настройте следующим образом и жмите Ok:

34. Вот что у нас получилось:

35. Скопируйте эти эффекты и примените их для других шестерёнок (как это мы делали ранее, в пункте №21):

36. Напишите ниже какой-нибудь текст, например, название сайта или ник и примените к нему те же эффекты:

37. Создайте новый слой и разместите его под слоем с самой нижней вращающейся шестерёнкой (не путайте с шестерёнками, которые мы использовали в качестве фона!). Залейте этот слой любым цветом (с помощью Paint Bucket Tool), непрозрачность заливки Fill выставьте в 0% и переходите в Layer Style на вкладку Pattern Overlay (в качестве текстуры Pattern выберите такую, как показано ниже; как её сделать написано, например, вот в этом уроке):

После нажатия на Ok должно получиться как у меня:

38. Теперь всё готово непосредственно для создания самой анимации. Если у вас Adobe PhotoShop CS2, то перейдите в ImageReady (для чего в меню выберите пункт File —> Edit in ImageReady), если у вас Adobe PhotoShop CS3 Extended, то откройте окошко с анимацией (Window —> Animation).

Вот как выглядит окошко редактирования в ImageReady:

39. На панели Animation нажмите кнопку Duplicates Current Frame чтобы создать новый кадр (точнее дубликат кадра):

40. Теперь отключите отображение первой шестерёнки и включите вторую:

Вот она:

42. Продолжайте последние операции пока не дойдёте до последней шестерёнки:

43. теперь можете нажать кнопку Play/Stop Animation чтобы просмотреть анимацию, а чтобы сохранить сделайте следующее:

Если у вас Adobe PhotoShop CS2, то в меню выберите: File —> Save Optimized As....

Если у вас Adobe PhotoShop CS3, то в меню выберите: File —> Save for Web.

Ну вот и всё. Вот что у меня получилось:

Обои в стиле Виста

Mullencamp™ — Fri, 26 Feb 2010 12:12:18 GMT

Создаём в Photoshop красивые обои в стиле Vista...

В этом уроке сделаем красивые обои, по стилю похожие на поставляемые в составе Windows Vista...

Обои в стиле Vista

1. Начинаем, как всегда, с создания нового изображения. Так как рисовать мы будем обои для рабочего стола, определение размера изображения оставляю за вами, в зависимости от ваших потребностей. Для этого урока я создал изображение размером 1600x1200 пикселей.

2. Займемся фоном. Разблокируйте слой, размещенный фотошопом на палитре слоев, при создании нового изображения и называющийся Background. Для этого двойной клик мышкой по значку замка, размещенному напротив названия слоя, и в появившемся окошке нажмите Ok.

Залейте этот слой любым цветом при помощи инструмента Paint Bucket Tool (Заливка). Затем применим к нему эффект градиентной заливки. Для этого двойной клик левой клавишей мыши справа от названия слоя в палитре слоев и в появившемся окне Layer Style (Эффект слоя) выбираем пункт Gradient Overlay (Наложение градиента). Установите в этом пункте настройки, показанные на рисунке ниже. Клик по полоске заполненной градиентом открывает окно Gradient Editor (Правка градиента) (вид градиента устанавливаемый в нем, для компактности, приводится на том же рисунке).

Подтверждаем изменения нажатиями на «Ok» и, в результате, должны получить такую картинку:

3. Создаем новый слой (клик по иконке Create a new layer (Создать новый слой) внизу палитры слоев (Layers) или Ctrl+Shift+N и нажать Ok). Заливаем слой любым цветом при помощи инструмента Paint Bucket Tool (Заливка). Устанавливаем следующие параметры в пункте Gradient Overlay (Наложение градиента) окна Layer Style (Эффект слоя):

Gradient Overlay (Наложение градиента)

После применения эффекта устанавливаем непрозрачность слоя на 60% (Opacity (Непрозрачность) в верхней части панели слоев). Результат должен быть таким:

4. Разнообразим фон «лучами» света. Опять создаем новый слой, заливаем его любым цветом (я залил черным) и применим эффект градиентной заливки, для чего заходим в пункт Gradient Overlay (Наложение градиента) окна Layer Style. Но градиент у нас в этот раз будет не обычный. В качестве цвета градиента в окне Gradient Editor (Правка градиента) будет выступать только один – белый. Его мы установим для двух маркеров расположенных ниже полосы с градиентом (они отвечают за цвета градиента), а затем займемся маркерами расположенными над полосой с градиентом (с их помощью устанавливается непрозрачность градиента). Итак, их по умолчанию два, расположены они по концам градиента и оба они черного цвета, что соответствует 100% непрозрачности. Для начала установим для них нулевое значение непрозрачности т.е. полную прозрачность (щелкаем по соответствующему маркеру и в активизировавшемся ниже поле Opacity (Непрозрачность) устанавливаем 0%). Теперь нужно добавить довольно большое количество маркеров, отвечающих за прозрачность. Кликая над полосой градиента разместите дополнительные маркеры, устанавливая для них разные значения непрозрачности. Чередуйте бОльшие значения с меньшими, устанавливая маркеры на разных расстояниях друг от друга, так как нам нужно добиться разных переходов - от достаточно резких до более плавных.

Пример того что может получиться:

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

Сейчас полупрозрачная градиентная заливка накладывается на цвет заливки слоя. Избавимся от ненужного цвета, установив для слоя непрозрачность заливки Fill:0% в палитре слоев.

5. Теперь нам нужно будет деформировать этот градиент.

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

Поэтому нужно превратить эффект примененный к содержимому слоя в само содержимое слоя. Для этого создадим новый слой Create a new layer, выделим, зажав Ctrl, этот слой и слой с полупрозрачным градиентом и объединим эти два слоя, кликнув правой кнопкой мыши по названию одного из них и выбрав Merge Layers.

В результате этой операции получим один растровый слой с нашим полупрозрачным градиентом.

Итак, теперь этот слой мы можем трансформировать. Выбираем в меню Edit -> Transform -> Distort (Правка -> Трансформация -> Искажение) и трансформируем слой так (уменьшите масштаб отображения, чтобы была возможность вывести часть слоя за пределы документа):

Применим изменения, нажав на Enter. Получим следующее:

Уменьшим немного непрозрачность слоя, установив Opacity:47%, а режим смешивания Blend Mode:Overlay.

6. Применим к слою с полупрозрачным градиентом слой-маску - Add a mask (Добавить маску) в нижней части палитры слоев. Выбираем инструмент Brush Tool (Кисть) и достаточно крупную мягкую кисть. В качестве рабочего цвета выбираем черный. Этой кисточкой неравномерно закрашиваем в слое-маске нижнюю часть. Этим добиваемся «растворения» полупрозрачного градиента в нижней части.

А получить должны примерно следующее:

Закончим на этом с фоном и заодно забудем пока про растр. Обратимся к вектору.

7. Начнем с того, что создадим векторный прямоугольник. Выбираем инструмент Rectangle Tool (Прямоугольник) (не путайте с Rectangular Marquee Tool) (Прямоугольная область) и рисуем вот такой узкий прямоугольник. Цвет роли не играет, у меня, например, белый.

Хорошо, но нам понадобятся еще большое количество прямоугольников разной ширины, расположенных в ряд. Их мы нарисуем рядом тем же инструментом Rectangle Tool (Прямоугольник), но тут есть одно «но». Для последующих действий нужно будет, чтобы все эти прямоугольники принадлежали одному векторному слою. По умолчанию, каждый раз, когда мы, пользуясь векторным инструментом для создания формы, вроде того же Rectangle Tool создаем векторную форму, эта форма создается в новом слое. Это значит, что нарисовав 10 прямоугольников мы получим 10 слоев.

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

и выбран инструмент Rectangle Tool. В его свойствах (под главным меню) найдем кнопки, отвечающие за режим перекрытия векторных форм. Выберем вариант Add to shape area (+) (Добавить к области фигуры)

А теперь рисуем несколько прямоугольников разной ширины, располагая их рядышком:

Чтобы немного упростить себе задачу, часть уже нарисованных прямоугольников можно повторить, воспользовавшись инструментом Path Selection Tool (Выбор элементов контура). Выделив им несколько прямоугольников,

скопируем их (Ctrl+C), вставим (Ctrl+V), выберем инструмент Move Tool (Перемещение) и передвинем вставленные копии в продолжение ряда:

8. Теперь у нас есть ряд прямоугольников принадлежащих одному слою. Следующим шагом будет трансформирование этого слоя. Выбираем в меню Edit -> Transform -> Distort (Правка -> Трансформация -> Искажение) и трансформируем слой так:

Подтвердим изменения нажатием на Enter. К слою применим следующие эффекты:

Outer Glow (Внешнее свечение / Внешний отблеск)

Bevel and Emboss (Тиснение / Фаска и рельеф)

Gradient Overlay (Наложение градиента)

А здесь я упустил пару штришков... В Layer Style данного слоя на вкладке Gradient Overlay измените параметр Blend Mode с Normal на Overlay, а на вкладке Blending Options: Custom измените Fill Opacity на 0%.

Получим в результате

9. Применим к слою слой-маску нажав Add a mask (Добавить маску) в нижней части палитры слоев. Выберем инструмент Gradient Tool (Градиент) и черно-белым градиентом зальем верхнюю часть полосок, чтобы они как бы растворились вдали. Для слоя установим непрозрачность Opacity:30%.

С этой частью закончили, идем дальше.

10.1 Используя инструмент Line Tool (Линия), зажав Shift, нарисуем такую линию.

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

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

Итак, нужно вызвать палитру Actions(Операции) (Window -> Actions (Окно -> Операции) или Alt+F9)

10.2. Создадим новую операцию нажатием на кнопку Create new action (Создать новую операцию). В появившемся окне можно задать название для операции, а можно оставить предлагающееся. Подтверждаем создание нажатием на кнопку Record (Запись) и видим, что в палитре появилась новая операция. Теперь фотошоп ведет запись наших действий, а действия будут такие:

- выберем инструмент Path Selection Tool (Выбор элементов контура)

- убедившись что контур линии по-прежнему выделен (а если контур не выделен, кликаем Path Selection Tool по линии), скопируем его (Ctrl+C)

- посмотрим на свойства инструмента Path Selection Tool (расположены они под основным меню). Выбран должен быть первый вариант Add to shape area(+) (Добавление в область фигуры)

- вставим контур Ctrl+V

- выбираем команду меню Edit -> Free Transform Path (Редактирование -> Свободное трансформирование) и клавишами вверх/вниз на клавиатуре, сдвигаем копию линии вверх:

- нажимаем Enter (этим завершая трансформирование)

Нажимаем на кнопку Stop playing/recording (Остановить воспроизведение/запись) в палитре операций и наша операция готова к последующему использованию.

10.3. После выполнения предыдущих действий, новый контур (второй линии) должен был остаться выделен, если, вдруг, это не так, то его нужно снова выделить инструментом Path Selection Tool (Выделение контура).

В палитре операций щелкнем по названию записанной операции и нажмем кнопку Play selection (Воспроизвести). Должны получить еще один прямоугольник. Нажав кнопку еще 8 раз получим, в общей сложности 11 прямоугольников.

10.4. Итак, в панели слоев у нас теперь есть один слой, содержащий несколько линий.

Применим к этому слою следующие эффекты:

Drop Shadow (Отбросить тень / Падающая тень)

Outer Glow (Внешнее свечение / Внешний отблеск)

Gradient Overlay (Наложение градиента)

Для слоя установим непрозрачность Opacity:45%.

После применения эффектов получим:

10.5. Выбрав команду Edit -> Free Transform Path (Правка -> Свободное трансформирование) или нажав Ctrl+T растянем линии в стороны, чтобы они немного выходили за пределы документа (масштаб отображения перед этим нужно поставить поменьше).

10.6. Теперь этот слой мы трансформируем. Выбираем команду меню Edit -> Transform -> Warp (Редактирование -> Трансформация -> Деформация).

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

Деформация завершается нажатием на Enter.

11.1. Следующим этапом будет добавление трех новых элементов треугольной формы.

Выберем инструмент Rectangle Tool (Прямоугольник) и нарисуем похожий прямоугольник.

11.2. Затем, выбираем инструмент Path Selection Tool (Выбор элементов контура). Им кликаем по верхнему правому углу фигуры, так, чтобы выделилась опорная точка. После этого кликаем по ней правой кнопкой мыши и в появившемся меню выбираем пункт Delete Anchor Point (Удалить опорную точку).

Фигура превратится в треугольник. На самом деле можно было сразу создать треугольную форму, выставив соответствующее число сторон в настройках инструмента Polygon Tool (Многоугольник). Но во многих случаях возможность удаления опорных точек бывает очень удобна.

11.3. Тем же инструментом правую вершину треугольника перетащим пониже.

11.4. Возьмем инструмент Convert Point Tool (Конвертировать узловую точку) и проделаем им следующие действия:

а) «Вытянем» из верхней опорной точки направляющие. Зажав Shift, тяните наверх, а затем отпустите. Примерно так:

б) Верхний маркер на только что вытянутой направляющей перетащите вниз:

в) Так же как пункте а. вытянем направляющие из нижней левой опорной точки:

г) Нижний маркер на этой направляющей перетащите в сторону:

11.5. Закончив с преобразованием формы, применим к ней следующие эффекты:

Inner Shadow (Внутренняя тень / Внутренняя тень)

Inner Glow (Внутреннее свечение / Внутренний отблеск)

Bevel and Emboss (Тиснение / Фаска и рельеф)

Установим непрозрачность для слоя Opacity:75%.

Результат применения эффектов:

Идеальный суперлоготим компании

Mullencamp™ — Fri, 26 Feb 2010 12:09:25 GMT

Урок о том, как нарисовать в фотошопе модный логотип...

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

Сложного в нем ничего нет. Делался для английской версии Adobe PhotoShop CS4 - советую повторять урок именно в нем.

Ну что ж... Приступим! :)

Современный логотип в фотошопе

1. Создаем новое изображение (в моем случае размером 504x422 px):

2. Разблокируем единственный слой (кликнув 2 раза на изображении замочка рядом со слоем - на панели слоев Layers).

3. Заходим в Layer Style (кликнув правой клавишей мышки по изображению слоя на панели слоев Layers и выбрав пункт Blending Options...).

Там переходим на вкладку Gradient Overlay и настраиваем все так, как показано на рисунке ниже (примечание для новичков: что бы открыть подробные настройки градиента, кликните 2 раза по полоске справа от надписи Gradient; что бы изменить цвет нижних квадратиков, кликните по ним 2 раза и в поле справа от # введите код цвета, написанный красным цветом на моем скриншоте):

Жмем OK и получаем вот такой фон, залитый радиальным градиентом:

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

Для этого создайте новое изображение размером 2x2 px с прозрачным фоном, увеличьте изображение (с помощью лупы - Zoom Tool), выберите карандаш (Pencil Tool) и закрасьте черным цветом левый верхний пиксель:

В главном меню выберите Edit --> Define Pattern... и нажмите OK. Закройте это изображение (его можно не сохранять - оно нам уже не понадобится).

5. Создайте новый слой (нажав на кнопочку Create a new layer на панели слоев Layers снизу).

Залейте его любым цветом (с помощью инструмента Paint Bucket Tool).

Непрозрачность заливки слоя выставьте в 0% (Fill: 0%):

6. Зайдите в Layer Style данного слоя, перейдите на вкладку Pattern Overlay и выставьте параметры как на скриншоте (в качестве текстуры выберите ту, которую мы создавали в пункте #4):

Жмем OK и вот что получаем:

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

Расскажу вкратце как я рисовал силуэт своего логотипа (для новичков, не читавших предыдущих уроков). Сразу создаем новый слой, выбраем инструмент Rectangle Tool и рисуем прямоугольник. После, с помощью инструмента Add Anchor Point Tool добавим слева и снизу от правого верхнего уголка прямоугольника по одной опорной точке и закруглим угол с помощью инструмента Direct Selection Tool (кликнув по правой верхней точке и передвинув ее на другое место - левее и ниже):

На новом слое тиким же образом нарисуем такую же фигуру, но немного меньшего размера (буква D готова):

Дублируем нижний слой силуэта (кликаем правой клавишей на иконке слоя на панели слоев Layes и выбираем Duplicate Layer..., жмем OK), отразим его по-горизонтали (Edit --> Transform --> Flip Horizontal) и разместим правее (передвигать объекты можно с помощью инструмента Move Tool):

То же самое сделаем со вторым слоем силуэта логотипа (дублируем, отразим и разместим справа), после чего его немного удлиним по-вертикали (с помощью инструмента Direct Selection Tool - кликая по нижним опорным точкам и сдвигая их вниз):

На новом слое нарисуем еще один прямоугольник, что бы в итоге получилась баква A:

Сейчас нужно сделать выделение самого логотипа, без всего лишнего. (Будьте внимательны! Тут можно легко запутаться!) Для этого выбираем инструмент Rectangular Marquee Tool, зажимаем клавиши Ctrl и Shift и кликаем на панели слоев Layers сразу по первому слою с красной частью логотипа (он выделится), за тем по второму (он тоже выделится); после зажимаем Alt и Shift и кликаем сразу по первому слою с белой частью логотипа (он уберется из выделения), после по второму (он так же уберется); и осталось снова зажать клавиши Ctrl и Shift и кликнуть по самому верхнему слою с красной частью логотипа (прямоугольник в букве A). Вот что должно получится (текста много, но, на самом деле, все делается очень просто):

Теперь, не снимая выделения, создадим новый слой, и зальем его любым цветом с помощью Paint Bucket Tool:

Вот мы и нарисовали силуэт логотипа. Остальные слои, которые мы использовали в данном пункте (при создании логотипа), можно удалить (перетащив слой на иконку с мусорной корзиной, или кликнув на нем правой клавишей мышки и выбрав пункт Delete Layer) или отключить (кликнув по иконке ввиде глаза - на панели слоев Layers, слева от иконки слоя):

8. Сейчас создайте еще три копии этого слоя с логотипом (они нам понадобятся в следующих пунктах) - для этого кликните правой клавишей по иконке слоя на панели слоев Layers и выберите Duplicate Layer..., нажмите OK. Отключите оригинал и две последние копии, кликнув по глазу (слева от каждого отключаемого слоя).

Сейчас применим к видимому слою с логотипом (первая копия) некоторые эффекты. Для этого зайдем в Layer Style и выставим следующие параметры:

Перейдем на вкладку Drop Shadow и настроим отбрасывание тени:

На вкладке Inner Glow настроим внутреннее свечение:

На вкладке Gradient Overlay настроим градиент:

И... На вкладке Stroke настроим обводку:

Жмем OK и получаем такой-вот логотип:

9. Сейчас нам понадобится создать еще одну текстуру (таким же способом, как в пункте #4) следующего вида:

10. Теперь включим ранее отключенный слой (вторую копию логотипа; кликнув по глазу слева от иконки слоя), после чего зайдем в Layer Style данного слоя и выставим там следующие параметры:

На вкладке Stroke настроим обводку:

А на вкладке Pattern Overlay выберем созданную в пункте #9 текстуру и выставим следующие параметры:

Жмем OK и получаем следующую картинку:

11. Теперь создадим блик. Для этого включим третью (самую верхнюю) копию слоя, выберем инструмент Rectangular Marquee Tool и, зажав Ctrl, кликнем по слою, что бы его выделить:

Не снимая выделения, выбираем инструмент Elliptical Marquee Tool, зажимаем Alt и делаем овальное выделение:

Вот что должно получится в итоге:

Сейчас инвертируем выделение (Select --> Inverse) и очистим его (Edit --> Clear):

Заходим в Layers Style данного слоя и вот что там творим:

А вот что делаем на вкладке Gradient Overlay:

Сейчас жмем OK и получаем блик на нашем логотипе:

12. Теперь создадим свечение под нашим логотипом. Для этого создайте новый слой под нижним слоем логотипа, выберите инструмент Elliptical Marquee Tool, сделайте овальное выделение и залейте его белым цветом (с помощью Paint Bucket Tool). Снимите выделение (Select --> Deselect):

Размоем слой, применив фильтр Gaussian Blur (Filter --> Blur --> Gaussian Blur...) с такими настройками:

Уменьшим непрозрачность слоя до 4%:

Получится должно приблизительно так:

13. Займемся созданием тени. Для этого сперва включим самый первый слой логотипа (три копии которого мы делали и уже использовали). За тем трансформируем его, немного сжав по-вертикали (Edit --> Free Transform):

Создадим из этого слоя смарт-объект (кликаем правой клавишей мыши по иконке слоя на панели слоев Layers и выбираем Convert to Smart Object).

Добавим к слою маску, для чего нажмем на кнопку Add layer mask (находится на панели слоев Layers, внизу - где корзина). Справа от иконки слоя появилась еще одна, белого цвета - это наша маска слоя.

Кликаем по маске, заливаем ее черно-белым градиентом (с помощью инструмента Gradient Tool) снизу вверх. Вот что должно получится (тень плавно переходит от менее прозрачной к более прозрачной):

Кликаем по иконке слоя с тенью на панели слоев Layers, выпоняем размытие (применив фильтр Filter --> Blur --> Gaussian Blur...) с такими настройками:

Жмем OK. Получаем равномерно размытую тень:

Что бы тень была более реалистичной, она должна быть более размытой при удалении от объекта. Для этого применим маску к фильтру - кликаем по белой квадратной иконке Smart Filters (которая появилась под слоем с тенью) и заливаем ее черно-белым градиентом (Gradient Tool) снизу вверх. Вот что получится:

Работа с тенью закончена. Начнем украшать наш логотип...

14. Первым делом сделаем на гранях логотипа блики. Для этого я поступил так: с помощью Pencil Tool нарисовал 4 линии белого цвета (каждую на отдельном слое):

После к каждой линие в Layer Style добавил небольшое слегка заметное внешнее свечение (Outer Glow), и к каждой линии добавил маску (Layer Mask), залив ее с обоих сторон черно-прозрачным (Foreground to Transparent) градиентом (горизонтальные линии - слева направо и справа налево, вертикальные - сверху вниз и снизу вверх). Вот что получилось:

С помощью инструмента Horizontal Type Tool добавим текст (шрифт и размер - по вкусу) - в моем случае это три надписи, каждая на отдельном слое (Design, Arts и .RU):

К одной из надписей добавим градиентную заливку (в Layer Style на вкладке Gradient Overlay) с такими параметрами:

Вот что у меня вышло (см. слово Design):

Теперь нужно применить этот эффект к остальным надписям. Для этого кликаем правой клавишей мышки по уже раскрашенной надписи и выбираем Copy Layer Style, после кликаем правой клавишей по двум другим надписям и выбираем Paste Layer Style. Вот что вышло:

15. Продолжим украшать наше творение... Сейчас добавим лампочки (лучшее название моментально в голову не пришло), для чего создаем новый слой (располагаем его выше всех остальных), заливаем его черным цветом (с помощью Paint Bucket Tool) и применяем фильтр Filter --> Render --> Lens Flare (Brignhtness: 100%, Lens type: Movie Prime):

Выбираем стирку (инструмент Eraser Tool) и стираем ей светлые линии, оставляя сияющую точку с короткими лучами вокруг:

Изменим цвет этого свечения на зеленый, для чего в меню выберите Image --> Adjustments --> Hue/Saturation... и выставьте следующие параметры:

Жмем OK и видим вот что:

Теперь изменим тип наложения данного слоя с Normal на Color Dodge (это делается на панели слоев Layers):

Передвигаем (с помощью Move Tool) получившуюся лампочку на понравившееся место:

Я сделал еще три копии этой лампочки и разместил вот таким образом:

16. Для придания большей реалистичности добавим к логотипу отражение. Для этого создадим под слоем с тенью от логотипа еще один слой и зальем его (Paint Bucket Tool) черным цветом. После с помощью Rectangular Marquee Tool аккуратно выделим логотип и скопируем его в буфер обмена (Edit --> Copy Merged), удалим слой, который только что полностью заливали черным цветом, на том же месте создадим новый слой и вставим из буфера (Edit --> Paste) логотип, отразим его по-вертикали (Edit --> Transform --> Flip Vertical) и разместим следующим образом:

Создадим смарт-объект (правой клавишей мыши кликаем по слою, выбираем там Convert to Smart Object) и изменим тип наложения этого слоя с Normal на Lighten:

Трансформируем отражение. Сперва сузим его по-вертикали (Edit --> Free Transform), после сделаем его немного шире снизу (Edit --> Transform --> Skew):

Размоем отражение, для чего применим к смарт-объекту смарт-фильтр Filter --> Blur --> Gaussian Blur... с такими настройками:

Вот что должно получится:

Что бы отражение было еще более реальным, сделаем, что бы оно при приближении к логотипу становилось более контрастным. Для этого к фильтра применим маску (кликаем по квадратику Smart Filter (расположен под слоем с отражением) и заливаем черно-белым градиентом (Gradient Tool) сверху вниз). Вот что должно получится:

Последние штрихи... Сделаем отражение прозрачным (снизу более прозрачное, сверху - менее), для чего к слою с отражением применим маску (кликнув по иконке слоя на панели слоев Layers, после по кнопке Add layer mask) и зальем ее снизу вверх черно-белым градиентом (с помощью Gradient Tool). Получим готовый логотип:

17. А теперь изменим цвет логотипа по-вкусу. Мне понравился синий. Для этого на панели слоев Layers кликаем по самому верхнему слою, после по кнопке Create new fill or adjustment layer, там выбираем Hue/Saturation и настраиваем сдвиг цвета следующим образом:

И, наконец-то, мы можем созерцать финальный вариант нашего стильного логотипа:

Рисуем красивейшие открытки

Mullencamp™ — Fri, 26 Feb 2010 12:05:50 GMT

Как нарисовать открытку в Photoshop для использования в качестве граффити вКонтакте

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

Данный урок по фотошопу предназначен, скорее, для начинающих — т.к. в нем я не использовал какие-либо трюки, не описанные нами ранее, в других уроках фотошопа. Все хорошо "разжевано" и затруднений вызвать не должно. Хотя будет полезен и не только начинающим — как источник новых идей рисования граффити в Контакте :)

Ну что же... Не будем тянуть резину — начнем рисовать! :)

Граффити в Контакте ввиде поздравительной открытки в фотошопе

1. Создаем новое изображение размером, равным размеру граффити в Контакте (586x293 px):

2. С помощью инструмента Paint Bucket Tool заливаем фон голубым цветом (#33ccff — код цвета, вводится он в окошке Color Picker, которое открывается по клику на квадратике Set foreground color, который находится снизу на панели инструментов):

3. Добавим текст белого цвета. Так как мы рисуем поздравительную открытку, то и текст будет соответствующий. Для этого выбираем инструмент Horizontal Type Tool и шрифт по вкусу (я выбрал шрифт Segoe Print (стандартный шрифт из Windows Vista, ссылка на скачивание внизу страницы) со следующими настройками):

... и пишем любой текст (желательно покороче):

4. Сделаем наш текст пушистым :) Для этого придется немного поработать кисточкой.

Сразу создадим новый слой (для этого кликните по кнопке Create a new layer, находящейся на панели слоев (Layers) снизу; или в главном меню выберите Layer —> New —> Layer...).

Выбираем инструмент Brush Tool, выбираем обычную кисть круглого профиля (в стандартном наборе Basic Brushes) диаметром 1px:

... и делаем вокруг букв вот такие короткие штрихи белого цвета:

В результате должно получится что-то такое:

5. Добавим к тексту отражение. Делается это очень просто. Сразу нужно создать копию двух слоев — слоя с текстом и слоя с «волосками» (делается это так: выделяем два слоя (удерживая клавишу Ctrl кликаем на панели слоев (Layers) сразу по имени первого слоя, после по имени второго) и перетягиваем их на иконку для создания нового слоя (Create a new layer)), за тем отразить их по-вертикали (выбрав в меню Edit —> Transform —> Flip Vertical) и сдвинуть вниз:

Немного сожмем отражение по-вертикали (выбрав в меню Edit —> Free Transform):

Так как это отражение, то оно должно быть прозрачным, при чем не равномерно (должно происходить увеличение прозрачности при удалении от объекта).

Данный эффект в фотошопе делается очень просто — с помощью наложения маски на слой. Для этого выбираем инструмент Gradient Tool:

Тип градиента — черно-белый (что бы открыть окошко с настройками градиента, кликните по полоске с градиентом, которая находится на панели Options):

Накладывать маску будем к обоим слоям (текст и «волоски»), по этому сразу сгруппируем их (удерживая Ctrl выберите на панели слоев (Layers) два слоя и перетащите их на иконку ввиде папки — Create a new group):

И лишь после этого добавим к группе маску (кликнув сразу по имени группы, после по иконке Add layer mask — на панели слоев) и зальем ее черно-беллым градиентом снизу вверх (сразу кликнув на панели слоев (Layers) по эскизу маски, после залив ее градиентом в окошке для рисования):

В результате должно получиться такое отражение:

6. По такому же принципу добавим еще несколько элементов к нашей будущей поздравительной открытке (можно, например, добавить еще какой-нибудь текст, символ, или автофигуру (инструмент Custom Shape Tool)) — я добавил смайлик:

7. Теперь нарисуем зеркальную поверхность, в которой, собственно, и отражается наш текст (без нее он висит в воздухе).

Делается это так: сразу же над слоем с синим фоном создаем новый слой, выбираем инструмент Rectangle Tool и рисуем прямоугольник любого цвета (ширина — на весь рисунок; высота: от самого низа до, примерно, середины надписи):

К слою с прямоугольником добавим несколько эффектов. Делается это в окошке Layer Style (что бы открыть это окошко, на панели слоев (Layers) кликните по слою правой клавишей и в появившемся меню выберите Blending Options...; или кликните по слою и после на панели слоев снизу нажмите на кнопку «fx» (Add a layer style...) и в появившемся меню выберите Blending Options...).

В Layer Style выставим следующие настройки:

На вкладке Gradient Overlay выставим следующие параметры градиента (сверху указана непрозрачность, в процентах; снизу — код цвета (в данном случае белый)):

А на вкладке Stroke следующим образом настроим обводку:

Жмем OK и... О Боже, под ногами появилась земля! =)

8. А теперь... займемся... украшением открытки :) Мне нравится эффект «конфетти», к тому же, в данной цветовой гамме он напоминает хлопья снега (что весьма актуально — зима на носу).

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

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

Выбираем кисть покрупнее, непрозрачность выставляем в 15%...20% (делается это на панели Options) и рисуем кружки, расположив их в хаотичном порядке:

За тем рисуем кружки кистью маленького размера, непрозрачность выставляем примерно в 80% (можно на том же слое, а можно и на новом — как Вам удобнее):

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

А сейчас... Ммм... Все помнят как нужно расписывать ручку? =) Вот... Сейчас мы просто «замажем» кистью среднего размера (непрозрачность ставим очень небольшую — примерно 10%) все, что мы нарисовали:

9. Добавим блеск. Просто выбираем набор кистей Assorted Brushes:

В нем выбираем такую-вот кисть:

... и кликаем, кликаем, кликаем :), пока не почувствуем, что... достаточно:

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

Выполним овальное выделение (с помощью инструмента Elliptical Marquee Tool) — овал должен быть большим, по этому на рисунке ниже вы видите лишь часть его верхней дуги:

Инвертируем выделение (Select —> Inverse):

С помощью Paint Bucket Tool зальем его любым цветом:

Зайдем в Layer Style и выставим следующие значения:

На вкладке Gradient Overlay настроим градиент:

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

11. Фон вокруг граффити в Контакте белого цвета. Будет красиво смотреться, если у граффити не будет четких границ. По этому сделаем плавный переход нашей открытки в белый фон Контакта.

Для этого создадим новый слой, разместим его над всеми остальными и зальем белым цветом (с помощью Paint Bucket Tool):

В Layer Style данного слоя выполним следующие настройки:

На вкладке Inner Glow добавим внутреннее свечение белого цвета:

Жмем OK и получаем желаемый эффект:

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

Для этого создадим новый слой, разместим его под слоем с внутренним свечением (который мы создали в предыдущем пункте).

Выберем инструмент Rectangle Tool:

... и нарисуем на новом слое широкую полоску любого цвета:

Настроим Layer Style таким-вот образом:

Здесь у нас внешнее свечение (вкладка Outer Glow):

На вкладке Color Overlay закрасим прямоугольник голубым полупрозрачным цветом:

И добавим обводку (вкладка Stroke):

Получилась вот такая подложка под текст:

Выбираем инструмент Horizontal Type Tool и вбиваем желаемый текст (цвет букв, опять же, любой):

И снова открываем Layer Style и делаем так:

... и еще так:

... и вот так вот:

В итоге надпись приняла следующий вид:

Повернем ее (с помощью Edit —> Free Transform) и разместим в каком-нибудь углу. Вот мы и получили финальный вариант поздравительной открытки — граффити для Контакта:

13. Кому не нравится открытка голубого цвета — можете легко изменить ее цвет на другой, по вкусу (на то он и фотошоп). Многие девушки, например, любят розовый.

Ну что, перекрасим в розовый? (*тут девушки кричат и опладируют* — прим. редактора) :) Вот как это делается: на панели слоев (Layers) кликаем по имени самого верхнего слоя, за тем кликаем по кнопке Create new fill or adjustment layer (находится она на панели слоев снизу). В появившемся меню выбираем Hue/Saturation:

Должен создаться новый слой (с такой же иконкой, как на кнопке Create new fill or adjustment layer):

... и открыться панель Adjustment, на которой измените настройки следующим образом:

... и можете наблюдать ту же поздравительную открытку, но в розовых тонах:

Вот и весь урок. Возможно, кому-то картинка покажется слишком светлой — сделать ее темнее будет совсем не сложно (так же, как в начале пункта 13, но вместо Hue/Saturation выбирайте Brightness/Contrast).

Создаем огонь в фотошоп

Mullencamp™ — Fri, 26 Feb 2010 12:00:22 GMT