网页设计教程: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 以上教程信息来源:秒秒学网页设计教程