Итак, в этом уроке я покажу вам как достаточно просто добиться такого эффекта, используя функцию Repoussé в Photoshop CS5 и несколько стоковых фотографий.
01. Открываем Photoshop, создаем новый документ, заливаем фон черным. Любым способом, какой нравится ( или что то другое) создаем некое подобие рукописного текста.
02. Создайте выделение вокруг области к которой будет применяться Repoussé и нажмите 3D> Repoussé>Current Selection.
03. Для создания эффекта воды используйте пресет Inflate. Ставим следующие значения: Depth = 0, Scale = 1, в блоке Inflate, меняем Slides на Front and Back.
04. Буквы E стали единым целым, дырки пропали. Выделяем область, в которой хотим видеть дырки и меняем Type на Hole, также увеличиваем Strength в блоке Inflate на 1.
05. В панели 3D выберите Front Inflation а затем кликните на значок папки рядом со значением Bump. Выберите Open Texture, чтобы открыть текстуру в новом документе. В этом документе создаем новый слой, затем Filter>Render>Clouds. (обратите внимание, что рабочими цветами должны быть черный и белый), затем Filter>Render>Different Clouds. Если результат слишком темный - Image>Adjustment>Levels и двигаем белый ползунок влево.
Остальные параметры:белый цвет в Diffuse color, 15% Opacity, 20 в Reflection, черный в Illumination, 100% Gloss, 100% Shine, белый в Specular и 1.5 в Refraction.
06. Для более реалистичного эффекта нам понадобится парочка стоковых фотографий - эта и эта. Открываем их и копируем части с брызгами воды на наше 3D изображение.
07. Несколько раз повторяем процесс, добавляя больше брызг. Так как на фотографии брызги сняты на черном фоне, просто меняем режим смешивания слоев на Screen и черный станет прозрачным.
08. Пора отрендерить 3D объект. На панели 3D меняем Quality на Ray Traced Final. Процесс рендеринга займет некоторое время. Если вы захотите поменять освещение, придется рендерить снова и снова до получения нужного результата.
09. Дублируем отрендереный 3D объект и жмем Layer>Rasterize>3D. К получившемуся слою можно применять коррекции. Их конечно можно применить и к 3D объекту, но некоторые коррекции сработают неверно, а некоторые будут производиться очень медленно.
Создайте новый слой ниже растеризованного объекта, залейте черным и объедините эти слои. Image>Adjustments>Levels. Ставим 15 для черного, 0.8 для серого и 160 для белого ползунков.
10. Выделяем все слои и дублируем их, дубли объединяем. Filter>Blur>Gaussian Blur. Ставим Amount = 15. Режим смешивания слоя меняем на Color Dodge, Opacity ставим 30%.
10
Ну вот и все! Надеюсь вы нашли для себя в этом уроке что то новое
Это простой урок по оформлению текста, с таким вот скромным результатом:
Шаг 01
Создайте новый документ 600 на 400рх, в зависимости от вашей затеи. Залейте фоновый слой сероватым цветом #535559, мы его еще перекрасим:
________________________________
Шаг 02
Теперь нужно выбрать красивый широкий шрифт, мне припал к душе шрифт Bello (коммерческий), вы можете воспользоваться другим. Напечатайте свое слово (размер шрифта 188pt):.
________________________________
Шаг 03
Теперь добавим тексту стили слоя, зайдите в меню Layer—Layer Styles и настройте следующие стили:
Теперь настройте внутреннюю текстуру, которую можно сделать самостоятельно:
А я вам сделал ее как в уроке Pattern_for_tut.rar ( 799байт ) Кол-во скачиваний: 2724
Также настройте градиентную обводку в 1px, для большего ощущения объема:
После всех вышеописанных манипуляций, ваш результат будет следующим:
________________________________
Шаг 04
Наличие плоского холста может ухудшить восприятие данного нашего текста, независимо от его привлекательности, поэтому лучше добавить ощущение легкой глубины. Перейдите на фоновый слой, разблокируйте его, двойным кликом и примените стили слоя Layer—Layer Styles, что показаны на скринах:
Для градиента используйте цвета от серо-голубоватого #667c85 к более темному
его варианту #475e68:
В итоге:
________________________________
Шаг 05
Добавим на наш текст отражение света. Зажмите клавишу Ctrl и кликните по слою с текстом, чтобы получить выделение по его форме:
Создайте новый слой выше остальных. Выберите инструмент Gradient, настройте градиент от белого цвета к прозрачному и проведите им сверху вниз. После сделайте новое овально выделение, как это показано ниже:
Инвертируйте данное выделение Select—Inverse (Ctrl+Shift+I) и нажмите кнопку Delete, чтобы удалить часть выделенного градиента — это оставит отражение только в верхней части текста:
Для большей натуральности измените режим смешивания для этого слоя на Overlay:
________________________________
Шаг 06
Последним шагом мы сделаем часть контура у текста немного сияющим, что сделает его более изящным, мечтательным и привлекательным. Создайте новый слой выше остальных. Выберите белую мягкую кисть с диаметром около 27px и поставьте ею по контуру текста несколько пятен в случайных местах. Понизьте этому слою непрозрачность (Opacity) к 70%, режим смешивания Overlay. Чтобы усилить сияние, достаточно просто провести по тому же месту еще раз или сделать это на новом слое:
Дальше, с помощью разных кистей, можно добавить или повысить еще немного свечения, но лучше не переусердствовать. Текст готов:
В этом уроке мы научимся создавать вот такой травяной текст.
Этот урок будет состоять из трех частей - создание фона, создание непосредственно текста и добавление эффектов. Шаг 1
Итак, для начала создадим фон. Для этого создадим документ в фотошоп. Я сделала размером 1920 x 1200 пкс. Зальем слой с помощью радиального градиента. Для градиента выставим цвета светло-желто-зеленый (#adbf41) и зеленый (#328a26) Должно получиться вот так
Шаг 2
Хотелось бы, что бы фон выглядел натурально. Мне захотелось, чтобы он имел текстуру помятой бумаги. Для этого возьмем это изображение http://rewalls.com/pic/201106/1280x800/reWalls.com-35959.jpg. Перетащим в документ с нашей работой, сделаем его верхним слоем и растянем на размер холста. Поставим режим наложения слоя с мятой бумагой, как Умножение.
Шаг 3
Теперь, чтоб создать действительно помятый вид, создадим копию слоя с помятой бумагой и повернем созданный слой на 180 градусов. Также создадим дубликат слоя с градиентом и сделаем новый слой самым верхним. Поставим режим смешивания Мягкий свет
Шаг 4
Затонируем края нашего фона. Для этого создадим новый верхний слой. Нажмем ctrl+A, чтобы выделить слой. Выставим основной цвет темно-зеленый (#041c02) и выполним обводку внутри выделения размером в 70 пкс. Используем на слое с обводкой фильтр размытие по Гауссу со значением 55. Уменьшим прозрачность слоя до 50%
Теперь нужно что-нибудь написать. Для этого выберем любой широкий шрифт. Я выбрала Impact 100 и написала просто ТРАВА.
Шаг 7
Теперь выделим наш текст. Для этого нажмем ctrl и кликнем по иконке текстового слоя. Перейдем на слой с травой и нажмем на иконку маски слоя. Из травы вырежется текст.
Шаг 8 Дальше - самое сложное. Создадим эффект выбивающейся травки. Здесь нужно очень внимательно выставить настройки кисти. Итак, выберем инструмент кисть. На панели кистей выберем вот эту.
Размер кисти установим 25. Зададим ей такие настройки(превью кликабельно) [b]Снимите галочку с пункта Динамика цвета[b/]
Шаг 9
С кистью разобрались. Теперь опять кликнем, удерживая ctrl, по иконке текстового слоя. Выделился текст. Выберем инструмент выделение и нажмем правой кнопкой на выделении текста. Из появившегося меню выберем Образовать рабочий контур. В окошке нажмем ОК. Сделаем текстовый слой невидимым. Перейдем на МАСКУ травяного слоя. Обратите внимание, чтобы основной цвет у Вас был черный. Это очень важно.
Выберем инструмент перо. Кликнем на работе правой кнопкой и выберем обводку контура. Проследите, чтобы в появившемся окошке НЕ СТОЯЛА галочка Имитировать нажим. Повторите обводку контура 6 раз. Если Вы все правильно сделаете, то должно получится такое
Шаг 10 Создадим тень. Для этого создадим ПОД слоем с травяным текстом новый слой. Кликнем с ctrl на иконке маски травяного слоя. Выполним заливку выделения на новом слое черным цветом. Отменим выделение. Используем размытие по Гауссу со значением 1,5. Поставим непрозрачность слоя 50-60%. Теперь сдвинем слой с тенью немного вправо и вниз.
Шаг 11 Чтобы оживить наш текст, добавим живности. Я выбрала бабочку и божью коровку. Но можно добавить цветов или что-то другое.
Поместим их на травяной текст. Поиграем с насыщенностью (я немного добавила) и вуа-ля. Вот что получилось у меня
В последнее время стало сильно модным использовать эффекты вдавленного и выпуклого текста. Практически во всех новых шаблонах CMS, будь то Joomla, DLE, Drupal, Ucoz прослеживается такаЯ тенденция. Да вы и сами много раз видели такие сайты.
Вот, к примеру, скрин одного из них:
Это нынче очень модно, шероховатый фон и вдавленный/выпуклый текст меню, подписей и всего, чего хотите.
Воспроизвести такой эффект крайне сложно, но мы все же попробуем.
1. Откроем новый документ и зальем фон любым цветом, отличным от белого.
Допустим это будет темно-серый фон.
2. Пишем любой текст любым шрифтом, при этом цвет его должен быть светлее нашего фона.
3. Дублируем в панели слоев наш текст и, кликнув два раза мышкой на буковке Т, выбираем тексту цвет более темный, чем фон.
4. Выбираем инструмент Move Tool или жмем на клавишу V.
Теперь один раз жмем на кнопку стрелочку вверх и один раз вправо. Или вниз и влево или как угодно. Наш верхний текст должен сместиться по осям Х и У на один пиксель.
Вот, собственно говоря, и все. Можно поменять цвета местами и тогда текст станет выпуклым, можно по разному экспериментировать или тот же самый принцип применить к иконкам и пиктограммам. Все в ваших руках!
Создайте новый документ 1200 * 800 px (на самом деле размер не имеет значения), залейте фон белым.
Чтобы получить наилучший эффект, нужно правильно подобрать шрифт. Используйте шрифт, который только что загрузили и добавьте текст.
Шаг 2
Примените следующие параметры:
General Blending
Drop Shadow
Inner Shadow
Bevel and Emboss
Contour
Gradient Overlay
Stroke
Результат:
Шаг 3
Загрузите выделение текстового слоя (Ctrl+клик)
Нажмите Ctrl + Alt + R, чтобы активировать Refine Edge Tool, установите значения:
Шаг 4
Не снимая выделение, создайте новый слой над текстовым слоем, назовите его “Dirt Spray”. Загрузите набор "Грязные брызги" и, используя разные кисти из этого набора, рисуйте на слое. Выделение активно, поэтому грязь будет появляться только внутри выделения.
Шаг 5
Добавим текстуры на фон. Загрузите набор “Штрихи и брызги”, создайте новый слой “texture” над слоем background, выберите кисть из набора и рисуйте на слое (я выбрал красный цвет).
Также вы можете использовать набор кистей-брызг для создания дополнительного эффекта.
Добавьте больше декораций к тексту. Я решил добавить изогнутые линии. Для этого создайте новый слой “lines” и, используя Pen Tool, нарисуйте путь.
Кликните правой кнопкой мыши на пути и выберите “Stroke Path”.
Установите Brush и галочку “Simulate Pressure” (размер кисти 16 рх, 100% hardness). Используя Transform Tool, измените линию, как показано на картинке.
Продублируйте слой “lines” несколько раз, на каждом слое используйте free tranform, чтобы изменить положение и размер линий.
Вы можете и дальше дублировать слои, но размещать их поверх текста.
Шаг 6
Чтобы создать световой эффект, добавьте новый слой над всеми предыдущими, возьмите мягкую круглую кисть (150 рх), установите белый цвет и произведите несколько одиночных кликов в точке, где вы хотите создать свет:
Измените режим наложения слоя на “Overlay”
Далее автор добавил фоновые текстуры, используя кисти-брызги:
Шаг 7
Сохраните работу, а затем сведите изображение (flatten image). Продублируйте слой и обесцветьте копию, затем filter > sharpen > smart sharpen
Создайте новый слой над копией, возьмите большую мягкую кисть и добавьте цвет:
Ну а теперь я вам покажу как быстро и просто вставить текст или изображение в заготовку . где присутствует анимация..Итак...поехали..
Открываем в фотошопе любую заготовку анимированную...ну например одну из тех , что я вам приготовила ранее..
и вместе с ней открываем окно АНИМАЦИЯ Находим его на вкладке ОКНО на верхней панели фотошопа
вот так будет выглядеть ваше окно фотошопа...Окошко анимации можно перетаскивать за верхнюю панель мышкой туда ,где вам удобно на неё смотреть
проследите чтобы в окне анимации был активен первый кадр
и в окошке слоев был активен первый кадр
теперь нажимаем на вот это, создавая новый слой
он встанет среди слоев вот так
а теперь зажав левой кнопкой мышки этот слой перетащим его в самый верх, чтобы он был поверх всех слоев и его ничего не загораживало..
включаем инструмент ТЕКСТ и пишем на этом слое то что нам нравится
а теперь идем на вкладку СТИЛЬ и выбираем внешний вид нашего написанного текста
и мы видим что в окне АНИМАЦИЯ текст появился во всех кадрах...
.теперь просто идем на первый кадр в окошке анимация и удаляем его...
Зачем???Понятия не имею....но если мы его оставим то текстовой слой именно на этом первом кадре будет дергаться)))))...Вот так
.Попробуйте!! сами и увидите...Ну..если вас это не напрягает то можете просто не удалять а оставить все как есть...
Теперь сохраняем для WEB и все...пользуемся)))
Картинку вставляем точно так же..Вновь следим чтобы в окне АНИМАЦИЯ был активным первый слой и в окне СЛОИ был тоже активен первый....Открываем теперь наше изображение, которое хотим добавить, берем его мышкой и инструментом ПЕРЕМЕЩЕНИЕ
передвигаем на нашу открытку в нужное место, предварительно , если надо, поменяв его размер...Все изменения с картинкой надо делать ДО перемещения на открытку -шаблон...
переместили...оно опять встало среди слоев...мы вновь захватываем его мышкой и перетаскиваем на самый верх...и смотрим в окно анимации...изображение должно проявиться на всех слоях...
Появилось??Ну и славненько..А вот тут уже не надо удалять никакой слой.....мы работу закончили....Теперь сохраняем все сделанное для WEB
И,при помощи инструмента текст ,напишем какое-нибудь слово.
Я напишу слово "Привет"
Далее ,идём в палитру слоёв и находим внизу вот такой значёк
Нажимаем на него и в выпадающем окне выбираем "Наложение узора"
Открылось окно стилей слоя.В нём мы выберем глиттер,который будем использовать для анимирования текста. Глиттер,который я выбрала,состоит из трёх слоёв.Это видно в выпадающем меню.Мой глиттер занимает три окошечка.Мы выбираем первое(2) и жмём ОК.
Смотрим на нашу картинку с текстом и видим,что цвет текста поменялся на узор(глиттер),которым мы его заполнили.
Теперь идём в палитру анимации Если у вас она не открыта,то вы должны открыть её при помощи команды Окно-Анимация (напротив "анимация"должна стоять галочка)
Поскольку мой глиттер состоит из трёх слоёв,я создаю в палитре анимации ещё два слоя,при помощи двойного нажатия на вот эту иконку
(предварительно я выставила время для фрейма 0,2 сек.,вы можете выбрать своё,при помощи нажатия на маленький треугольничек рядом с изображением времени) Вот что у меня получилось в палитре анимации.
В палитре слоёв остаётся всё как есть.И мы всё время стоим на слое с текстом.
]В палитре анимации встаём на второй слой (Я выделила его красным)
Снова идём в палитру слоёв и находим значёк
Далее
И снова выбираем наш градиент,но только уже второе окошечко с его изображением и жмём ОК.
В палитре анимации делаем активным третий слой
И снова
И выбираем третье окошечко с изображением градиента.
Теперь можно просмотреть свою анимаю и сохранить её на компьютер. Для сохранения выполняем команду Файл-Сохранить для Web и устройств.
И нажимаем "Сохранить"
Предварительно можно изменить размер изображения или просто полюбоваться своей работой
В этом уроке мы научимся создавать золотые буквы, работая со стилями в Adobe Photoshop. В результате нашей работы получим такой золотой сверкающий текст:
Шаг1. Создаем новый документ в Фотошопе: File menu / New, или Ctrl+N, задаем размер 640x480 пикселов и OK . Цвет фона – черный.
Шаг2. Выбираем Type tool на панели инструментов и вставляем нужный текст. Автор выбрал слово GOLD. Шрифт "Times New Roman Bold". Если размер текста вас не устраивает – редактируйте с помощью меню Free Transform или Ctrl+T.
Шаг3. Создайте дубликат текстового слоя GOLD с помощью контекстного меню или комбинации Ctrl+J . Дальше будем работать с копией слоя GOLD copy.
Шаг4. Задаем золотой градиент для текста.
В окне Слои (Layers palette) в Фотошопе есть полезная кнопка Layer Styles (Стиль слоя):
Выбираем наложение градиента.
Используем диалоговое окно Layer Style (Стили слоя) для установки параметров эффекта слоя Градиент.
Далее щелкнуть на изображении градиента для вызова редактора градиентов.
Шаг5. Создаваемый градиент должен имитировать переливы золота, поэтому должен быть переход от светло золотого к насыщенному золотому. В окне редактора градиентов задаем цвет левого маркера так, как на рисунке - R:247, G:238, B:173, что соответствует светло-золотому цвету (# f7eead).
Для правого маркера аналогично задайте R:193, G:172, B:81 (# c1ac51). Затем нажмите ОК, закройте окно редактора.
Результат должен выглядеть примерно так:
Дальше в окне редактора стилей установите:
Вот результат:
Окно редактора стилей не закрывайте, оно еще пригодится.
Шаг6. Текст должен быть объемным, для чего используем другие эффекты слоя. В окне редактора стилей устанавливаем следующие параметры для Bevel and Emboss (Тиснение)
вот таким образом: меняем Technique (Метод) на Chisel Hard (Жесткая огранка),
Gloss Contour (Контур глянца) на "Ring Double"
и выберите опцию Anti-Aliased (Сглаживание).
Установите размер 16 pixels и Depth (Глубина) 171%:
Теперь буквы стали золотыми.
Для усиления эффекта можно добавить Contour (Контур).
Шаг7. Продолжим работу с диалоговым окном редактора стилей.
Выбираем Inner Glow (Внутреннее свечение)
и устанавливаем такие параметры: меняем цвет на оранжевый (R:232, G:128, B:31 ),
далее - Blend Mode(Режим) на Multiply (Умножение), Opacity (уровень прозрачности) устанавливаем 50%, размер 15 пикселов.
На этом закончим работу с дубликатом текстового слоя.
Шаг8. Продолжим работу с оригинальным текстовым слоем. Щелкните не этом слое в палитре слоев чтобы сделать его активным.
Щелкните на Layer Styles чтобы начать работу со стилями этого слоя.
Выбираем Stroke (Обводка) и задаем для нее такие параметры
Настроим градиент для обводки. Для этого откройте редактор градиентов и для левого маркера задайте цвет R:247, G:238, B:173 для правого - R:193, G:172, B:81. OK.
Шаг9. Теперь нужно настроить Bevel and Emboss (Тиснение) для Stroke (Обводки).
Для этого в диалоговом окне настройки стиля нужно выбрать Stroke Emboss и другие параметры настроить так, как на рисунке:
Результат должен быть такой.
Шаг10. Теперь можно добавить в диалоговом окне настройки стиля Outer Glow (Внешнее свечение), цвет R:183, G:145, G:79 .
Шаг11. А сейчас сделаем текст сверкающим и сияющим. Для этого добавим новый слой Sparkles. Этот слой должен быть над всеми слоями. Используем кисть похожую на Х, которую выберем из Assorted Brushes Adobe Photoshop.
Цвет для рисования выберем самый светлый из всех, что есть в изображении.
В некоторых местах добавляем несколько блесток, сверкающих бликов в слое Sparkles. Делаем слой полупрозрачным и наслаждаемся результатом.