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

2021-11-10 0 953

最终效果图

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网站首页布局

在导航条里使用#676767颜色做为超链接文字色,首个文字链接用白色即可

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

之后我们为第一个导航文字增加一个圆角矩形背景图,画一个圆角矩形,按下图添加图层样式,确保整个圆角矩形是放在第一个链接文字图层的下面

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

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

创建网站标志LOGO,由于这是手机网站模板教程,所以标志不需要具体设计,只要制作出一段文字,加上一些下图中的图层样式即可

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

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

完成后的网站标志

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

接下来制作iphone手机图片

为了让iphone手机感觉更立体,我们扣出图片后为其底部加上椭圆矩形,进行模糊处理,看似一个底座,效果图如下

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

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

将tutu001.com上下载的背面iphone图片缩小后与之前的图片进行合成

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

既然是iphone手机网站,那么我们尽量会用一些与iphone有关的设计素材,比如选用iphone手机菜单图标来装饰网站标题

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

每个图标边上都加上标题与文字

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

iphone提供AppStore商店,所以我们在网站添加一个链接到AppStore的链接按钮。

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

先如上做个椭圆矩形作为按钮背景,再添加图层样式

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

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

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

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

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

完成后的按钮背景效果

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

再为按钮背景上加斜线效果,先做个25px的矩形大小文件,用铅笔工具绘制成如下的斜线效果,可以先放大到最大,然后按照下图绘制

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

保存图案,编辑>自定义图案。随后将图案设置成前景色

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

用前景色填充按钮背景,设置不透明度为1%,这样可以看到按钮背景上出现了隐约的斜线

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

在按钮上加上iphone图标与文字,为其加上下面的图层样式

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

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

完成后的按钮

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

接着创建APPSTORE的内容部分,首先添加标题文字,为其加上图层样式

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

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

在标题边上加上1px的细线进行内容分割,制作方法是画两条1px的线,分别使用黑色与白色,然后降低透明度即可

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

为内容部分加上文字与图标

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

创建页脚线条,做法与上面相同,使用两条1px细线,唯一区别是左右区域进行隐藏,可以蒙版来实现

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

最后完成的效果图

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

进入论坛参与讨论和交作业:https://xunluyun.com/viewthread.php?tid=467699

1、本站所有言论和图片纯属会员个人意见,与本论坛立场无关 2、其他单位或个人使用、转载或引用本文时必须同时征得该帖子作者和PS工具网的同意 3、请支持我们PS工具网XUNLUYUN.COM 4、本帖部分内容转载自其它媒体,但并不代表本站赞同其观点和对其真实性负责 5、如本帖侵犯到任何版权问题,请立即告知本站,本站将及时予与删除并致以最深的歉意 6、photoshop工具官网管理员和版主有权不事先通知发贴者而删除本文

photoshop官网 ps教程 Photoshop设计简洁的iphone网站首页布局 https://xunluyun.com/3897.html

常见问题

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务