简单的登陆页面PSD设计稿来演示转化为HTML页面的全部过程,PSD设计图如下:
实现步骤如下:
1、分析PSD设计稿,思考页面整体大致结构和如何切割图片
根据PSD设计稿,可以看出登录页包括背景图和登陆框,其中登录框包括登录图标、输入框和登陆按钮。因此整体html结构即为一个div和其多个子元素div,子元素div用于添加输入框和按钮等;同时可以把设计稿分割成背景图、登录框背景图和登录按钮。
2、创建项目,编写整体结构HTML代码和整体CSS
使用前端开发工具或文本编辑器创建项目,项目名称login,包括css和img文件夹、index.html,其中css文件夹下包括login.css文件;ima用于存储切割的图片。现在在index.html文件中编写整体结构html代码,index.html代码如下:
3、切割相应的图片,并导出。
PSD文件包含很多层,我们要把这些层或合并的层组切出来,然后添加到网页上,使用CSS进行布局,使页面效果达到设计稿的效果。
①切割背景图
首先使用PS打开PSD设计稿,隐藏除“bg和bg_texture”以外的所有图层,如下图所示:
然后使用“切片选择工具”选择背景图,点击“文件/存储为Web所用格式”或使用快捷键(ALT +shift+Ctrl + S),并选择图片保存格式、大小等信息,把背景图保存为文件名background.jpg。
最后把background.jpg导入img文件夹。
②切割登录框背景图
返回PS,隐藏除“loginbtn”以外的所有图层,如下图所示:
接着新建参考线,包围登录框背景图区域;然后使用切片工具,移动鼠标选中图片区域,并把图片存储为Web所用格式,图片名称为longinbg.png。这时一定要注意:图片预设格式要为PNG,因为该图片背景要透明,如果使用JPG格式,背景色为白色,实现不了想要的效果。
最后把longinbg.png导入img文件夹。
③切割登陆按钮
返回PS,隐藏除“loginelem和loginbg”以外的所有图层,如下图所示:
接着新建参考线,包围登陆按钮;然后使用切片工具,移动鼠标选中图片区域,并把图片存储为Web所用格式,图片名称为btnlogin.png。这时一定要注意:图片预设格式要为PNG,因为该图片背景要透明,如果使用JPG格式,背景色为白色,实现不了想要的效果。
最后把btnlogin.png导入img文件夹。
4、完善整体结构HTML代码和添加CSS样式
①给body添加背景图,并使其填充页面,CSS代码如下:
②给id为“#login”的div布局并添加背景图,CSS代码如下:
③给class为"line"的div布局,使在其中的输入框正确显示,CSS代码如下:
④在class为“line”的div中分别添加用户名、密码和验证码输入框的HTML代码,并使用CSS布局,使其和设计稿效果一致。
添加的HTML代码如下:
CSS代码如下:
④在class为“line”的div中分别添加登录按钮的HTML代码,并使用CSS布局,使其和设计稿效果一致。
HTML代码
CSS代码
5、不断调试,调整细节,达到设计稿效果
最终效果图如下: