Photoshop网页设计教程:ipad风格网页制作设计教程

2016-03-19 01:55 48 1 收藏

下面,图老师小编带您去了解一下Photoshop网页设计教程:ipad风格网页制作设计教程,生活就是不断的发现新事物,get新技能~

【 tulaoshi.com - PS 】

最终效果图

Photoshop设计教程:ipad主题网页制作教程,图老师

ipad电脑图片

Photoshop设计教程:ipad主题网页制作教程,图老师

Photoshop设计教程:ipad主题网页制作教程,图老师

#3a3a3a,#111111。以增加背景的层次感。

Photoshop设计教程:ipad主题网页制作教程,图老师

Photoshop设计教程:ipad主题网页制作教程,图老师

Photoshop设计教程:ipad主题网页制作教程,图老师

新建图层,用矩形工具拉出一个矩形框,使用渐变来填充矩形框。

Photoshop设计教程:ipad主题网页制作教程,图老师

Photoshop设计教程:ipad主题网页制作教程,图老师

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

用矩形选择工具选中ipad显示屏区域,添加一些好看的图片进去

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

Photoshop设计教程:ipad主题网页制作教程,图老师

Photoshop设计教程:ipad主题网页制作教程,图老师

文本区域看起来很单调,最好的方法是加入一些按钮与图标等,这里先加入以个圆角矩形按钮

Photoshop设计教程:ipad主题网页制作教程,图老师

加入一些图标

Photoshop设计教程:ipad主题网页制作教程,图老师

同样的方法在ipad功能说明去添加其他矩形文字区块

Photoshop设计教程:ipad主题网页制作教程,图老师

在功能区域最右下方加入一个下载按钮,按钮制作方法很简单,图层样式如下图。

Photoshop设计教程:ipad主题网页制作教程,图老师

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

之后在功能区域下方加入文本内容区域,这里使用矩形工具先建立一个颜色偏黑的背景区块。

Photoshop设计教程:ipad主题网页制作教程,图老师

Photoshop设计教程:ipad主题网页制作教程,图老师

在文本右边加入一些图片案例,这里使用网格来对其图片

Photoshop设计教程:ipad主题网页制作教程,图老师

Photoshop设计教程:ipad主题网页制作教程,图老师

继续添加新的资源区块。

Photoshop设计教程:ipad主题网页制作教程,图老师

Photoshop设计教程:ipad主题网页制作教程,图老师

这里将ipad图片放置在两个资源区之间,可以起到承上启下作用,同时让网站看上去更有整体感

Photoshop设计教程:ipad主题网页制作教程,图老师

Photoshop设计教程:ipad主题网页制作教程,图老师

Photoshop设计教程:ipad主题网页制作教程,图老师

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/ps/)

这一步要说下,其实也很简单,就是做一个斜面区块,然后让ipad看上去是从某个袋子中取出的效果

Photoshop设计教程:ipad主题网页制作教程,图老师

根据上面的斜面区块继续进行细节处理,这里我们用矩形工具制作个渐变图层,透明度设置为30%。然后将其旋转与斜面平行放置,为斜面添加一些阴影效果,看上去更立体

Photoshop设计教程:ipad主题网页制作教程,图老师

Photoshop设计教程:ipad主题网页制作教程,图老师

Photoshop设计教程:ipad主题网页制作教程,图老师

 

来源:http://www.tulaoshi.com/n/20160319/1900981.html

延伸阅读
卡通涂鸦风格以往来讲仅仅为儿童主题或者给孩子设计的,但现在越来越多的使用到了一些企业站、专题站中,以其丰富的色彩、新奇的设计方式能迅速吸引访客的注意,同时卡通风格的涂鸦也使人感到轻松愉快。 下面是整理的一些卡通涂鸦的优秀网页设计案例: 01、Canon-ci.201404_Selphy 佳能相机,将其丰富的色彩,以卡通图像的形式展现到了书桌...
本教程非常适合做网页弹出窗口的美化。制作方法非常简单,只需要用到图层样式设置就可以。效果很不错。 最终效果 1、新建一个文件,然后用圆角矩形绘制一个圆角巨型。双击图层调出图层样式,选择渐变叠加,参数设置如图1,图2。 图1 图2 2、再设置外发光,参数设置如下图。 图3 3、大致的水晶质感做好了,再在横...
标签: PS PS教程
本文由 中国 zixuan_gzs 编译,转载请保留此信息! 在学习中遇到问题可以到 论坛Photoshop求助研讨版块 发贴交流! 本例为Photoshop网页设计实例教程,主要学习如何运用PS制作简洁风格黑色导航条按钮,运用的工具主要有图层样式、图层混合模式以及渐变填充的运用,制作过程比较简单,有兴趣的朋友可以动手试试哦~~ 最终效果: ...
一千个设计师有一千种方法让他们的网页设计深入人心,如今正兴起的剪贴风格也正加入到这一千的行列里。如何让你的剪贴设计更加吸引眼球,更加稳重大方,则是设计师们需要克服重重困难去实现的。 现实生活中的剪贴艺术类似许久以前的剪报习惯:将照片或者印刷媒介上的新闻剪下并贴于笔记本上。然而在网页设计中的实现则需要用到纸质纹理,不规...

经验教程

251

收藏

7
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部