Photoshop设计教程:ipad主题网页制作教程

2016-02-16 06:20 12 1 收藏

今天给大家分享的是由图老师小编精心为您推荐的Photoshop设计教程:ipad主题网页制作教程,喜欢的朋友可以分享一下,也算是给小编一份支持,大家都不容易啊!

【 tulaoshi.com - PS 】

最终效果图

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

ipad电脑图片

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

加入一些图标

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

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

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

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

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

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

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

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

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

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

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

继续添加新的资源区块。

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

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

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

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

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

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

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

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

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

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

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

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

来源:https://www.tulaoshi.com/n/20160216/1569090.html

延伸阅读
标签: Web开发
第一步 下面是我们将要动手制作的设计图。在这篇教程里我们只制作首页,不过你可以以此为基础用相同的布局制作内页。 第二步 首先要做的是确定页面结构。随着你对CSS布局的逐步学习,这个过程会变得越来越简单。通过运用大量绝对定位和大幅背景图片,我们可以非常简单地完成这个设计。 什么是绝对定位? 一个HTML元素(比如di...
标签: PS PS基础
最终结果. Lets get started 1.新文档 1100×1020. 2. 下一步我们要设置为我们的主题。 从本文顶部的资源列表中检索水下素材照片。 打开它并调整大小以适合您的模板,如下所示。 3. 使用您的圆角矩形工具半径为 10px,使类似以下内容的矩形。 我要去请参考此图层为返回内容。 您想要将它放在您的文档的中心 (参阅最终图像预览,如...
标签: PS PS教程
这是巧匠招生专题的海报,风格狂拽炫酷。加入一些Photoshop界面元素在画面中,为了让画面更有设计师专属的代入感。 最终效果   用到的素材下载:http://yunpan.cn/c3LnaPSHFDyMr  访问密码 ad0a 头脑风暴: 寻找灵感: 找素材: 1、深蓝色背景添加杂色,加入地面素材用蒙版擦出一个大概的椭圆形,曲线压暗地面亮度。...
来源:站酷 作者:猫(图老师整理)铭 制作牛仔海报之前需要对牛仔文化有一定的了解。然后搜集一些相关的素材,再按照自己的思路去构图及处理细节。 最终效果 1、新建一个600 * 800像素的文件,背景填充黑色。打开木板素材拖进来,如下图。 2、复制木板素材,选择菜单:编辑 变换 垂直翻转,然后移上去对接好。 3、合并两个木板图层...
标签: 网页设计
这个Photoshop 网页设计的教程中,我们将学习设计一个整洁的具有现代气息的网站。这是设计和HTML/CSS模板转换系列教程的第一部分。     photoshop企业网页设计现代产品主题 第一部分: photoshop企业网页设计现代产品主题第二部分: 将现代产品主题企业网页由psd转换成XHTML/CSS模板 预览 以下是我们将要一些设计的页面预览,...

经验教程

169

收藏

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