使用photoshop进行简单App的官网设计(1)
首先我们先建立一个1200*2200的设计稿,我们遵循的也是目前普遍的1200 x 16 grid的栅格化体系。因此我们拖入该栅格psd. 设计网页之前,我们需要有充足的考虑,网页基本结构,网页的内容,网页的素材,并且也要顾虑到网页交给前端工程师的重构可能性。 网页结构 一般情况下我们都会想到网页大概有下面这些因素: 头部,导航 主体内容,bannar,分页 页脚 链接,按钮 图文混排 实际上我们设计网页,在初步搭建的时候我们从整体大的布局出发,比如我们接下来新建几个文件夹,而且文件夹命名要足够的明确,切忌图快,随便命名甚至干脆都是新建文件夹。 开始构思内容 我们设计从头到下,按照顺序去进行内容的设计,我们在Header目录下,新建Nav和Bannar两个文件夹。然后新建两条水平参考线,分别为60px,620px.然后打开bannar目录将素材的classroom.jpg拖入photoshop中。然后我们再调整图层透明度为50%。然后新建一个图层,用选区工具(M),选择620px上的部分,水平拉出一条渐变(左##fc00ff右:#00dbde),将图层透明度调节为80%。 接着我们开始创建导航的一些按钮,在nav目录下,我们创建一个文件夹叫nav-menu 然后再创建一个文件夹nav-item,在该文件夹下用圆角矩形工具创建一个图层形状,高30, 详情 »