ps网页ui设计(ps怎么做网站界面设计)-九游娱乐

ps网页ui设计(ps怎么做网站界面设计)

本文主要介绍ps网页ui设计(如何为ps设计网站)，下面跟着东辰网详细了解一下吧。

在本教程中，我们将与孩子们分享如何使用photoshop制作一个简单时尚的UI按钮，可以在电子商务网站或在线商店中使用。让让我们先看看效果。

1.创建一个新文档(ctr)，大小为600*600(虽然按钮的大小为170*50，但大小较大，方便我们修)。

2.选择圆角矩形工具及并设置圆角5px画一个大小为170*50的圆角矩形。(可以用尺子定)

3.创建一个新层，按下组合键ctrl回车将路径转换为选区并用黑色填充。双击此层添加渐变叠加和和中风和中风图层样式。

渐变叠加样式

笔画样式(笔画颜色:#2877a)

4.接下来，给按钮添加一个对角线效果。

新文档的大小(ctrl)为:4*4。

按ctrl空格键将文档放大到1600%。创建一个新层，删除背景层。

选择铅笔工具并将笔尖大小设置为1px；前景是白色的。画出以下效果:

在菜单栏中查找并编辑已定义的图案；并给图案起了个名字:对角线图案。

返回主文档并按ctrl关键；并单击按钮层使按钮图案成为选区。

在按钮层上新建一层，然后在菜单栏中找到:编辑填充。在弹出的对话框中，选择图案和图案在下拉菜单中，选择对角线模式和如下图的自定义模式。

在菜单栏中找到:选择修改缩小，将选区缩小2px，然后反转选区(CtrlShift)；按delete键删除边缘部分，这样就可以显示笔画了。

改变混合模式和柔光，并调整不透明度:20%

6.选择自定义形状工具在工具箱中，并在选项栏中找到下图。绘制尺寸:13*13；并用白色填充，添加与文本相同的样式。

7。创建悬停状态在图层面板上新建一个组:Normal，将除背景以外的所有图层都拉入这个组。

使用移动工具拖动组正常到新建层按钮复制一个组并将其命名为Hover。

双击黑形组中的层悬停改变它的渐变叠加和风格:

接下来，我们开始切片。使用切片工具选择按钮的范围。在菜单栏找到:文件保存为Web格式，保存为gif格式。

8。创建html

以下是按钮的链接代码========================

aid=web_buttonhref=立即购买/a

========================

按钮的CSS样式===============样式类型=文本/CSS#w:块；width:170px；h:50px；background:URL(w:9999px；/*隐藏文本*/outlin:无；}

a:hover#web_button，a:focus#web_button{background:URL(web_button.pn)norepeat050px；/*50px是让画面上升显示悬停状态*/}/style。