Photoshop设计网站后台首页

开发工具与关键技术：使用Photoshop设计网站后台
作者：成东平
撰写时间：2019年5月13日

Photoshop设计一个后台网站，首先定位该后台网站是什么类型的后台网站，规划板块、与内容。本人设计的是一个购物网站的后台，针对的是购物网站的卖家的一个后台，该网站能让卖家快速查看商品信息与经济状况和订单信息。

这是本人设计的网站后台的首页，左边的一栏的背景本人使用了一个颜色与网站后台相似的一张图片的一部分，在左上角是个人使用的账号头像与名称，在头像的下方是一个注消健，点击之后会退出该账号，会来到一个登录页面，登录页面可点击右下角注册跳转注册页面。
下方就是后台网站的主要内容与页面“使用、商品信息、资金信息、销量信息”中间的“隔离线”看起来有一种“凹”的感觉，方法：用矩形工具绘制一个宽与该部分的背景相对齐的长方形高绘制一个与整体画板比较“融洽”的高度（本人使用的是3px），然后选中长方形的图层然后摁住ctrl点击图层的左边该图层转化为蚂蚁线，然后使用吸管工具（快捷键I）吸取此部分比较的颜色然后将颜色深度调高添加上调整好的颜色（alt+backpace）然后在长方形的下方用矩形工具绘制一个比蓝色长方形小2px的长方形，转化为蚂蚁线添加灰色颜色灰色的颜色值为8d8d8d然后再在灰色长方形的下方再使用矩形工具绘制一个比灰色长方形大1px的长方形添加上颜色6个F然后合并这三个长方形的图层（快捷键ctrl+e），然后再在当前页面的选择栏添加一个与该部分同样大小的长方形出来如上图首页信息部分一样，然后将添加的长方形转换为蚂蚁线，然后加上颜色，颜色值为6个3然后把该图层的透明度改为40%。

头像部分选择一个自己喜欢的图片导入该页面中用圆形工具绘制一个在整个页面中看起来还算舒服的大小将导入的图片内容与其对齐然后将绘制的圆转化为蚂蚁线然后删除图层，再选择导入图片的图层ctrl+j，再使用字体工具打出字体（使用字体大小都为双数）
接下来后台网站首页的顶部绘制一个在自己创建板块中合适的大小然后添加字体颜色，顶部过于空淡，在右边添加两个信息，然后在字体的右上角加上收到的信息有几条加上一个显示。接下来将背景图层添加颜色e5e5e5，然后用矩形工具绘制一个矩形，尽量将四边的空间缩小，然后再使用矩形工具围着上一个矩形绘制然后添加描边，描边像素为1px颜色为999999。然后在矩形内添加内容，根据网站与操作者来添加该后台网站首页的内容以便更好的操作，本人在此部分的上方部分添加了三个内容分别是销量排行、订单、资金报表，这三个容纳放制在首页有便操作者查询信息，如销量排行点击首页展示内容栏将跳转到整个购物网站与该客户销售同样商品的排行榜，可查看全网排名。订单可直接查看某日到某日的销量与销售金额。资金管理报表可查看从开店以来的所有资金状况如某月进货金额，某月优惠价折扣金额。

在每一个的页面的左上方都有一个日期栏与符合该页面的搜索框与一个查询健输入日期与内容后点击查询健即可查看相关内容。