【高级】8月，教你打造商务简约空间酷站 (16/826)

修改 回帖 引用 楼主： Aйdㄚ

QQ号及昵称：410863054  天宇视觉
教程地址：http://user.qzone.qq.com/410863054/blog/1250100403

空间地址：http://user.qzone.qq.com/410863054
内容摘要：

       额...今天突然间热血奔腾，不知道哪来的一股劲，就做了一个空间效果主页。连夜顺便也把教程赶出来了，很累哦，大家看完了，记得顶顶哦。

       8月，应该说是一个盛夏的季节，但是貌似今年夏天并不热，反而雨水更多。嘿嘿，呆家上上网，学习学习，也蛮不错的。很多“大人”级别的人物，都呆家没事干，今天就教大家做一套商务风格的，空间效果酷站主页。相信你一定会喜欢哦，教程内容详细丰富、多样化。希望学完，能给你更多的启发。

 

【说明】
1.使用软件：Photoshop
2.本次教程使用放大放小功能，主要是为了页面清爽，所以有的大图，直接使用超链接。
3.本次制作最佳效果1440*900

【制作软件和相关要求】
制图软件：Photoshop软件（提供下载：点击下载）

【制作过程】

（点击放大看）
注：该图放大的为效果图，如需要最终的自定义皮肤效果，请看索要该模块要求。 《索要模块要求》

       
　

【1】打开PS，新建（Ctrl+N），设置如下：

       
【2】做好所有页面的底稿。如下：

        
【3】其实如上图所示的这样的界面很容易做。

【4】首先新建一层，命名自定。然后选择矩形选框工具，在图层上拉一个矩形。如下：

        
【5】在菜单里找到，选择--平滑，一般大框的平滑值设置为5就可以了，小框一般在3左右。注意要统一。

       
       
       
【6】然后随便填充一个前景色后，右键该图层混合选项。进入设置如下：
        
       
【7】一个简单的矩形平滑框就做好了，其他的边框做法和以上一样。

【8】接下来，我们做顶部的黄色区域的部分，整个图最难的部分也就是这里，主要用到钢笔和渐变工具。

【9】新建一层，利用渐变工具，拉一个渐变如下效果设置。

       

【10】新建3层，分别在每一层，绘制矩形框，如下，分别采用选择平滑，值3。
       
【11】然后分别右键混合选项，设置如下：

        
        
【12】接下来，选择钢笔工具。利用钢笔绘制线条。关于钢笔工具的教程使用方法，具体可以看如下教程：

        【制图课堂】30分钟让你成为PS钢笔工具大师

        【制图课堂】钢笔工具和路径的概念(1) ­

        【制图课堂】钢笔工具之锚点的方向线(2) ­

        【制图课堂】钢笔工具之锚点的方向线实例教程(3) ­

        【制图课堂】钢笔工具之两个锚点之间的曲线形态(4) ­

回帖 引用 1楼[楼主] Aйdㄚ

【13】我们开始绘制钢笔线条。

        
【14】然后Ctrl+Enter，进入选择，选择渐变工具，进行渐变编辑器的颜色设置，然后拉一个渐变，如下：

        
【15】选择最底部的矩形黄色框，按住Ctrl键，点击那层，然后回到钢笔渐变层，进行反选（Ctrl+Shift+I），然后右键混合选项设置如下：

         

        
【16】完成最终效果如下：

        
【17】然后分别利用钢笔工具绘制其他渐变效果层，完成如下：

        
【18】接着我们做上面的按钮。完成如下：相关教程可以参加：

         【制图课堂】PS强力打造Web2.0水晶风格按钮制作­

        
【19】然后分别为按钮打上文字。

        
【20】然后分别在上面插入VI标志和相关文字介绍，如下：

       
【21】接下来往下做，利用椭圆工具、渐变工具填充圆。用钢笔工具绘制与圆上的标记。利用矩形选框工具，配合选择平滑选项，设置右键混合选项，设置完成如下：

       
【22】打入相关的配合页面的文字：

       

回帖 引用 2楼[楼主] Aйdㄚ

【23】利用以上综合的方法，可以完成一下界面设计：

        
        
【24】接着，我们给底部做文章。完成如下：

        
【25】做完以后，我们回到顶部，做顶部效果。

【26】以下这种线条的层次感，有人会问怎么做，其实很简单，无非就是两条用铅笔线绘制的不同颜色的直线。

        
【27】然后分别添加文字和自己的LOGO，完成效果如下：

       
       

【28】最终页面效果，可以看下： （点击放大看）

【29】有人一看，呀，怎么就一张图啊，有什么好的，太单调了。嘿嘿、这你就不知道了吧，你可以采用链接的方式哦。

【30】虽然Flash现在不能外链了，但是我们可以通过添加图片，通过超链接的方式，一样可以达到相同的效果哦。

 

回帖 引用 3楼[楼主] Aйdㄚ

【31】分别将以下图挨个放在背景图上，并上好相对应的链接即可。

          

          

          

回帖 引用 4楼[楼主] Aйdㄚ

           

【32】还有的地方，你需要上链接的，你可以自己截图做链接。

【33】然后让一个自定义标题栏：相关教程，参见：

          【空间攻略】如何添加自定义背景皮肤

【34】我这里就不一一说了。快2点了累死我了。

【35】哈哈，有了这些链接，我可以说，你都可以不用导航栏了，直接通过这种方式，在空间随意切换了。

【36】有人问了，切换到另一个页面没导航，还是被办法呀。哈哈，现在不是退出最新的工具栏了，顶部的工具上有日志等所有导航栏，随便点一个即可跳转了。

【37】这次的教程就为大家讲解到这里，请大家继续关注天宇视觉设计酷站哦~每天来看一看，都会惊喜教程等你学，等你看哦~

【38】该模块要求。 《索要模块要求》

回帖 引用 5楼Hero丶

楼主您好，感谢您对【Qzone教程分享】版面的支持。    您所发表的教程自荐帖已合格，我们将从合格里面选出优秀。    录用的帖子将在空间右上角的 帮助 里面展示      Qzone教程分享交流群：10987995　63647167，期待您的加入 !    欢迎继续关注QQ空间官方吧一区-【Qzone教程分享】，     因为有你，所以精彩

回帖 引用 6楼『墨·迹...

                     真难啊

回帖 引用 7楼道理ヽ

呵呵 是够难的               

回帖 引用 8楼尛 蕾

回帖 引用 9楼 [CK沉珂]

真好看.........  
真好看.........  
真好看.........  
真好看.........  
真好看.........  
真好看.........  
真好看.........  
真好看.........  
真好看.........  
真好看.........  
真好看.........  
真好看.........  
真好看.........  
真好看.........  
真好看.........  
真好看.........  
真好看.........  
真好看.........  
真好看.........  
真好看.........  

回帖 引用 10楼■簡單銫調□

只看到叉烧包了。。

回帖 引用 11楼浮草

唉，难，试试吧，看看会不会做的成

回帖 引用 12楼無極尊

顶一下

挺好看的  我去学学

回帖 引用 13楼尐堔

厉害，厉害，。。。。。

回帖 引用 14楼温柔小若

游戏帐号被T_X封了,   ­

本工作室为报复T_X,教大家刷QB的方法!!!   ­

进空间查看具体刷Q币Q点的方法和步骤!!!客服联系QQ:  7 8 6 1 1 1 7 9 4

 

点击进入→ http://786111794.qzone.qq.com/

热血中国­黑客联盟(广州)工作室

 

〖公告:由于好多人对网络了解不透彻,导致网络诈骗事件特别多,特此声明,以本空间数据为真实可信.腾讯倒闭是我们的目标!〗

回帖 引用 15楼

哇   真的好难啊 

回帖 引用 16楼 奶卍﹏卐媽

   
顶一下 

• 荣誉+3
• 荣誉+2
• 荣誉+1
• 荣誉-1
• 荣誉-2
• 荣誉-3