网页设计教程:Photoshop CC 网页设计基础
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
网页设计教程:Photoshop CC 网页设计基础网页设计教程:Photoshop CC 网页设计基础
教程简介:
网页设计技术不断的在发展变化,但始终没有遗落Photoshop,设计师们用它来创建UI元素,web图形,搭框架和一些功能性的模块;
通过秒秒学的本教程,我们将会懂得Photoshop在现代网页设计中的工作流程。
首先了解网页设计中的一些核心概念,然后讲解Photoshop中有关网页设计的设置,接着通过一个案例,讲解响应试的设计、网页框架的搭建、网页的艺术化、UI的设计、网页图像的优化到高保真Web页面的组建,最后讲解了拼合图片精灵及一些网页设计软件的介绍,从而开启您的WEB设计大门。
本教程特别适合想从事网页设计、UI设计的初级学员。
目录
第一章:网页设计的几个核心概念
01 理解新网页 | 02 为什么要用PS做网页设计 | 03 关于屏幕尺寸和分辨率
第二章:Photoshop中有关网页设计的设置
01 Web工作区的设置 | 02 网页文件的创建 | 03 网页制作颜色模式 | 04 调整颜色设置 | 05 创建方便前端工程师使用的文件
第三章:响应式网页设计
01 什么是响应式网页设计 | 02 选择合适的断点 | 03 创建响应式网页模版第四章:构建网页框架
01 确认客户需求 | 02 绘制网页草图 | 03 认识网格系统 | 04 开始网页设计 | 05 填充网页内容
第五章:网页的艺术元素
01 网页的颜色搭配 | 02 网页字体的选择 | 03 设置段落和文字格式第六章:网页UI的设计
01 UI简介 | 02 添加UI元素 | 03 将UI元素保存为形状第七章:组建一个Web页面模型
01 应用自定义配色方案 | 02 设计导航栏 | 03 设计输入框 | 04 替换文本
内容 | 05 添加图片 | 06 页面模型的最后优化
第八章:优化网页图像
01 图片与CSS样式的使用 | 02 解读网页图片格式 | 03 优化单张图片 | 04 利用Photoshop生成网页图像资源 | 05 SVG图形的使用第九章:拼合图片精灵
01 认识图片精灵 | 02 建立精灵网格线 | 03 拼合图片 | 04 保存图片精灵
第十章:网页设计软件拓展
01 Photoshop功能:生成CSS代码 | 02 从photoshop中导出HTML文件 | 03 Photoshop 转战 Edge Reflow | 04 使用Edge Reflow进行响应式设计 | 05 使用Muse进行交互设计
教程相关信息
作者
刘琼芳、周莉、湛玥、杨丽、钟轲钰
应用
网页设计
专题
设计基础
难度
入门
软件版本
Photoshop CC 2015 以上教程信息来源:秒秒学网页设计教程。