LOGO-200LOGO-120x35LOGO-200LOGO-200
  • 首页
  • BIM咨询
  • 培训课程
    • BIM全科高级综合班
      • BIM建筑与结构实战班
      • BIM机电管线实战班
      • BIM建筑装饰实战班
      • 全国BIM技能等级考试班
    • 室内设计就业高级综合班
    • 建筑园林景观表现班
    • 建筑参数化设计犀牛班
    • 工业产品设计犀牛高级班
    • 平面广告设计
    • 淘宝美工网页
    • AutoCAD专项
    • 网课
    • 作品
      • 室内设计作品
      • 建筑犀牛作品
      • 产品设计作品
      • 园林设计作品
      • 平面设计作品
  • 课件
    • 建筑
    • Auto CAD 课件
    • 室内设计课件
    • 建筑犀牛课件
    • SketchUp 课件
    • Lumion 课件
    • 产品设计课件
    • Keyshot
    • BIM课程课件
      • BIM建模结构课件
      • BIM机电课件
      • BIM装饰课件
    • 平面设计课件
      • PS课件
      • AI课件
      • CDR课件
      • ID课件
    • 更多设计经典和教程
      • –室内设计–
      • –建筑设计–
      • –平面设计–
      • –产品设计–
      • –网页设计–
      • –CG插画–
      • –设计动态–
    • BIM技术
      • –BIM资讯–
      • –BIM教程–
      • –BIM案例–
      • –BIM考证–
      • –BIM软件–
  • 资源
    • 软件
    • -材质贴图-
    • -3DMAX模型-
    • -Sketchup模型-
    • -Rhino模型-
    • -BIM模型-
    • -CAD图纸-
    • -室内设计-
    • -建筑规划-
    • -平面设计-
    • -景观园林-
  • 设计答人
  • 管理系统
  • 设计制作
  • 其他
    • 合作企业
    • 招聘求职
    • 最新动态
    • 我们的风采
    • 关于我们
    • 手机版
  • –常用素材包–
  • -材质贴图-
  • -3DMAX模型-
  • -Sketchup模型-
  • -Rhino模型-
  • -BIM模型-
  • -CAD图纸-
  • -室内设计-
  • -建筑规划-
  • -平面设计-
  • -景观园林-
【官网】Photoshop设计独特的WordPress主题界面
2015年7月17日

通过这个教程,你将学到如何设计一个独特的wordpress主题界面来展示你的内容。此界面布局完全适用于商业网站。如果你想将这个psd文件转化为wordpress主题的话,要求你对css、php有深入的了解。
欢迎来到Grafpedia网站的另一个教程,通过这个教程,你将学到如何设计一个独特的wordpress主题界面来展示你的内容。此界面布局完全适用于商业网站。如果你想将这个psd文件转化为wordpress主题的话,要求你对css、php有深入的了解。


浏览界面效果

1925241502-0[1]

1、创建新文档,用油漆桶工具给背景图层填充颜色为#a4b9cc的背景色。
2、使用矩形工具(快捷键为U)创建一个简单的白色区域。

1925244353-1[1]

3、给此图形添加如下样式
(常规混合里面的不透明度是控制整个图层的透明,包括给图层应用的样式效果。而高级混合里面的填充不透明度仅控制图层的填充透明!——译者注)

混合选项

192524Cc-2[1]

描边

1925243451-3[1]

4、复制此图层(你需要先选中此图层,然后按Ctrl+j快捷键进行复制),在图层面板里面将这两个图层链接选中后,按Ctrl+E将这两个图层合并为一个图层。主要因为在应用橡皮工具的时候,你的图层不会丢失设置的效果样式。(你可以试一下,在不进行图层合并,用橡皮笔刷工具删除图形底部的时候会是什么效果)
5、选择橡皮工具,并确定你选择了平滑的笔刷,然后删除此图形区域的底部。如下图所示:

19252454H-4[1]

6、在左边创建一条垂直白线(你可以用单列选择工具创建这条线)。用以上相同的方法,你可以用橡皮工具删除线的顶部与底部。下面就是此效果。你能注意到这条线放在了哪,将这条垂直白线放在离边框1px的位置是非常重要的。

1925246348-5[1]

7、选择圆角矩形工具,我将创建一个白色图形!

1925241561-6[1]

8、为此白色图形添加如下图层样式

混合选项

1925241A1-7[1]

内发光

1925243354-8[1]

描边

1925242140-9[1]

9、复制三份该图形,摆放效果如下面的截屏所示

1925244316-10[1]

这是实际大小的效果

1925244502-11[1]

10、用圆角矩形工具,我将创建如下白色图形

192524D27-12[1]

11、选择钢笔工具的同时按住Ctrl键,在白色图形边缘连续点击鼠标2次。
如果你正确点击的话,你将看到这些节点。

1925244W4-13[1]

按住Ctrl键并选择如下所示的节点

1925242493-14[1]

当你选中此节点后按键盘的下箭头,这个节点就会往下移动!

1925246063-15[1]

这是我的效果
11、使用椭圆工具创建一个小圆形

1925246132-16[1]

12、对小圆形进行调整,使用矩形选择工具选择圆形的部分区域

1925242929-17[1]

按下键盘的delete删除键,然后按Ctrl+D取消选区,这是我的实际尺寸效果。

1925243560-18[9]

13、使用同样的方法,你可以在布局的另一边做相同的效果。这就是最终的效果,你可能注意到了,另外的一个图形在右边。创建它,这个地方主要是放置留言的数目。这主要考虑你用此psd文件创建wordpress主题的情况.

1925246400-19[1]

14、在界面的顶部我用圆角矩形工具创建4个图形。

192524M47-20[1]

15、对所有的图形,我都将应用如下相同的图层样式设置

内发光

1925243104-21[1]

渐变叠加

192524D91-22[1]

1925246112-23[1]

描边

192524B23-24[1]

这是最后的效果

1925245543-25[1]

16、在每个图形下面我添加了线,你知道如何创建这些线的,前面已经介绍过了!

1925242J6-26[1]

17、在这条线下面,我创建了另外一条深色的线

19252435X-27[1]

18、用矩形工具在界面的顶部新建一个图形,并设置背景颜色为#8ba0b5

1925241S2-28[1]

19、选择椭圆工具在其下面创建一个深颜色的图形

1925245J6-29[1]

20、下一步给改图形应用高斯模糊,选择滤镜 >> 模糊 >>高斯模糊,并设置半径像素为7或8

1925241159-30[1]

你也可以根据你的需要来降低透明的值,这是我目前的效果

192524NI-31[1]

21、现在我将添加文字logo和教程里面已经多次介绍的线

1925245417-32[1]

http://www.missyuan.net/uploads/allimg/100701/1925245417-32.jpg

1925244V2-33[1]

23、我将使用椭圆工具创建另外一个图形

1925241928-34[1]

24、我将添加同样的高斯模糊的效果,这是我的效果

19252440W-35[1]

25、我将用矩形选择工具在该图形的上面创建选区

1925244P7-36[1]

26、下一步就是按delete键删除选区内的内容,然后按Ctrl+D取消选区

1925245613-37[1]

27、创建2条线(白色线、深色线)

1925243V3-38[1]

28、在界面的另一边创建导航栏。用圆角矩形工具在界面的右边创建一个简单的图形

1925244352-39[1]

29、删除图形的底部,然后按前面介绍的步骤添加缩进的效果,我就不在详细介绍如何实现它了

1925242394-40[1]

这是我的最终效果,希望你喜欢

1925241502-0[1]
微海报分享

Related posts

2020年8月6日

Illustrator快捷键


Read more
2020年6月26日

你要知道的书籍装帧设计与工艺


Read more
2020年6月23日

你要知道的关于平面设计的基本认知


Read more
2020年4月20日

3-3 课 Keyshot渲染实例(吉他)——材质图的应用


Read more

搜索本站

最新文章

  • 3dmax 2021 中文 2021年2月4日
  • Revit2020 中文 2020年12月3日
  • 广州地铁六号线香雪站BIM咨询案例 2020年9月15日
  • 图学会全国BIM技能等级考试 2020年9月14日
  • 国家职业资格培训鉴定实验基地BIM证书 2020年9月14日
  • 绿色建筑产业联盟BIM证书考证 2020年9月14日
  • 2019全球建筑学院排名TOP 20 2020年9月11日
  • 东莞某停车场改建项目 2020年9月9日

标签云

3DMax软件下载 AutoCAD软件下载 BIM技术 BIM技术经典 BIM教程 BIM软件下载 CG插画 CG插画经典 UI设计 UI设计教程 UI设计素材 Vray软件下载 产品设计作业 产品设计作品 全模型建筑场景 合作企业求才 园林设计作业 地毯 室内家具模型 室内整体模型 室内设计作品 室内设计素材 小砖块 平面设计 平面设计作业 平面设计教程 平面设计经典 平面软件下载 建筑园林素材 建筑犀牛作业 建筑设计经典 我们的风采 技巧 摄影 摄影,技巧 效果图 教程 最新动态 砖墙贴图 网页设计教程 网页设计经典 苹果MAC软件下载 设计动态 设计动态经典 高清贴图

严老师电话|微信|

手机:18902259698

梁老师电话和微信

手机:18902250768

QQ咨询

严老师 QQ 275043888

QQ联系咨询课程

晶网设计培训是广州建筑室内设计培训知名机构,拥有专业建筑犀牛课程,BIM培训考证,室内设计学习,园林景观学习课程等完善的广州室内设计培训教学机构。

地址:广州天河北路高科大厦A座3001室(地铁三号线华师站B 出口,前行20米左转就入A座大堂, 3号电梯上30楼)联系电话 020-85210826

©2018 晶网设计 粤ICP备10225019号-1
  • BIM咨询
  • 建筑动画
  • 园林景观
  • 设计方案效果图
  • 各类建模
shejizhizuo
  • BIM咨询
  • 建筑动画
  • 园林景观
  • 设计方案效果图
  • 各类建模