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

织梦CMS - 轻松建站从此开始！

时间:2010-10-27 21:02来源:网络作者:未知点击: 次

本文介绍一款iphone手机网站的设计过程，网站首页本身布局不复杂，主要针对设计细节的处理，在许多网页设计中这些技巧都能被运用到，希望可以在学习的途中帮到你您。

最终效果图

<a href='/design/photoshop/' target='_blank'>Photoshop</a><a href='/' target='_blank'>设计</a>简洁的iphone网站首页布局

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

<a href='/design/photoshop/' target='_blank'>Photoshop</a>设计简洁的iphone网站首页布局

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

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

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

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

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

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

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

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

完成后的效果图如下

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

(责任编辑：RGB)

顶一下

(1)

100%

踩一下

(0)

------分隔线----------------------------

发表评论

栏目列表

推荐内容

热点内容