PS设计教程网欢迎你!

Photoshop设计简洁的iphone网站首页布局

文章来源于 图图网,感谢作者 佚名 给我们带来经精彩的文章!
设计教程/PS教程/设计教程2010-07-11
本文介绍一款iphone手机网站的设计过程,网站首页本身布局不复杂,主要针对设计细节的处理,在许多网页设计中这些技巧都能被运用到,希望可以在学习的途中帮到你您。

最终效果图

Photoshop设计简洁的iphone网站首页布局

设计网站前照例先在PS中建立背景图,新建一个1200*1200大小的背景,设置前景色#f3f3f2与背景色#d2d2d2,利用渐变工具中的线条渐变填充背景颜色。设置参照下图

Photoshop设计简洁的iphone网站首页布局

大约完成后顶部渐变梯度在400px左右

Photoshop设计简洁的iphone网站首页布局

为手机网站创建导航条,使用圆角矩形工具,设置如下图

Photoshop设计简洁的iphone网站首页布局

拖出一个圆角矩形条作为导航条背景,由于布局需要,我们的导航条防止网站靠右部分

Photoshop设计简洁的iphone网站首页布局

随后为做出的圆角矩形导航条添加以下图层样式

Photoshop设计简洁的iphone网站首页布局

Photoshop设计简洁的iphone网站首页布局

Photoshop设计简洁的iphone网站首页布局

Photoshop设计简洁的iphone网站首页布局

Photoshop设计简洁的iphone网站首页布局

完成后的效果图如下

Photoshop设计简洁的iphone网站首页布局

版权所有PS设计教程网公安备案:苏公网安备 32058302001023号工信部备案:沪ICP备09005587号
aaa