PS新手教程！手把手教你创建美味的巧克力字体效果_html/css

首页

web前端

html教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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连发！】

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

原文地址： pdadians

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

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

超越HTML：网络开发的基本技术Apr 26, 2025 am 12:04 AM

要构建一个功能强大且用户体验良好的网站，仅靠HTML是不够的，还需要以下技术：JavaScript赋予网页动态和交互性，通过操作DOM实现实时变化。CSS负责网页的样式和布局，提升美观度和用户体验。现代框架和库如React、Vue.js和Angular，提高开发效率和代码组织结构。

HTML中的布尔属性是什么？举一些例子。Apr 25, 2025 am 12:01 AM

布尔属性是HTML中的特殊属性，不需要值即可激活。1.布尔属性通过存在与否控制元素行为，如disabled禁用输入框。2.它们的工作原理是浏览器解析时根据属性的存在改变元素行为。3.基本用法是直接添加属性，高级用法可通过JavaScript动态控制。4.常见错误是误以为需要设置值，正确写法应简洁。5.最佳实践是保持代码简洁，合理使用布尔属性以优化网页性能和用户体验。

如何验证您的HTML代码？Apr 24, 2025 am 12:04 AM

HTML代码可以通过在线验证器、集成工具和自动化流程来确保其清洁度。1)使用W3CMarkupValidationService在线验证HTML代码。2)在VisualStudioCode中安装并配置HTMLHint扩展进行实时验证。3)利用HTMLTidy在构建流程中自动验证和清理HTML文件。

HTML与CSS和JavaScript：比较Web技术Apr 23, 2025 am 12:05 AM

HTML、CSS和JavaScript是构建现代网页的核心技术：1.HTML定义网页结构，2.CSS负责网页外观，3.JavaScript提供网页动态和交互性，它们共同作用，打造出用户体验良好的网站。

HTML作为标记语言：其功能和目的Apr 22, 2025 am 12:02 AM

HTML的功能是定义网页的结构和内容，其目的在于提供一种标准化的方式来展示信息。1）HTML通过标签和属性组织网页的各个部分，如标题和段落。2）它支持内容与表现分离，提升维护效率。3）HTML具有可扩展性，允许自定义标签增强SEO。

HTML，CSS和JavaScript的未来：网络开发趋势Apr 19, 2025 am 12:02 AM

HTML的未来趋势是语义化和Web组件，CSS的未来趋势是CSS-in-JS和CSSHoudini，JavaScript的未来趋势是WebAssembly和Serverless。1.HTML的语义化提高可访问性和SEO效果，Web组件提升开发效率但需注意浏览器兼容性。2.CSS-in-JS增强样式管理灵活性但可能增大文件体积，CSSHoudini允许直接操作CSS渲染。3.WebAssembly优化浏览器应用性能但学习曲线陡，Serverless简化开发但需优化冷启动问题。