Photoshop网页设计说明书

《Photoshop网页设计说明书》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、1Photoshop网页设计——2013年省赛培训2Photoshop网页设计1、为什么要使用ps设计网页2、如何使用ps设计网页3、切图——通向DW的道路4、如何评价网页设计3Photoshop网页设计1、为什么要使用photoshop设计网页便于审阅效果图易修改4Photoshop网页设计2.1、排版——网页布局2.2、配色2.5、网页设计实例分析2.5、网页中图片格式2、如何使用photoshop设计网页2.3、网页设计的注意事项52.1.1、网页的布局设计流程按照一定的规律把网页中图像和文字等页面元素排列到最佳的位置，也可以称为网页

2、排版分割、组织和传达信息，并且使网页容易阅读，使界面具有亲和力和可用性是网页设计师的责任。确定版面率页面整体布局页面局部布局网页布局的流程图6确定版面率网页的版面率是图片和文字在浏览器中所占的比率，也就是网页中留白区域的面积。留白区域面积少会使页面局促、紧凑；留白区域多，会使页面自由、大气78还要确定网页中文字和图像的面积比率，这关系到版面产生的生动性、记忆性和阅读性图像多增强阅读活力，反之，则会减少阅读兴趣文字比例太低则会削弱沟通力和亲和力，阅读兴趣也会随之减弱91011“网格设计”确定版面率页面整体布局页面局部布局12网站标志万客会刊网

3、站广告新闻中心版权信息趣味空间广告广告万科楼盘会员登录导航132.1.2、常见的网页布局结构1．“国字”型布局“国”字型布局由“同”字型布局进化而来，因布局结构与汉字“国”相似而得名。特点：结构清晰、主次分明142.1.2、常见的网页布局结构2．T型布局T型布局结构因与英文大写字母T相似而得名。也称为“厂字型”。特点：结构具有变化性，相对显得活泼。152.1.2、常见的网页布局结构3．标题正文型标题正文型布局的布局结构一般用于显示文章页面、新闻页面和一些注册页面等。162.1.2、常见的网页布局结构4．左右框架型布局左右框架型布局结构是一些

4、大型论坛和企业经常使用的一种布局结构。17182.1.2、常见的网页布局结构5．上下框架型上下框架型布局与前面的左右框架型布局类似。其区别仅在于是一种上下分为两页的框架。192.1.2、常见的网页布局结构6.综合框架型综合框架型布局是结合左右框架型布局和上下框架型布局的页面布局技术202.1.2、常见的网页布局结构7．POP布局POP布局是一种颇具艺术感和时尚感的网页布局方式。页面设计通常以一张精美的海报画面为布局的主体。2122Pop——全景式布局（用趣味性吸引浏览者）将小图像间隔地排列，视线无论从哪个角度都可以进入页面，从而给人以开放的

5、轻松气氛2324页面中均一排列着多幅小图像，给人开放。轻松的感受，容易吸引浏览者，25页面中的图像过少，则看起来不像是全景式布局26页面中的图像过大，给人迟钝和沉重的感受272829Pop——卫星式布局（以太阳为中心的卫星环绕型）布局特点是中间有一个太阳，各个卫星以全景布局展开，让浏览者沉浸在可以自由参与的开发感之中。太阳带来坚定不移的安定感和卫星带来的开放感并存。303132卫星式布局包括以下几种类型：以太阳为中心，小卫星均匀散开3334以太阳为中心的不同散开形式35太阳不在页面的中心，卫星在周围排列36Pop——照片组合式布局（新世界以

6、全景式自由的展现出来）多张照片经过组合，产生新的情趣，显现出全景式的效果。3738392.1常见的网页布局结构8．FLASH布局FLASH布局是指网页页面以一个或多个Flash作为页面主体的布局方式。在这种布局中，大部分甚至整个页面都是Flash。402.2网页设计配色色彩是您的网站的最重要的一个部分彩色系的颜色具有三个基本属性：色相、彩度、明度。412.2网页设计配色422.2网页设计配色三原色RGB红黄蓝432.2网页设计配色60°120°180°类似色对比色互补色十二色相442.2网页设计配色色调：黑白灰黑白灰渐变452.2网页设计配

7、色色相明度渐变4647482.2网页设计配色加入黑色的纯度变化和加入白色的纯度变化49502.2网页设计配色512.2网页设计配色以上是一个传统的类似色配色方案，虽然它的视觉感染力很强，但是对于设计一个让人印象深刻的网站来说，颜色的对比度不够强。522.2网页设计配色以上案例和前面的有着相同色相的配色方案，但是色度上的调整体现出多样性。它适合用于有个性主题的网站设计。532.2网页设计配色具有广范围色度的互补配色方案。这种配色方案最基本的形式是仅由两种颜色构成，但是可以很容易通过色调，浅色和阴影色的形式扩展。但从严格意义上来说，互补色看起来

8、很刺眼。因此最好通过在它们之间留白。这种配色方案更适用于个性主题的网站设计。542.2网页设计配色原始配色方案亮色柔和色中性色调色板552.3网页设计的注意事项页面的宽度和高度页