PhotoShop网页设计制作教程:美食blog网站首页

  本教程教我们用PhotoShop设计制作一个美食blog网页效果。

  这个网页最大的特色在于,底部使用了桌布的图案,感觉有点居家的气氛。再搭配上简洁的布局,好似一个家的感觉。

  先看效果图:

  


  1。新建一个大小为:1200*1400px的文档,并填充背影色:#fbe0b1。

  再执行滤镜>杂色>添加杂色,设置数据如下图:

  


  2.创建自定义图案

  按ctrl+N新建一个大小为:80*80px的文档.

  再次新建一个图层,命名:horizontal.选择"矩形选区工具"绘制一个大小为80*40,并填充:#b52a51.设置不透明度为:20%.

  新建一个图层命名:vertical,使用"矩形工具"在左边绘制一个40*80的图形,并填充:#b52a51.设置不透明度为:30%.

  新建一个组,把这两个图层放入进去,并命名:pattern.并设不透明度:30%.

  关闭白色图层的"睛眼",编辑>自定义图案.

  


  3.填充自定义图案

  新建一个图层命名:patten;并填充白色,更改填充:0%。双击这个图层,在弹出的"图层样式"窗口中选择"图案叠加"选择我们上一步自定义的图案,

  


  4.顶部导航的制作

  新建一个组"top bar".

  新建一个图层命名:top bar.选择"矩形选区"工具,绘制一个1200*15并填充#a95858,位置如图如示.双击这个图层,给这个图层添加一个"阴影"效果,其阴影:#473e2f.

  新建一个图层命名:1px line.选取"线条(U)"工具,绘制一个1px的线条,并填充:#8b4747.把位置放在紧靠矩形的下面.

  按ctrl+J复制线条图层,选择"移动(V)"工具,位移到上一个线条的上面.并更改其颜色:#ca7373.

  



[1] [2] [3] [4] [5] [6] [7] [8] [9]  下一页

时间: 2024-10-31 12:32:30

PhotoShop网页设计制作教程:美食blog网站首页的相关文章

PhotoShop一款优秀的设计工作室网页设计制作教程

像往常一样,希望通过实例教程传递布局构架理念,不只是在告诉大家网站是如何一点点设计出来的.所以希望看到灵活应用的更多扩展版本.期待你的创新. 在本教程中,你将学习如何创建一个Fancy的设计工作室网页布局. 1.首先,你需要下载以下两个素材图片. 用PS打开第一张图片,然后点击 编辑>定义图案.选择这种模式的名称,然后就可以关闭这个文件了. 2.这是第二张图片.请下载原始尺寸图片,或者在下载压缩包里找到它. 3.创建新文件,Size:1100*1260px. 选择油漆桶工具,选择图案模式,找到刚

PhotoShop打造简洁的新闻栏目网页设计制作教程

介绍用PhotoShop打造简洁的新闻栏目网页设计效果,比较简洁的新闻栏目设计,喜欢网页设计的同学可以一起来学习一下! 效果: 制作开始: 绘制一个矩形框. 给矩形框增加样式:描边. 在底部矩形上再绘制一个长形矩形.用来承载栏目名. 给这个载体矩形增加样式. 分类: PS入门教程

PS打造具有空间感的iPhone苹果应用电子商务网站网页设计制作教程

今年苹果公司将推出新的iPhone5. 与往年一样,相应会有很多配套Apps推出,所以苹果应用程序的网络营销也会如火如荼的展开. 这就是为什么我们要有与众不同的Idea,去创建一个iphone相关的网站. 如果你想通过网店来销售公司的Apps. 如果你有很多iphone5 Apps. 我们将教你如何创建一个好看的布局,用电子商务网站出售你的iphone应用程序. 老方法,先看看整体样式. 1.新建文档,Size:1100*721px,填充背景色 #2b2b2b. 2.下一步是填充背景,与第3篇<

PhotoShop创建复古型网页设计制作教程

首先给大家看下整体效果. 2.启动本教程你将需要创建一个新文件.使用任何你想要的值,但是我建议你创建一个文件的最小宽度为1100*1163像素. 背景填充#252118. 3.原教材玩神秘没有写怎么做,我用我的方法做了一下,你可以复制一个刚刚做的图层,选择画笔工具,大小设成1100px,硬度0%. 柔光,把这个图层透明度调到60%就ok了. 4.在中间用圆角矩形画个995*295的圆角矩形.填充#52442b. 5.复制一个上面图形,把颜色改成#e9e9e9. 分类: PS入门教程

Webjx收集整理最新20个Photoshop网页设计教程

在你打开一个网站的时候,首先注意到的当然是它的设计,第一印象至关重要,网站的设计将帮助访问者决定是否继续浏览该网站.今天,本文收集了最新20个 Photoshop 网页设计教程,帮助你设计出更精美的网页. How to create a colorful business web layout Create a consulting web layout Create a movie video streaming website Create a gritty portfolio layout

最新20个很棒的 Photoshop 网页设计教程

在你打开一个网站的时候,首先注意到的当然是它的设计,第一印象至关重要,网站的设计将帮助访问者决定是否继续浏览该网站.今天,本文收集了最新20个 Photoshop 网页设计教程,帮助你设计出更精美的网页. How to create a colorful business web layout Create a consulting web layout Create a movie video streaming website Create a gritty portfolio layout

非常棒的 Photoshop 网页设计教程

曾经和大分享过几篇优秀的 Photoshop 网页设计教程,喜欢的人非常多.今天,本文继续向大家分享最新25个实用的 Photoshop 网页设计教程.其实,网页设计并没有你想的那么难,相信看完这些教程,你也可以设计出漂亮的网页. 1. Clean Style Portfolio Layout 2. Create an Elegant Photography Web Layout in Photoshop 3. Create a Portfolio Web Layout in Photoshop

Photoshop设计超酷的电影网站首页模板

  本教程主要使用Photoshop设计超酷的电影网站首页模板,创建一个电影导演工作室主页,要体现出怀旧感和孤独感.没有Logo,没有图片,所有素材自己搜集.根据设计要求,我们可以想象一个场景,一间有着泛旧的地板和斑驳的墙面的房间,一把空荡荡的导演椅安静的放在那里,椅子旁边放着拍片时用的喊话筒和废弃的电影胶片,打板也斜倚在墙上,安静的躺在幽暗的角落里.一束光从顶部向下打下来,落在椅子和地板上,让整个的气氛更加显得孤寂.依据这个想法,我们搜集以下素材来创建我们头脑里的这个场景. 教程素材:设计一个

网页设计制作的一般流程

设计|网页|网页设计 怎么才能设计一个好而出色的网站呢? 很简单的问题,不过缺少这个系统专业的流程却是不行的. 现在,我就来说一下我做这个网站时的制作流程吧.毕竟做Web Design已经快两年了,经验也有一些. :)    很早我就想做一个这样的的网站了, 但是一直没有下定决心, 有一天终于有了创益.于是便开始了前期的思考过程.     1. 了解良好的开始是成功的一半. 我习惯于在开始做任何网站之前先把网站的大概内容有个初步的了解,最好自己列一个比较详细的列表,包括栏目分几层,栏目下面的栏目