网页界面设计也具有了统一的设计特点，并且兼备了新时代的艺术形式。如图1-5所示为网页界面交互性的体现。图 1-5多维性多维性源于超链接，主要体现在网页设计中对导航的设计上。为了让浏览者在网页上迅速找到所需的信息，设计者必须考虑快捷而完善的导航设计。把所有这些问题归结为一点，即网页设计者无法控制页面在用户端的最终显示效果，但这也正是网页设计的引人之处。......
2023-11-17
Photoshop网页设计命名规范
【摘要】：作为完整的页面往往包含很多个部分，例如Logo、导航、Banner、菜单、主体和版底等，使用Photoshop设计界面时，按照规定的准则命名图层或图层组，不仅有利于快速查找和修改页面效果，还可以大幅提高切图和后期制作的工作效率，如图1-32所示为一款结构完整的网页界面设计。图 1-32下面列举了一些常用的CSS标准化设计命名，在使用Photoshop设计页面时，可以用英文名来命名每个部分。头：he
作为完整的页面往往包含很多个部分，例如Logo、导航、Banner、菜单、主体和版底等，使用Photoshop设计界面时，按照规定的准则命名图层或图层组，不仅有利于快速查找和修改页面效果，还可以大幅提高切图和后期制作的工作效率，如图1-32所示为一款结构完整的网页界面设计。
图 1-32
下面列举了一些常用的CSS标准化设计命名，在使用Photoshop设计页面时，可以用英文名来命名每个部分。
头：header 标志：logo
内容：content/container 广告：banner
尾：footer 页面主体：main
导航：nav 热点：hot
侧栏：sidebar 新闻：news
栏目：column 下载：download
页面外围控制整体布局宽度：wrapper 子导航：subnav
左右中：left right center 菜单：menu(www.chuimin.cn)
登录条：loginbar 子菜单：submenu
搜索：search 小技巧：tips
友情链接：friendlink 栏目标题：title
页脚：footer 加入：joinus
版权：copyright 指南：guild
滚动：scroll 服务：service
内容：content 注册：register
标签页：tab 状态：status
文章列表：list 投票：vote
提示信息：msg 合作伙伴：partner
有关Photoshop网站UI设计的文章
- 详细阅读
-
Photoshop制作网页界面分类详细阅读
网页界面根据具体内容和风格的不同，大致可以分为三大类型：环境性界面、情感性界面和功能性界面。如图1-2所示为两款环境性网页界面。网页界面设计也会受到社会环境和主流文化的直接影响，网站页面的风格、版式和内容只有在顺应社会主流文化和符合大众需求的情况下才能被接受。一款优秀的功能性网页界面应该能使浏览者快速了解该网页最终的目的或产品信息，并能根据需求快速检索到需要的信息，如图1-4所示。......
2023-11-17
-
实例：Photoshop制作网页广告插图详细阅读
本实例主要为用户详细讲解自由变换在网页设计中的应用，此款界面以红色作为主色调，搭配黄色作为辅色，整体界面以喜庆祥和为主题，使浏览者感受到浓浓的节日氛围。单击工具箱中的“矩形工具”按钮，在画布中绘制任意颜色的正方形，如图2-88所示。将素材拖动到设计文档中，执行“编辑＞自由变换”命令，将图像缩放到合适大小，如图2-92所示。......
2023-11-17
-
Photoshop教程：制作网页UI图标详细阅读
本实例制作的是一款网页小图标，整个图标以白色作为主色调，辅色用到了深蓝色和淡蓝色两种，同时搭配了阴影的效果，为图标增加了质感。图 2-21图 2-2202 单击工具箱中的“椭圆工具”按钮，在画布中绘制任意颜色的圆形，如图2-23所示。按住Shift+Alt快捷键的同时，拖动鼠标可以绘制正圆形。最后选择“投影”选项，设置如图2-26所示的参数。图 2-35图 2-3609 使用相同方法完成相似内容的制作，图像效果如图2-37所示。建议在存储时保存PSD格式，以方便日后进行修改。......
2023-11-17
-
基于HTML与CSS网页设计中的XHTML规详细阅读
如前所述，XHTML 是HTML 的替代者，它是从HTML 继承而来，但使用了XML 的规则进行严格规范。XHTML 与传统的HTML 的不同之处，主要来自于XML 语法规范的格式要求，即要求“格式良好”。这些要求统称为XHTML 文档的有效性。万维网联盟为XHTML 制定了3种DTD，分别适用于不同场景。过渡的：要求非常宽松的DTD，允许继续使用HTML4.01 的标签和属性，但要求格式良好。为确保XHTML 文档是有效的，应在文档第一行添加DOCTYPE即文档类型声明。DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">严格的：
2023-10-19
-
教你如何用Photoshop制作网页插图详细阅读
本实例主要帮助用户加深巩固拷贝和粘贴图片，这款界面以蓝色为主色调，辅色运用了红色，整体采用了笔刷的效果，界面整体给人以轻快明朗的感觉。单击工具箱中的“矩形工具”按钮，在画布中绘制任意颜色的矩形，如图2-63所示。执行“编辑＞拷贝”命令，拷贝选区，如图2-65所示。按快捷键Ctrl+T对图片进行适当缩小并适当调整位置，图像效果如图2-67所示。使用相同方法完成其他内容的制作，如图2-69所示。......
2023-11-17
-
Photoshop网页展板示例及选择性粘贴应详细阅读
本实例主要帮助用户了解选择性粘贴在网页设计中的应用，这款界面以红色为主色，辅色用到了白色和绿色，整体简约却不简单，展板采用了多个长方形重叠的效果，使浏览者的侧重点放在展板上。单击工具箱中的“椭圆选框工具”按钮，在画布中绘制圆形选区，如图2-71所示。图 2-70图 2-71提示使用“椭圆选框工具”创建选区时，按住Shift键的同时拖动鼠标左键，即可在画布中绘制正圆形选区。......
2023-11-17
-
Photoshop网站UI设计实例详细阅读
在使用Photoshop之前，需要首先在计算机上安装该软件。本书中所有实例均是使用Photoshop CC 2018制作的。找到Photoshop CC最新版本，鼠标单击“试用”按钮，进行软件下载。当下载的软件解压完成后，Adobe Creative Cloud会继续帮助用户安装Pho-toshop CC软件，如图2-4所示。Photoshop CC会自动在Windows开始菜单中添加一个快捷方式，如图2-6所示。图 2-5图 2-604 单击“开始”按钮，选择“所有程序＞Adobe Photoshop CC 2018”选项，如图2-7所示。弹出Photoshop CC启动界面，如图2-8所示。......
2023-11-17
相关推荐