首页 > 设计制作 > 正文

Photoshop制作出清爽的ipad页面的网页制作教程 Photoshop简单制作xhtml css网页

2015-06-04 出处:网络 整理:zhishizhan.net

延伸:Photoshop简单制作xhtml css网页页面
描述:...法,方法虽然很简单,但真不一定有几个人知道.... 起码google搜索没搜索到。 开始吧: 1、打开photoshop cs2 ,打开设计出的网站首页。用切片工具切好。 图: 2、点 文件-》存储为web所用格式 快捷键为ctrl alt shift s ,点右上倒三角的小图片,选择Edit output settings   图: 3、见图,在第二个下拉中选择 Slices,选择Generate CSS ,然后在后面的下拉中选By ID 图: 4、点OK保存并关闭设置...

主题:Photoshop制作出清爽的ipad页面的网页制作教程

效果图:
Photoshop制作出清爽的ipad页面的网页制作教程
1.创建新文件:1100 x 1250像素。 背景颜色:#e8e8e8。
Photoshop制作出清爽的ipad页面的网页制作教程
2.复制背景图层(CTRL + J),然后滤镜>杂色>添加杂色,设置如下。
Photoshop制作出清爽的ipad页面的网页制作教程
3.创建一个圆角矩形、白色的形状在中间的空间布局.
Photoshop制作出清爽的ipad页面的网页制作教程
4.简单的图层样式:
Photoshop制作出清爽的ipad页面的网页制作教程
5.在右边的位置,加增iPad的图片。
Photoshop制作出清爽的ipad页面的网页制作教程
6.复制两个ipadi图片,添加高斯模糊效果,移动到后方,左右分开, 产生空间感。(这里图象加载失败就省去图象)
7.创建一个简单的字体效果:
Photoshop制作出清爽的ipad页面的网页制作教程
8.图层样式设置:
Photoshop制作出清爽的ipad页面的网页制作教程

Photoshop制作出清爽的ipad页面的网页制作教程
Photoshop制作出清爽的ipad页面的网页制作教程
9.新建图层,创建矩形选区。
Photoshop制作出清爽的ipad页面的网页制作教程
10.选择油漆桶工具>选择图案,或是选择编辑>填充>图案。图案如下,大家可以动手制作,也可以下载(点击下载)。
Photoshop制作出清爽的ipad页面的网页制作教程
11.效果如图。
Photoshop制作出清爽的ipad页面的网页制作教程
12.以相同的方式制作下边的细线。
Photoshop制作出清爽的ipad页面的网页制作教程

13.选择圆角矩形工具,创建一个蓝色形状。
Photoshop制作出清爽的ipad页面的网页制作教程
分享给小伙伴们:

相关推荐

    Photoshop简单xhtml css网页页面主题:Photoshop简单xhtml css网页页面
    描述:...法,方法虽然很简单,但真不一定有几个人知道.... 起码google搜索没搜索到。 开始吧: 1、打开photoshop cs2 ,打开设计出的。用切片工具切好。 图: 2、点 -存储为web所用格式 快捷键为ctrl alt shift s ,点右上倒三角的小图片,选择Edit output settings   图: 3、见图,在第二个下拉中选择 Slices,选择Generate CSS ,然后在后面的下拉中选By ID 图: 4、点OK保存并关闭设置...
    PhotoShop设计网页头部条教程主题:PhotoShop设计网页头部条教程
    描述:效果1, 在PS中,宽度定义为1000px,实际们所要用到的宽度一般在950px-980px之间。为了方便更好的展示的整体效果。所以的宽度应大于网页实际的宽度。高度自定,但最好要大于整个页面的高度,在没有办法确定页面的高度范围时,我们可以把高度定到大于网页高度。这样,整个页面好了。我们可以使用裁切工具。将多余的部分裁切掉。 2, 这个实例,...
    Photoshop将出金属质感风格的网页条主题:Photoshop将出金属质感风格的网页条
    描述:效果 1, 在PS中,宽度定义为1000px,实际们所要用到的宽度一般在950px-980px之间。为了方便更好的展示的整体效果。所以的宽度应大于网页实际的宽度。高度自定,但最好要大于整个页面的高度,在没有办法确定页面的高度范围时,我们可以把高度定到大于网页高度。这样,整个页面好了。我们可以使用裁切工具。将多余的部分裁切掉。 2, 这个实例,...
    Photoshop1:主体主题:Photoshop1:主体
    描述:本教程是一系列教程,主要讲解如何用photoshop一个的.第1讲 的主体部分 课程总览 在本课程中,朋友们将学 到以下内容: •• 如何通过Photoshop CS3 进行的版面设计 •• 各种网页版面元素的设计技巧和方法 •• 如何进行网页的切图以及切片的属 设置 •• 如何创建与Flash 整合的FLV •• 在Dreamweer CS3 中使用“Spry ...
    PhotoShop一款优秀的设计室网页设计教程主题:PhotoShop一款优秀的设计室网页设计教程
    描述:...Copy第二 图片得到bottom副本,移动到页面中上部位置。相关教程:PS网页banner广告教程 Photoshop清凉水中网页模板 PhotoShop切片工具切割图片转成网页格式教程
    Photoshop4:菜单主题:Photoshop4:菜单
    描述:相关文章:Photoshop(3):切割网页图片菜单在中占有非常重要的地位,它用于引领访问者找到需要的页面。所以一般来说,网页设计师通常将大量的精力用在菜单的设计上,而这里我们只是举个简单的例 来说明。1. 用Dreamweer 打开网页,当鼠标单击后,您可以看到栏已经完成的切片,我们现在要的是鼠标移上时的翻转效果,如图1-4-1 所示。 图1-4-...

相关文章

搞笑图片