ribbon image search rewind fast-forward speech-bubble pie-graph star

使用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,宽90,无需设置背景色,设置2单位长度的边框,白色。(这就是一个简单哪的幽灵按钮)。同理,我们复制文件夹,然后右移动15个单位,写上其他菜单内容,并隐藏图形菜单。

制作简单的ui渲染图

我们打开一个透明的iphone mockup图片,然后将我们自己的ui替换上去即可,比如这样:

将制作好的图片拖入设计稿中,然后按住ctrl+T调节至合适的比例.

接下来我们在图片右侧加入一段文字介绍您的App或者App的一些宣传,记住白色的字体设置大约为40单位,具体情况看您的文本内容多少而定。

后面继续更细吧....

You Can Speak "Hi" to Me in Those Ways