Gif анимация слова текста с прыгающими буквами

Создаём Материал для 3D Обводки

Шаг 1

Выделите все вкладки Материал для Обводки передней/задней выпуклости и скоса (Stroke Inflation and Bevel Material), а затем удалите их текстуру Рассеивание (Diffuse), а также поменяйте остальные настройки:

• Рассеивание (Diffuse): ()
• Цвет блика (Specular): ()
• Блеск (Shine): 50
• Отражение (Reflection): 20
• Коэфф. преломления (Refraction): 1.2

Шаг 2

Выделите все вкладки Материал Экструзии для Обводки (Stroke Extrusion Material), а затем удалите их текстуру Рассеивание (Diffuse), а также поменяйте остальные настройки:

• Рассеивание (Diffuse): ()
• Цвет блика (Specular): ()
• Блеск (Shine): 20
• Отражение (Reflection): 20
• Коэфф. преломления (Refraction): 1.2

Создаём общую форму 3D текста

Шаг 1

Зайдите в меню Фильтры – Размывание – Размывание движением. В диалоговом окне фильтра сделайте следующие настройки:

• Тип размывания – Наезд камерой;
• Центр размывания – X: 960 px, Y: px;
• Отключить команду – Размыть наружу;
• Длина – 60 px.

Нажмите ОК.

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

В меню Выделение примените команду Инвертировать. В итоге выделенным будет только размытый текст.

Шаг 4

Возьмите инструмент Градиент с настройками по умолчанию:

• Цвет переднего плана и фона – Чёрный/Белый;
• Градиент – Основной в фоновый (RGB);
• Форма – Линейная.

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

Шаг 5

Переключитесь на верхний слой и включите его видимость пиктограммой глаза.

Заготовка 3D текста будет выглядеть так.

Теперь поработаем над приданием реалистичности объёму.

Обводим Контур Узором

Шаг 1

Отключите видимость слоя Узор (Pattern). Создайте новый слой ниже предыдущего слоя, назовите этот слой Выпуклый (Frill).

Шаг 2

Идём Редактирование — Выполнить заливку (Edit > Fill), а затем поменяйте Содержимое (Contents) на Узор (Pattern).

В выпадающем меню, выберите узор, который вы только что создали Выпуклый (Frill). Поставьте галочку в окошке Сценарий (Script), а также выберите опцию Разместить вдоль контура (Place Along Path) и нажмите кнопку ‘OK’.

Шаг 3

В появившемся окне Поместить вдоль контура (Place Along Path), установите следующие настройки:

• Масштаб узора (Pattern Scale): 1 (измените масштаб, если хотите изменить размер выпуклости)
• Интервалы (Spacing): 0 (это обеспечит, чтобы элементы заливки узора не наслаивались друг на друга)
• Поставьте галочку в окошке Настроить интервалы по размеру (Adjust spacing to fit).
• Угол от контура (Angle from path): -90 (чтобы заливка узором повторяла направление контура без поворота)
• Расстояние от контура (Distance from path): 0 (Узор будет расположен точно по контуру)
• Уберите галочку в окошке Другие узоры (Alternate patterns), чтобы избежать добавления узоров на обеих сторонах контура.
• Прогрессия масштабирования (Scale progression): 100 (чтобы заливка была одного размера вдоль всего контура)
• Уберите галочку в окошке Пропустить поворот символа (Skip symbol rotation), таким образом, элементы узора будут соблюдать направление контура.
• Произвольность цвета (Color randomness): 0
• Произвольность яркости (Brightness randomness): 0 (Это поможет создать произвольное изменение яркости, чтобы сделать узор более динамичным)

Шаг 4

Как только вы нажмёте кнопку ‘ОК’, контур будет залит узором.

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

Шаг 5

Убедитесь, что вы находитесь на слое Выпуклый (Frill), а затем дважды нажмите клавишу (Delete), чтобы удалить рабочий контур и внутреннюю часть выпуклости.

Отмените активное выделение (Ctrl+D), когда закончите.

Создаём Задний Фон

Шаг 1

Добавьте слой с заливкой Градиента (Gradient) поверх слоя Задний фон (Background), установите следующие цвета градиента справа,  в центре, и слева.

Поменяйте Угол (Angle) на 105, а Масштаб (Scale) на 250. Вы можете мышкой перемещать градиент внутри области текста, чтобы подобрать наилучшее расположение.

Шаг 2

Добавьте текстуру Боке на наш рабочий документ, расположив данную текстуру поверх слоя с заливкой градиента, примените масштабирование при необходимости, назовите слой с текстурой Боке Блеск Заднего фона (Glitter BG), а затем поменяйте режим наложения для данного слоя на Мягкий свет (Soft Light).

Шаг 3

Добавьте корректирующий слой Цветовой тон / Насыщенность (Hue/Saturation) в качестве обтравочной маски к слою Блеск Заднего фона (Glitter BGlayer), поставьте галочку в окошке Тонирование (Colorize), а также поменяйте значение Цветового тона (Hue) на 40.

Шаг 4

Добавьте изображение hybrid3 из набора Световые Эффекты С4D на наш рабочий документ, расположив поверх слоя Блеск Заднего фона (Glitter BG), назовите этот слой Текстура 01 Заднего фона (BG Texture 01).

Поменяйте режим наложения для слоя Текстура 01 Заднего фона (BG Texture 01) на Осветление (Screen). Примените масштабирование при необходимости.

Шаг 5

Добавьте корректирующий слой Цветовой тон / Насыщенность (Hue/Saturation) в качестве обтравочной маски к слою Текстура 01 Заднего фона (BG Texture 01), поставьте галочку в окошке Тонирование (Colorize), а также поменяйте значение Цветового тона (Hue) на 38.

Шаг 6

Добавьте изображение Platinafx4 из набора Эффектов C4d на наш рабочий документ, расположив поверх слоя Текстура 01 Заднего фона (BG Texture 01). Назовите этот слой Текстура 02 Заднего фона (BG Texture 02).

Поменяйте режим наложения для слоя Текстура 02 Заднего фона (BG Texture 02) на Осветление (Screen). Примените масштабирование при необходимости.

Шаг 7

Добавьте корректирующий слой Цветовой тон / Насыщенность (Hue/Saturation) в качестве обтравочной маски к слою Текстура 02 Заднего фона (BG Texture 02), поставьте галочку в окошке Тонирование (Colorize), а также поменяйте значение Цветового тона (Hue) на 35.

Создание 3D текста в «Фотошоп»

Далее рекомендуется переходить к вкладке «Капитель». Здесь задается степень угловатости текста. Лучше не трогайте эту вкладку в том случае, если вы не собираетесь делать углы более фигурными или гладкими. Последняя вкладка получила наименование «Координаты». В ней можно задать точное местонахождение 3D текста в изображении.

Но это ещё не всё. Сделать объемный текст в «Фотошопе» — это не только задать ему цвет, сменить ракурс и изменить глубину экструзии. Взгляните на панель «3D». В ней вы найдете несколько пунктов, ответственных за присвоение тексту того или иного материала. Кликните на строку «Материал передней выпуклости». А панели «Свойства» немедленно отобразятся параметры материала, из которого состоит передняя часть нашего текста. Вы можете изменить коэффициент преломления отраженного цвета, плавность контура, его рельеф и прочие параметры. Можно даже усилить блеск.
На этом создание 3D текста в «Фотошопе» практически завершено. Предлагаем с оставшимися пунктами панели «3D» ознакомиться самостоятельно. Эксперименты не возбраняются. Мы же напоследок расскажем лишь о пункте «Бесконечный свет 1». Нажмите на него — в «Свойствах» откроются параметры освещения. Сам источник освещения будет виден на композиции, он имеет значок с изображением солнышка.
Вы можете сменить бесконечный свет на точечный или направленный. В последнем случае на композиции появится своеобразный прожектор, силу свечения которого можно регулировать. Также регулировке подвергается диаметр освещаемого пространства.

Доводим эффект объёма до реалистичности

Сделайте правый клик на верхнем слое и в контекстном меню выберите пункт Альфа-канал в выделение.

Шаг 2

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

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

Выберите в меню Выделение – Уменьшить. Установите 3 px и нажмите ОК.

Создайте новый прозрачный слой через меню Слой – Создать слой. Нажмите ОК.

Шаг 5

Снова возьмите инструмент Градиент и настройте его так:

• Цвет переднего плана – Белый;
• Градиент – Основной в прозрачный;
• Форма – Линейная.

Протяните линию градиента по выделенной верхушке, как показано на скриншоте. Это создаст эффект отблеска света на поверхности нашей даты.

Переключитесь на слой с основным текстом, создающим иллюзию объёма.

Выберите в меню Фильтры – Размывание – Гауссово размывание. Установите радиус размывания на 2 px и нажмите ОК.

Настраиваем размещение объектов сцены

Шаг 1

На панели 3D выделяем все компоненты текста (сам текст и три обводки), затем кликаем на значок меню в правом верхнем углу панели и выбираем Move Object to Ground Plane (Переместить объект на плоскость основания).

Шаг 2

Берем Move Tool (V) (Перемещение) и используем 3D-оси, чтобы отделить обводки друг от друга.

Стрелки на концах осей двигают объекты, маленькая дуга, которая идет дальше, отвечает за поворот, а с помощью куба можно масштабировать объект. Центральный куб, из которого выходят оси, нужен для равномерного масштабирования объекта. Чтобы выполнить какое-то действие с осями, просто кликаем по ним и тянем мышкой.

Также вы можете перейти в меню View – Show – 3D Secondary View (Вид – Показать – Второстепенный 3D-вид), кликнуть на маленькую стрелку в левой части и выбрать Top (Вид сверху), чтобы лучше контролировать процесс перемещения обводок.

Конструктор Shattering надписей и текстов с анимацией разрушения красивым шрифтом

Сохранить

Текст, шрифт

Цвета,Фон

Анимация

Экран

Текст
Текст:
Шрифт:
HelveticaNeueCyrBloggerSansArcadia-BoldHelveticaNeueCyrNicknameDKBlackBambooCTCSplashRoundedKuraleBoughLirussTYGRADrinaPlanetN2ArciformSansMonplesirMarshStencilPlainotDublonCColumnSimpleMullerThinRomeoRUSBedrockCCAdamKubertMorningGloryBatmanForeverEnchantedLandPH100CondCapsRibbonHeartVALStencilcyrCitricaCyrillicReginaKursivItalicZettaPapyrusSlotCyrillicAstakhovSkinPirouCyrillicSnowForSantaOrbitronWerfusPFHandbookProThinIcekingdomElevatePERSONALAstakhovDishedSevillaDecorCellblockNBPBudmoJigglerCyrCricketNormalAtibaCyrillicFreakomixbyAvdoManProHarryPotterAmericanTextCJazzBallVoxRegularAstakhovDishedGlamourPanforteProProbaNav2RegularLDSlenderNEXTART-LightAstakhovFirstABRegularOldKingC-BoldMerkurVEGeorgianBrushAlbertusMediumEskalFont4YouAstrocyrWarfaceRedisTYGRAOldComedyBuccaneerMunchkinCyrChocolatesovietfontCocaColaBrandbePhenomenaaMavickFontMarkerFeltWideAlabamaEurotypeClobberinTimeBadaBoomBBAmericanCaptainCyberfallPixelDigivolveCgFiorelloPacmaniaRoddenberryVideopacAmphiWoWSlFKGUpheavalProRealizeMyPassionOldRosaNormalGagalinGTAPricedownVAGWorldBoldkrestikPFHellenicaSerifProSnowstormSnowstormInlineKramolaSmesharikiCOLORADOIIICOLORADOIOICOLORADOXGOSTtypeAAstakhovvitrageAstakhovpastelMonsterHighKomikaAxisPeaceSansSporedomRUSMartAWXRotondaKarminaWidefaceAWXssdrebedenCassandraElzevirLobsterKittyKatJuraLightMarmeladRegularBIPFuturaRoundTiProunNormalLCDNOVAAnnabelleStudioScriptCTTSTRTBicubikTagirCTTNormalBirchCTTinformKursivcArchangelskZionTrainAeroMaticsStencilMetroModernzopaPlayDictDsjapancyrMetroloxRunicDSCopticDSSupervixenCyrBreezeScriptoramaScriptSSKPorscheFloydianCyrLCChalkOLGACDsBrushesAnfisaGroteskMasonDisneyParkAmericanRetroPudelinaMolotNiseSegaNFSJLtvNeuropolDeusExHarryPotterFriendsDSRabbitKonkordRetroLCBlowzyTopazSeedsCyrMediumWenatcheeKBVectroidZhiznVogueCyrUnderdogGlideSketchCitricaCompoShadowBeastVsButtercrumbEtudeBMspiralProunxAWithSerifsArtemisDecoToscaniaIntruderArianGrqiAuctionArroTerminalNeuchaComicSansMSCaviarDreamsHauptbahnhofChaLimousinesAdLibWin95BTDSStamperChinaCyrGOSTtypeACalligraphCampanellaSladkoeshkaMartadecoronePteroqueMinecraftChocogirlKBBandRoundScriptTaurusParsekFuroreFlowObelixProCorinthiaRosaMarenaACampusTECHDTangoDiMBThinkTwiceBedrockCHondaCAlbionicTitulInflMachinaNovaBrkDarthEmilArctikascriptBistrocTokioFedericoLarisaScriptB52TeddyBearRupsterScriptGoosePoddCyrSirCliveACampusGravBoldMoonlightFlowerchildKonstruktoDecoMatterhorncttMontblancSTALKERARCH2DitedHardpixelLegendeCTechno28AmericanCaptainResagokrZnikomitNo24ZnikomitNo24ThinTexgyreAdventorWolgastTwoArtDecorinaMedievalEnglishAmoreMBDemonicAliceComfortaaParizhelPompadurChibolaSeminariaStradivariMoyenageProletariatHermannGotischBalloonXBdBalloonOlympiaDecoVarieteBirusaReginaKursivConkordiaNewRecordMayaEpsilXiomaraPasadenaDecoRomanaScriptJuliaScriptConnieRegularRepivmanuscSochi2014RegularGramoclerictonTetraclerictonInkyLeokadiaDecoMatreshkaEuroferenceProtoSansUndergradUltrathinAvdiraRGrishenkoBangWhackPowInfinityPaintItDarkSangBleuSumkinTypefaceEyelevation6AAHigherupAlfavitaPoiretOneRegularIronRussianAleksandraCDurazkyCaptchaCodeOwnHandNiseSegaAAHaymakerAANeonOOSTROVKARDONboldIOCONDIOSMovieLettersFabryka4FRUSCHEAPSTEAngryBirdsAAMagnumRUSwolfensteinTamilaParanoiaMLikesBoomboomVelesRKobzarKSNEON1NeonDLNeonOLNeonGFTOdlNickainleyCyberpunkSGMLIIAppetiteNewLavanderiaC
Размер шрифта (px):

Стиль текста:
NormalBoldItalicItalic Bold

Цвет текста

Изображение:
Удалить изображение

Цвет фона

Фоновое изображение:
Удалить изображение

Параметры анимации

Время анимации (с):
Пауза до разделения(с):
Мин прозрачность частиц (%):
Разброс (0% — 500%):

Задержка (с):
Пауза после разделения(с):
Размер частиц (%):
Мин. разброс (0% — 500%):

Размер области

Ширина области (px):

Высота области (px):

34%

3D текст в «Фотошоп» CS6

3D текст в «Фотошопе» фактически создан. Но теперь с ним нужно плотно поработать для улучшения его внешнего вида. У вас должна была открыться панель 3D. Если этого не случилось, то перейдите по пути «Окно >> 3D». Нажмите на название основной сетки (оно состоит из написанного вами слова), чтобы в панели «Свойства» открылись параметры изображения. Именно над ними вы будете работать. Примечательно, что в любой момент вы можете взять инструмент «Горизонтальный текст» и отредактировать надпись. Прямо во время оформления объемного текста в «Фотошопе»! Однако не всё так просто. 3D текст редактируется в «Фотошопе» CS6. В более ранних версиях он перед переводом в трехмерный режим растрируется, поэтому редактирование становится невозможным.
В данный момент в панели «Свойства» имеются четыре вкладки-иконки. Изначально открыта вкладка «Сетка». Здесь выбирается глубина экструзии, цвет 3D текста в «Фотошопе», добавляется тень, а также применяется шаблонная заготовка той или иной деформации.

Следующая вкладка получила наименование «Деформировать». Здесь можно поработать над экструзией объемного текста (фактически его толщиной по оси Z). Вы можете изменить глубину, скрутить её, придать ей эффект конусообразности и совершить прочие действия.
В данный момент над изображением находится панель инструментов, отвечающих за ориентацию в 3D-режиме. С помощью соответствующих кнопок вы можете поворачивать камеру или саму надпись по всем трем осям. Пользуйтесь ими для реализации своей задумки.

Создаем обводку

Дублируем текстовый слой (Ctrl+J) и называем копию «Обводка 1».

Шаг 2

Берем Direct Selection Tool (A) (Частичное выделение) и переходим на верхнюю панель инструментов.

Примечание: в некоторых версиях программы инструмент Direct Selection Tool переводится как «Стрелка»

Устанавливаем Fill (Заливка) на None (Нет), Size (Размер) на 25 и в качестве цвета обводки выбираем черный. Затем кликаем на кнопку выбора типа обводки и в выпадающем меню Align (Выравнивание) выбираем Outside (Снаружи).

Дублируем слой «Обводка 1» и называем копию «Обводка 2». Меняем ширину обводки дубликата на 35.

Добавляем бэкграунд – украшаем 3D text подходящим фоном

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

Активируйте нижний слой с белым фоном в стопке слоёв.

Шаг 2

Выберите в меню Файл – Открыть как слои. Найдите на компьютере папку со скачанными фонами, выделите понравившийся и нажмите Открыть.

Загруженное изображение расположится в стопке слоёв над белым фоном.

Шаг 3 – по необходимости

По желанию вы можете уменьшить/увеличить задний фон с помощью инструмента Масштаб.

И затем позиционировать его инструментом Перемещение.

Шаг 5

Возьмите инструмент Градиент и настройте его так:

• Фон переднего плана – Белый;
• Градиент – Основной в прозрачный (кликните по реверсивной стрелке, чтобы на пиктограмме градиента с левой стороны была прозрачность, а с правой – белый цвет);
• Форма – Радиальная.

Шаг 6

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

В диалоговом окне Слои активируйте слой с самим текстом.

Шаг 8

Выберите в меню Цвет – Тонирование. Поиграйтесь переменными значений Тон, Насыщенность, Освещённость, и затонируйте получившуюся дату в желаемый цвет.

Шаг 9

Наконец, выберите в меню Изображение – Свести изображение.

Оцените готовый результат:

На этом урок закончен. Теперь вы знаете во всех подробностях, как сделать 3D TEXT в GIMP.

Сделать объемный текст в «Фотошоп»

Для начала вам необходимо открыть «Фотошоп» и создать новый файл. Задайте разрешение 600 x 600 пикселей. Сразу при создании документа выберите черный цвет и залейте им изображение (для этого используется инструмент «Заливка»). Возьмите инструмент «Горизонтальный текст» и напишите белым цветом одно слово. Подберите подходящий шрифт и его размер. В нашем случае это KorinnaBlackC с кеглем в 172 пункта. Текст лучше писать заглавными буквами.
Теперь взгляните на панель с настройками инструмента, располагающуюся над изображением. Там имеется кнопка «3D». Нажмите её. Так ваш текстовый слой автоматически конвертируется в трехмерный.

Настраиваем освещение сцены

Шаг 1

Выделяем компонент Infinite Light (Бесконечный свет) и на панели свойств устанавливаем Intensity(Интенсивность) на 50% и Shadow – Softness (Тень — Сглаживание) на 30%.

Шаг 2

С помощью Move Tool (V) (Перемещение) вы можете двигать источник света или кликнуть на иконку Coordinates (Координаты) на панели Properties (Свойства) и ввести числовые значения координат.

Шаг 3

Выбираем компонент Environment (Окружающая среда), жмем на иконку возле параметра IBL (ИСБИ), выбираем Replace Texture (Заменить текстуру) и загружаем фото комнаты.

Шаг 4

Снова кликаем на иконки IBL (ИСБИ), выбираем Edit Texture (Редактировать текстуру), затем жмем Ctrl+U и устанавливаем Saturation (Насыщенность) на -65.

Сохраняем и закрываем файл.

Устанавливаем Intensity (Интенсивность) на 50%.

Вариант 1:

3D текст

<div class=»text3d-wrap-1″>
<span class=»text3d-1″>3D текст</span>
</div>

1 2 3

<div class=»text3d-wrap-1″> <span class=»text3d-1″>3D текст</span> </div>

.text3d-wrap-1 {
margin: 0;
padding: 0;
background-color: #337AB7;
position: relative;
width: 100%;
height: 260px;
display: flex;
flex-direction: row;
justify-content: center;
perspective: 3000px;
}
.text3d-1 {
align-self: center;
margin-top: -18px;
transition: all 0.3s ease;
transform: rotateX(40deg) rotateZ(5deg);
font-family: Impact, Charcoal, sans-serif;
font-size: 100px;
letter-spacing: 3px;
color: #f5f5f5;
text-shadow: white 0.006em 0.006em 0.007em, #9c9c9c 1px 1px 1px, #9c9c9c 1px 2px 1px, #9c9c9c 1px 3px 1px, #9c9c9c 1px 4px 1px, #9c9c9c 1px 5px 1px, #9c9c9c 1px 6px 1px, #9c9c9c 1px 7px 1px, #9c9c9c 1px 8px 1px, #9c9c9c 1px 9px 1px, #9c9c9c 1px 10px 1px, #9c9c9c 1px 11px 1px, #9c9c9c 1px 12px 1px, rgba(16, 16, 16, 0.4) 1px 18px 6px, rgba(16, 16, 16, 0.2) 1px 22px 10px, rgba(16, 16, 16, 0.2) 1px 26px 35px, rgba(16, 16, 16, 0.4) 1px 30px 65px;
}
.text3d-wrap-1:hover .text3d-1{
margin-top: -26px;
text-shadow: white 0.006em 0.006em 0.007em, #9c9c9c 1px 1px 1px, #9c9c9c 1px 2px 1px, #9c9c9c 1px 3px 1px, #9c9c9c 1px 4px 1px, #9c9c9c 1px 5px 1px, #9c9c9c 1px 6px 1px, #9c9c9c 1px 7px 1px, #9c9c9c 1px 8px 1px, #9c9c9c 1px 9px 1px, #9c9c9c 1px 10px 1px, #9c9c9c 1px 11px 1px, #9c9c9c 1px 12px 1px, rgba(16, 16, 16, 0.4) 1px 38px 26px, rgba(16, 16, 16, 0.2) 1px 42px 30px, rgba(16, 16, 16, 0.2) 1px 46px 65px, rgba(16, 16, 16, 0.4) 1px 50px 95px;
}
@media (max-width:767px) {
.text3d-1 {
font-size: 60px;
}
}

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

.text3d-wrap-1 { margin; padding; background-color#337AB7; positionrelative; width100%; height260px; displayflex; flex-directionrow; justify-contentcenter; perspective3000px; } .text3d-1 { align-selfcenter; margin-top-18px; transitionall0.3sease; transformrotateX(40deg)rotateZ(5deg); font-familyImpact,Charcoal,sans-serif; font-size100px; letter-spacing3px; color#f5f5f5; text-shadowwhite0.006em0.006em0.007em,#9c9c9c1px1px1px,#9c9c9c1px2px1px,#9c9c9c1px3px1px,#9c9c9c1px4px1px,#9c9c9c1px5px1px,#9c9c9c1px6px1px,#9c9c9c1px7px1px,#9c9c9c1px8px1px,#9c9c9c1px9px1px,#9c9c9c1px10px1px,#9c9c9c1px11px1px,#9c9c9c1px12px1px,rgba(16,16,16,0.4)1px18px6px,rgba(16,16,16,0.2)1px22px10px,rgba(16,16,16,0.2)1px26px35px,rgba(16,16,16,0.4)1px30px65px; } .text3d-wrap-1:hover .text3d-1{ margin-top-26px; text-shadowwhite0.006em0.006em0.007em,#9c9c9c1px1px1px,#9c9c9c1px2px1px,#9c9c9c1px3px1px,#9c9c9c1px4px1px,#9c9c9c1px5px1px,#9c9c9c1px6px1px,#9c9c9c1px7px1px,#9c9c9c1px8px1px,#9c9c9c1px9px1px,#9c9c9c1px10px1px,#9c9c9c1px11px1px,#9c9c9c1px12px1px,rgba(16,16,16,0.4)1px38px26px,rgba(16,16,16,0.2)1px42px30px,rgba(16,16,16,0.2)1px46px65px,rgba(16,16,16,0.4)1px50px95px; } @media (max-width:767px) { .text3d-1 { font-size60px; } }

Объединяем слои текста для удобства дальнейшей работы

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

Активируйте верхний слой с эффектом отблеска. Сделайте по нему правый клик и выберите Объединить с предыдущим.

Шаг 2

Повторите то же действие, объединив слой с хэштегом #1 и слой, имитирующий объём. В итоге ваша стопка слоёв будет выглядеть так.

3D TEXT готов и должен выглядеть примерно так.

Шаг 3 – по необходимости

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

Теперь добавим нашей надписи подходящий фон.

Подготовительные работы для создания объёмного текста

В отличие от ранее сделанного нами объёмного текста с завитушками в малом формате, этот текст мы изготовим в HD качестве.

Создайте новый проект через меню Файл – Создать. Установите размеры изображения 1920×1080 px и нажмите ОК.

Шаг 2

Возьмите инструмент Текст и настройте его так:

• Шрифт – Sans Bold;
• Размер – 600 px.

Напечатайте на холсте текст-дату – 2018.

Шаг 3

Возьмите инструмент Выравнивание и сделайте клик на тексте. С помощью кнопок центрирования установите надпись посередине.

Текст расположится точно по центру.

Шаг 3

В диалоговом окне Слои сделайте правый клик на текстовом слое и в контекстном меню выберите пункт Слой к размеру изображения.

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

Шаг 5

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

Подготовка перед созданием объёмного текста завершена.

Работаем с 3D Сценой

Шаг 1

Чтобы получить доступ к настройкам 3D объектов, а
также к другим параметрам, мы должны открыть две панели: панель 3D и панель Свойства (Properties) (обе панели
можно активировать через меню Окно (Window).

Панель 3D имеет
все компоненты 3D сцены и, если вы
щёлкните по названию одного из них, то вы сможете получить доступ к настройкам
панели Свойства (Properties). Поэтому, если вы хотите провести
редактирование, не забудьте вначале выбрать вкладку элемента в 3D панели, а затем уже меняйте
настройки в панели Свойства (Properties).

Шаг 2

Если вы выберите инструмент Перемещение (Move Tool  (V),
то вы увидите появившееся окно с 3D
режимами рядом с панелью настроек.

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

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

Создаём и Стилизуем Нити

Шаг 1

Создайте новый слой поверх слоя Боке (Bokeh), назовите этот слой Нити (Strings), а затем выберите инструмент Кисть (Brush Tool). С помощью жёсткой кисти диаметром 3рх, нарисуйте прямые вертикальные линии для каждой буквы текста. Примечание переводчика: удерживайте клавишу (Shift), чтобы линии были прямыми.

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

Шаг 2

Добавьте стиль слоя Тиснение (Bevel and Emboss). Установите следующие настройки:

• Размер (Size): 7
• Угол (Angle): 30
• Высота (Altitude): 30
• Контур глянца (Gloss Contour): Cone
• Поставьте галочку в окошке Сглаживание (Anti-aliased)
• Режим подсветки

  Непрозрачность (Opacity): 50%

  (Highlight Mode): Линейный
  свет (Linear Light)

• Режим тени

  Непрозрачность (Opacity): 50%

  (Shadow Mode): Линейный затемнитель (Linear Burn)

Шаг 3

Добавьте стиль слоя Контур (Contour) со следующими настройками:

• Контур (Contour): Ring — Double
• Поставьте галочку в окошке Сглаживание (Anti-aliased)

Шаг 4

Добавьте стиль слоя Текстура (Texture ) со следующими настройками:

• Узор (Pattern): Metal Landscape
• Масштаб (Scale): 25%

Шаг 5

Добавьте стиль слоя Наложение цвета (Color Overlay) со следующими настройками:

Цвет (Color): #917149

Таким образом, мы стилизовали нити.