PS新手教程！手把手教你打造一个雪地冰晶图标_html/css

Home

Web Front-end

HTML Tutorial

PS新手教程！手把手教你打造一个雪地冰晶图标_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:26 AM

编者按：今天@P大点S微博给同学们来一个新手教程，操作比较简单，主要是帮基础差的同学熟悉一下PS，素材和源文件已经打包好了，不妨来练个手。

本文为作者授权优设发布，未经作者本人授权请勿转载，谢谢：）

PSD和素材下载请点击： http://pan.baidu.com/s/1dEwmYHF

最终效果

首先，新建一个1000*1000px 的画布，把背景素材放进去。

素材的雪地不适合我们这次的效果，所以需要自己画一个雪地。

先画一个白色的矩形，与画布底对齐。但是正常的雪地边缘不会是一条直线，应该有点细微的弧度，所以先用直接选择工具（快捷键A）选择矩形的路径，然后添加两个锚点，稍微拉一点弧度出来。

这一步也可以直接用钢笔勾。

然后给刚刚勾的形状添加图层样式。

背景算是做好了，然后开始撸图标。

先新建一个512*512，圆角为90px的圆角矩形，与画布水平、垂直居中，然后将雪人素材拖进去，按住ALT点击雪人图层和圆角矩形图层中间，创建剪切蒙版。

然后给圆角矩形添加一个内发光

但是图标的底部不应该是这样的光，所以我们需要把内发光分离出来，然后用蒙版擦掉多余的效果。

回到图层面板，在“内发光”上点右键，选择“创建图层”

内发光效果就分离成了一个单独的图层，然后创建蒙版，把底下的内发光擦掉。

接着回到圆角矩形，继续添加图层样式

差不多已经有晶莹剔透的感觉了，接下来做图案。

放一个自己喜欢的图案，给这个图案做图层样式。

图案叠加的时候，如果图案里面没有合适的纹理，可以点击右边的齿轮，然后选择“岩石图案”，追加图案。

然后应该是这个样子：

接着做些小动作，给这个图案加强效果~

添加一个蒙版，然后用多边形套索工具做一个切口的选区，填充黑色。

重复步骤，多做几个切口，然后得到这个样子。

虽然效果是做好了，但是这个图案感觉有点别扭，还需要加一个投影。

CTRL+J复制一个这个加了特效的图层，移动到原图层的下方。清除拷贝图层的图层样式，添加一个投影。

整体的效果已经有了，但是还是有点死。给右上角来个高光试试。

画一个白色的圆，稍微大一点；给一点高斯模糊，模糊半径别太小；再把透明度调低。然后用同样的办法再做一个，这次的圆要小一点，模糊度低一点，透明度高一点。如果效果不好可以再加一层。然后得到这个样子：

接下来做雪地上的投影。

把所有和图标有关的图层（除了背景素材和雪地图层以外的图层）一起建个组，CTRL+ALT+E盖印该组，得到一个合并后的图层，CTRL+T垂直翻转，移动到合适的位置。

加一个蒙版，拉一下黑白渐变，移动图层顺序。

然后用刚才做高光的办法，做一下阴影。

本来到这里应该就可以结束了，但是我发现背景的色调和图标有些不搭，CTRL+M调一调曲线。

最终效果：

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

【优设酷站22连发！】

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

原文地址： pdadians

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

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

HTML as a Markup Language: Its Function and PurposeApr 22, 2025 am 12:02 AM

The function of HTML is to define the structure and content of a web page, and its purpose is to provide a standardized way to display information. 1) HTML organizes various parts of the web page through tags and attributes, such as titles and paragraphs. 2) It supports the separation of content and performance and improves maintenance efficiency. 3) HTML is extensible, allowing custom tags to enhance SEO.

The Future of HTML, CSS, and JavaScript: Web Development TrendsApr 19, 2025 am 12:02 AM

The future trends of HTML are semantics and web components, the future trends of CSS are CSS-in-JS and CSSHoudini, and the future trends of JavaScript are WebAssembly and Serverless. 1. HTML semantics improve accessibility and SEO effects, and Web components improve development efficiency, but attention should be paid to browser compatibility. 2. CSS-in-JS enhances style management flexibility but may increase file size. CSSHoudini allows direct operation of CSS rendering. 3.WebAssembly optimizes browser application performance but has a steep learning curve, and Serverless simplifies development but requires optimization of cold start problems.

HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

See all articles