Table des matières
【优设酷站22连发!】
Maison interface Web tutoriel HTML PS新手教程!手把手教你创建美味的巧克力字体效果_html/css_WEB-ITnose

PS新手教程!手把手教你创建美味的巧克力字体效果_html/css_WEB-ITnose

Jun 21, 2016 am 08:59 AM

@P大点S微博:今天,我们带来一个卡通巧克力字体特效,操作上并不复杂,重点是一些图层样式的应用。已经有同学交作业了,你也来试试。

做的时候是用的CC 2015,截图的时候也是CC 2015的截图,部分的图层样式中添加了两个以上的相同样式,低版本的话,直接复制图层,将填充更改为0,再添加样式,就能实现这个效果了。

截图再次修改也很麻烦,于是截图就没有修改了,但是考虑到也许用CC 2015的人或许并不那么多,所以,我们提供的PSD用低版本修改过了,不明白的话,看看PSD,我想你会明白。

正式开始

新建画布1920*1080,填充背景颜色#1c120b,解锁背景图层添加样式-图案叠加,追加图案。

设置图层混合模式为叠加,不透明度30%

新建一层,拉一个渐变,默认的黑白颜色,径向渐变拉一个,混合模式叠加,降低不透明度到70左右

打上想要的文字,这里我们用的是P大点S四个字,所用的字体为方正胖头鱼简体。

文字图层上右键,转换成智能对象。

滤镜–扭曲–波纹,这里我调节的是90,看你们画布大小自己进行调节,参数不固定,适合就好。

添加图层样式,先加个渐变,颜色#d46819—#f9aa01

添加斜面浮雕及纹理,纹理还是刚刚追加图案里面的一种(想要其他效果的可以试试其他的图案)

添加第一个内阴影

第二个内阴影(点内阴影后面的加好,这是CC 2015的版本才有,低版本的话,复制文字一层,填充不透明度降低到0,然后添加图层样式即可)

第三个内阴影

添加一个内发光

添加投影

新建一层,摁住CTRL单机文字图层,创建出文字图层选区,选择—修改–收缩20个像素,填充颜色。(这里的S收缩的有点厉害,尾巴有点缺失,我单独收缩一下S,减少到15像素吧其他部分去掉,只留下尾巴部分。)

拷贝图层样式粘贴到新建的这个图层,只留下斜面浮雕及纹理,还有三个内阴影,其他都不要。

教程基本结束,想加装饰的可以再来一点装饰。

打上我们的文字和LOGO

添加一点类似甜甜圈上的东西。

作业展示:

欢迎关注可能是做原创教程最用心的公众号:

【优设酷站22连发!】

  1. 免费图库+导航收集站: 《酷站两连发!高品质免费图库站+专注WEB/APP导航收集站》
  2. 音乐站+字体搜索: 《酷站两连发!帮你专心工作的音乐站+谷歌字体在线搜索神器》
  3. 渐变色+代码比较: 《酷站两连发!渐变色方案全聚合网站+在线代码比较神器》
  4. 配色+占位图: 《酷站两连发!在线色彩搭配工具+快速生成占位图片器》
  5. LOGO下载+字体下载: 《酷站两连发!可商用的矢量LOGO下载+平面最爱的27款免费字体》
  6. 压缩图片+在线配色: 《酷站两连发!在线图片压缩神器+在线配色工具COLOURCO》
  7. CSS Hover动画+宠物小精灵配色: 《酷站两连发!宠物小精灵专属配色网站+CSS HOVER动画收集站》
  8. 美女图片+游戏配色: 《酷站两连发!游戏配色网站+免费美女素材特供网站》
  9. 在线配色+字体推荐: 《酷站两连发!在线配色神器+英文字体推荐网站》
  10. 追波作品变代码+16进制颜色: 《酷站两连发!用代码呈现DRIBBBLE作品+16进制颜色网站》
  11. 无缝纹理+多边形背景: 《酷站两连发!专注无缝纹理素材站+多边形背景生成器》

原文地址: pdadians

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

AI Hentai Generator

Générez AI Hentai gratuitement.

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Meilleurs paramètres graphiques
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Comment réparer l'audio si vous n'entendez personne
3 Il y a quelques semaines By 尊渡假赌尊渡假赌尊渡假赌
Où trouver la courte de la grue à atomide atomique
1 Il y a quelques semaines By DDD

Outils chauds

Bloc-notes++7.3.1

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Quel est le but du & lt; Progress & gt; élément? Quel est le but du & lt; Progress & gt; élément? Mar 21, 2025 pm 12:34 PM

L'article traite du HTML & lt; Progress & GT; élément, son but, son style et ses différences par rapport au & lt; mètre & gt; élément. L'objectif principal est de l'utiliser & lt; Progress & gt; pour l'achèvement des tâches et & lt; mètre & gt; pour stati

Quel est le but du & lt; datalist & gt; élément? Quel est le but du & lt; datalist & gt; élément? Mar 21, 2025 pm 12:33 PM

L'article traite du HTML & lt; Datalist & GT; élément, qui améliore les formulaires en fournissant des suggestions de saisie semi-automatique, en améliorant l'expérience utilisateur et en réduisant les erreurs. COMMANDE COMPRES: 159

Quel est le but du & lt; mètre & gt; élément? Quel est le but du & lt; mètre & gt; élément? Mar 21, 2025 pm 12:35 PM

L'article traite du HTML & lt; mètre & gt; élément, utilisé pour afficher des valeurs scalaires ou fractionnaires dans une plage, et ses applications courantes dans le développement Web. Il différencie & lt; mètre & gt; De & lt; Progress & gt; et ex

Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Quelle est la balise Meta de la fenêtre? Pourquoi est-ce important pour une conception réactive? Mar 20, 2025 pm 05:56 PM

L'article traite de la balise Meta de la fenêtre, essentielle pour la conception Web réactive sur les appareils mobiles. Il explique comment une utilisation appropriée garantit une mise à l'échelle optimale du contenu et une interaction utilisateur, tandis que la mauvaise utilisation peut entraîner des problèmes de conception et d'accessibilité.

Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement? Comment utiliser le html5 & lt; time & gt; élément pour représenter les dates et les temps sémantiquement? Mar 12, 2025 pm 04:05 PM

Cet article explique le html5 & lt; time & gt; élément de représentation sémantique de date / heure. Il souligne l'importance de l'attribut DateTime pour la lisibilité à la machine (format ISO 8601) à côté du texte lisible par l'homme, stimulant AccessIbilit

Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez? Mar 20, 2025 pm 06:05 PM

L'article traite du & lt; iframe & gt; L'objectif de Tag dans l'intégration du contenu externe dans les pages Web, ses utilisations courantes, ses risques de sécurité et ses alternatives telles que les balises d'objet et les API.

Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5? Mar 17, 2025 pm 12:20 PM

L'article examine les meilleures pratiques pour assurer la compatibilité des navigateurs de HTML5, en se concentrant sur la détection des fonctionnalités, l'amélioration progressive et les méthodes de test.

Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur? Mar 17, 2025 pm 12:27 PM

L'article discute de l'utilisation des attributs de validation de formulaire HTML5 comme les limites requises, motifs, min, max et longueurs pour valider la saisie de l'utilisateur directement dans le navigateur.

See all articles