466被浏览38,874分享邀请回答1768 条评论分享收藏感谢收起94 条评论分享收藏感谢收起5,976被浏览301,212分享邀请回答coliss.com/
日本知名网页设计技巧网站10. 网页设计师必备？暂时分享这几个，还有太多网站，浏览器书签整理不过来，请持续关注。36140 条评论分享收藏感谢收起zcool.com.cn/）。国内设计师互动交流平台，提高审美，发现好的设计！2. Dribble（）。全球人气最高的设计交流平台。3. Behance（）。Adobe旗下，设计师作品欣赏交流平台。4. 中国平面设计网（）。为设计师提供有效的传播和服务。5. 视觉中国设计师社区（）。设计作品分享、发现、售卖的专业平台。三、素材网站1.综合类素材——大而齐全， 无所不能。zool搜素材——站酷旗下品牌：千图网——专注免费素材网站：我图网——专注正版设计作品交易：昵图网——共享创造价值：2.PNG免扣素材——省去了不少时间啊！觅元素：千库网：Pngimg：（国外的网站，偶尔打不开）3.图标icon素材——总有一枚icon是你正在寻找的！阿里巴巴图标库：IconArchive：ICONFINDER：Easyicon：Findicons：4.摄影图片素材——高清无码，颜值担当。500px：（截图↑↑↑）Pixbay：摄影图网：视觉中国：（是收费的，质量自然上乘。）建议大家打开各个网站，去浏览一番，以熟悉一二，加强记忆，方便日后选用。36314 条评论分享收藏感谢收起PhotoshopCS视频教程
授课讲师：
李雨阳 老师
软件版本：
PhotoshopCS
教程程度：
所需基础：
电脑基本知识
交流提问：
适合人群：
平面设计人员
相关素材：
课程光盘：
7675678 5899432 5558071 4458618 4684059 3331771 4010989 3417674 3640297 3675009 612920 4132789 2880589 2520258 2397589 2122493 2474442 2187573 2004584 1908818 2194207 1989608 509129 2928773 2171900 2299493 2126065 2696971
论坛最新主题
您可能感兴趣的课程
从基础学习名片，宣传单张，网站，海报，画册，户外广告,包装等等。
作为图形设计软件的代表，以其杰出和革新的特性赢得了用户的赞赏。
AI各种形状、颜色、复杂效果和丰富的排版 ，可自由传达创作理念。
适合专业摄影师输入、选择、修改和展示大量的数字图像的高效率软件。
平面设计常用知识
赞助商链接
兴趣圈成员优秀设计联盟-SDC-优设网-设计师交流学习平台-听讲座，聊设计，找素材，尽在优设网
下一篇 继续涨姿势
阅读本文需 15 分钟
你是否曾经想过设计一个漂亮的网页，但是却不知道怎样入手？说实话，几年前我也是这样。当我浏览网页的时候我看到这么多好看的网页，我就希望自己有技术创作这样的设计作品。
今天我可以这么做了，而且我将教你怎么做这样的设计！从根本上，对于这种设计你需要一点photoshop的操作技能和观察细节的能力。通过以下的教程，我将会指出其中极细微的细节之处，而这些细节讲使你的网页设计漂亮起来。打开photoshop，我们开始啦！
此文为网页设计的经典教程，早期的很多网页设计教程书刊都有摘录本篇文章。特此分享给想通过PS制作网页的新手朋友们：）
先看效果图
第一步 — 下载960网格模板
我一直以来做的设计几乎全部是基于960网格模板的. 因此在我们开始创作之前，先下载这个模板. 你能在上找到这些模板. 下载之后解压zip里面关于PSD的模板. 你会发现有两种规格: 一个是12栏式的而另一个是16栏式的. 他们的区别就像名字所说的，一个是按12栏分布一个按16栏. 更详细的介绍一下吧, 如果你的设计里面分3个区块你就选择12栏式的,那是因为12能被3整除; 同理假如你的设计分四个区块, 你可以选12栏式或者16栏式，那时因为12和16都可以被4整除. 你会发现这个技巧将用于下面教程.
第二步 — 构造你想象的结构
在我们打开PSD网格模板创作前, 我们首先需要先构造一下想象中的结构. 从上面的这张图，你可以看出来：因为在一个排版中又有排版，所以这是一个有点复杂的结构.
构造了结构之后我们继续. 打开16栏式的PSD模板文件. 打开 “图像 &画布大小” . 把画布的宽度设置为 1200px 高度设置为 1700px .把背景色设置为 #ffffff 既白色.
用长方形工具在顶部画一个宽100%高大概80px的长方形. 用颜色： #dddddd 填充它.
在长方形那层上面创建一个新层. 按住CRTL键鼠标点击长方形层. 长方形就被选中了，然后把目标移至刚建的新层上. 选择半径 600px 的软笔刷（如图）, 把其颜色设置为白色, 然后就像图片所示那样在选框上边缘点几下. 通过这个技巧你画出了一个微妙的照亮效果. 你现在可以把这两层联合起来了.
建一个新层，再用长方形工具如图所示在上端画一个深灰色的小长方形.
在距离上端长方形500px处开始画一个宽 100% 高 575px 的长方形. 设置其由 #d2d2d0到 #ffffff 的渐变色, 角度为-90,缩放为100%
现在我们如第五步那样添加照亮效果. 这个技巧我们将很频繁地使用;因此下次用到的时候我只提示是第五步的效果 .
在当前层之上简历一个新层. Ctrl+鼠标点击这个大的长方形. 选择 600px的软笔刷, 设置颜色为白色，如图所示对选区的边缘点击多下.
创建一个新层画一个400px高的长方形. 这是用作我们网页页头的. 给它设置一个线性渐变，由颜色 #2787b7 to #258fcd.
以下展示颜色的微妙变化：
在页首长方形块底端画一条1px的灰蓝色的线, 混合属性中添加阴影效果. 阴影参数: 正底叠加, 透明度: 65%, 方向: -90, 距离: 1px ， 宽度: 6px. 之后再建一个新层，在灰蓝色线下面画一条1px的白线.通过这种方式，我们就可以创建一个轮廓鲜明的边缘. 可以说在你的设计中，你可以把这个技巧用于其他色块.
创建一个新层,在画布顶端用”长方形”工具化一个50px高的长方形,就如图所示，这个长方形是用作导航的.
为其添加阴影效果.参数如图所示.
开始话导航啦.使用”圆角工具” ，设置半径为5px,画一个圆角长方形，用颜色 #f6a836 填充它, 之后给他添加以下效果:
1.内阴影- 颜色: #ffffff, 混合模式:正底叠加, 透明度: 60%, 角度: 120*, 距离: 7px, 大小: 6px.
2.内发光 – 混合模式: 正常, 颜色: #ffffff, 大小: 4px. 其他参数默认设置.
3.描边 – 大小: 1px, 位置: 内部, 颜色: #ce7e01.
Ctrl+鼠标点击层产生如图选区. 选择： 选择-& 修改 & 收缩 然后在弹出框中输入1px，确定.
在上面再建一层, 把混合模式设置成叠加 ,然后好像第五步那样加照亮效果,不过这次用的是小笔刷 . 然后就是增加导航文字了.我用 Arial 字体作为导航的连接字体, 所有效果设置为 “无”.
现在我们开始创建搜索框, 圆角长方形，半径5px,在如第四步所示的网格的右边、顶端灰色背景网格纹中间创建一个用于搜索的色块. 为它增加以下样式:
内阴影 – 颜色: #000000,混合模式: 正片叠加, 透明度: 9%, 角度: 90*,距离: 0px, 大小: 6px
描边 – 大小: 1px, 位置:内部, 颜色: #dfdfdf.
给它添加”search”的文本和一个亮底暗色的”GO”按钮.如下图所示：
到目前为止已经创建了很多层了，为了条例清楚，我们建立一个叫”search”的层文件夹. 把所有于搜索相关的层一并拖到这个层文件夹里面去. 迟点，我们都会这样处理，可以让我们的创作更合理.
新建一个新层，然后就像画”搜索框”一样在这层上面画一个”Sign Up”按钮（字长刚好为背景长的一半）. 把这个组合放在搜索框下方条纹竖直方向中间.
再一次如第五步那样创建亮光效果.
使用更小的软笔刷.这次的笔触大小为45px.
加了logo和网站描述之后，我们的网页就如上所示.
现在我们回到层结构那里提早做一些工作.创建一个空的层文件夹并命名为”top_bar” .移动所有的图层到这个文件夹里面（包括logo,条纹,搜索框,注册按钮，导航和背景）.
创建另外一个空层文件夹并命名为”header”.这里用于放置头部图层 .如上图所示
头部看起来有的平淡，因此我们可以再任意位置加相同的亮光效果. 选中蓝色的头部区域.在它上面创建一个新层并设置其混合样式为 叠加.
选一个大点的600px软笔刷,颜色为#ffffff白色。然后再导航下方点击几次。假如想更有层次感，你还可以把颜色调为黑色，然后在头部区底部重复同样操作。
在这一步我介绍一下我是怎么实现头部图片的反光效果的。选择两张图片，我用了我自己另外做的两个网页模板图片，缩放其中一个然后把他放在比较大的那个的下方。复制这两层，用自由变换工具按住shift键等比例缩放一下，用长方形工具在上层的图片下端外部画一个选区，到选择-&修改-&羽化，填入30px或者大点羽化一下选框。（这里原教程说得不大清楚，我实现的方法是这样的：羽化之后选择反选，然后选取画笔工具，选白色，再在图片的左边角和右下角点击数下，然后用长方形选框和delete键修整边缘）
为了让两个图片更加突出，可以新建一层，设置该层模式为叠加，重复第五步的效果添加的操作。
在添加了一些按钮和漂亮的条纹之后，头部区域就是像上面那样子的。不要方剂把图层都放在’header’层文件夹里面。
最终效果图里面你会看到在内容区域里面有很漂亮的切换页。为了创建这种切换页我们需要实现额外的一些操作，这是很有必要的。首先用圆角长方形工具创建一个高70px圆角半径为10px的图形（注意要画路径图），现在我们不要底部圆角的部分而为它郑家一个更好的角效果。用直接选取工具单击这个图形的路径，单击垂直点然后按住shift键往下拉直到如图所示状态.现在看起来不错了，但是还是比较简陋。然后…(把圆角变直角！？？？我汗，那还不如直接画个直角的长方形？)
如图创建了一个比较好的角（我汗）
选择直线工具，设置大小为1px
第二十一步
按住shift键画灰色的分割线。
第二十二步
为每个切换标题添加小图标。我用了来自WebAppers.com的图标。通常一个切换标题激活了其他的就处于非激活状态了。为了清楚表达这一点，我们需要想个办法完成它。我降低其他图标的饱和度并且降低标题字眼和描述文字的透明度一保证激活的标题处于高亮状态。
第二十三部
为了使激活的按钮更加明显，我们将给它添加一个时尚的背景。为了达到这样的效果我们把整个对象选中然后裁切选区（按住alt画选区即可把不要的选区去掉）最终使选中的范围只有第一个按钮。
如上图所示即为所要达到的选区。
用一个更小的软笔刷，画出一个白色背景。
第二十四步
增加一个阴影：在切换菜单的后面如上图所示画一个深灰色的长方形。
点击图层区底部的小图标给该层增加一个蒙版。
把前景色设置为黑色，选一个大的软笔刷，在蒙版层上面点击（如图所示，蒙板上面出了白色之外的颜色都会遮挡图层）使部分黑色去掉。结果，我们创建了一个比较好看的阴影效果。
最后我们加点细节。在切换菜单下方画一个1px的灰线。然后如上一步一样用蒙版的方式使左右两端渐变。现在我们就得到一条比较时尚好看的线了。
现在切换菜单就像这样。
第二十五步
现在开始设计第一个切换按钮的内容。我们需要一个精准设计的图像（有好看的标题和一些文字内容）。首先我们得创建这个精准的图片。这里我认为我们最好打破这个图片尖锐的棱角设计，从而创造一个多彩的效果。因此我现在画一个白色有1像素灰色边框的长方形，再给它加上细微的阴影效果。
复制这一层并用变形工具稍微旋转。重复这个操作几次
把你选好的图片导进来，放在白色长方形上面。不用担心图片会溢出，我们会修整它。选中最上层的长方形，按选择-&修改-&收缩 ，输入5px,确认，然后在图层管理区下方点击添加图层蒙版，这样图片就只显示选区范围。
这就是你现在图层的状态。
第二十六步
不要忘记整理图层，这里新建图层夹把图层归类。
增加一个漂亮的标题、一些文本和列表，我们的设计工作又完成一部分。现在继续下一步吧。
再组织一下图层。
第二十七步: 感谢信
我认为这一个部分要比较大的，因此我把范围限定在主区域上的一个大的盒子里面。首先创建一个大的淡灰色的大概高220像素的长方形。设置其有1像素的灰色边。
然后再画一个上下左右都比它小10像素的另一个长方形。同样设置其1像素的淡灰色边框。
最后写上文本就可以了。
第二十八步
终于要做页脚啦。画一个400像素高的、深黑色的长方形。
第二十九步
如第五步一样给它加亮光效果。
下来，如图所示，在区域上方画一个10像素高的长方形，并且通过在顶端和底部各多加两条线增强细节处理。
第三十一步
创建低端部分用于放置重复的导航。你可以拷贝顶端放置导航的长方形，移动并变形使其40像素高。把它放到你画布的最低端。你要注意你可能要扩张你的画布使所有东西都有适合的位置。制约扩张画布的操作你可以这样：图像-&画布大小 设置即可。
第三十二步
再次强化细节。给页脚的导航区顶端加一条白色边，这样有比较好的边框效果。
第三十三步
给页脚增加内容，你可以依据网格合理安置它们。
第三十四步
然后就是把页脚相关的图层整合起来。
做到这里，我们的设计就完成了。（这里做的设计作者改了一下之后放在ThemeForest.net上卖了）
我希望你喜欢本教程并且从中或多或少学到点知识。现在是你创作的时候了。记住，只要你注重于细节，你就会创造出漂亮的网页设计，尽管你photoshop只会那么两三个工具。现在你有设计的冲动没？
译文来源：
原文来自：
================关于优设网================
“优设网“是一个分享网页设计、无线端设计以及PS教程的干货网站。
【特色推荐】
设计讲座：定期邀请国内互联网公司的设计前辈及行业总监在群内及YY语音（YY频道：）分享实战经验。
设计微博：拥有粉丝量26万的人气微博 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗？
添加 优秀网页设计 微信号：【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加：
20个有创意的联系页面及表单设计欣赏
又是一个愉悦的周一。今天我们来聊聊“联系我们”的页面设计。它可是网页设计中的最佳男配角了。虽然说通常只有一个页面。但是他在老板的眼...
编者按：新手看完这篇完全可以入门LOGO设计了。今天Summer同学将工作中的一个LOGO设计思路分享出来，过程循序渐进，关于需求和找灵感部分说得超级赞，借...编者按：霓虹字效是经典款教程，从很久之前到现在都没过时，非常值得学起来。今天@AverageJoseph 给同学们一个特别容易上手的方法，帮大家迅速掌握这类...编者按：这部电影特别火，很多同学都特别喜欢这个萌萌哒大白同学，今天@JingDesign 来一篇应景的教程，手把手教同学们用Sketch绘制大白形象。想换个...编者按：鉴于很多同学没时间练习长教程，看到好教程马克过就忘了。优设特意推出一个短教程专题，10分钟保证学会，操作简单，都是精简过的高手技巧，关键是效果不含糊...编者按：今天这枚字体效果，有一个迅速提升字体效果的技巧，前后视觉大不同，另附曲线工具的强大用法，力求让同学们不仅学会某种效果的绘制，更能举一反三，掌握捕鱼之...编者按：C4D 越来越欢迎，今天来个高手白无常老师的教程，帮你快速做出一个流动的线条，附上源文件供大家下载学习。 源文件：http://pan.baidu....炎热的夏天来一杯新鲜的柠檬水清凉一下！ 今天的教程你会学到超多实用的基础操作技巧和图形绘制方法，教程几乎每个步骤都有快捷键提示，新手拿来熟悉PS再合适不过。...编者按：今天的AI教程比较考验大家的耐心，但是绘制一套完整的图标和一个图标的收获绝对大不一样，这篇教程提到很多AI的实用技巧，设置图标的齿轮怎么画才方便？活...@P大点S微博 ：今天，我们带来一个卡通巧克力字体特效，操作上并不复杂，重点是一些图层样式的应用。已经有同学交作业了，你也来试试。 做的时候是用的CC 20...
我们的团队
大家在关注
一扫"掌"握！
把好文章收藏到微信
打开微信，扫码分享学设计 优设网 在这里