达达首页 | 设计教程 | 辅助工具 | 字体字库 | 素材贴图 | 非 主 流 | PS 笔刷 | 签名模版 | 网页模版 | 达达贴吧
设为首页

加入收藏

联系我们
PhotoShop 教程 | Illustrator 教程 | CorelDraw 教程 | FireWorks 教程 | 3D MAX 教程 | MAYA 教程 | Flash 教程 | After Effects 教程
相关教程
普通教程 非主流——眉毛嘴唇脸蛋处理方法
推荐教程 打造Sinsuo非主流照+颓废美化照片
普通教程 PS 通道扣图实例
普通教程 Photoshop教程:快速打造美女质感…
推荐教程 Photoshop实例教程:人物照片变小…
普通教程 PS实例:抽丝教程
普通教程 Photoshop教程:打造梦幻效果照片
普通教程 Photoshop教程之制作QQ空间插图全…
推荐教程 Photoshop实例:个性化人像桌面制…
推荐教程 Photoshop教程:菜鸟玩手绘之抽线…
最新更新

Photoshop打造水彩…

Photoshop绘制时尚…

Photoshop制作水晶…

Photoshop为风吹日…
您现在的位置: 达达派 >> 教程中心 >> PhotoShop教程 >> 图像篇 >> 教程正文
利用PhotoShop制作网站内容框
作者:未知 文章来源:本站原创 点击数: 更新时间:2006-4-22 14:51:32
教程录入:雷公藤    责任编辑:令彬  添加到雅虎收藏+
步骤 1
创建新的画布。

步骤 2
创建新的图层并命名为“Base”,确定“Base”层为当前编辑层,设定前景色为#F0F0F0

步骤 3
使用圆角矩形工具创建一个430x180 像素的矩形,复制当前层并命名为“Titlebar”,确定其为当前编辑层。
 

步骤 4
选择矩形选框工具,由矩形底部拖出一个159像素的矩形选区,点击删除键。
 

步骤 5
设置“Titlebar”层的混合选项,分别打开渐变叠加描边窗口,并按下图设置。

步骤 6
创建新的图层并命名为“Seperator”,选择铅笔工具并设置前景色为#AFAFAF,在“Titlebar”层和“Base”层之间画一条直线。

步骤 7
隐藏Seperator层 和 Titlebar层

Base层 添加投影效果(图层 >> 图层样式 >> 投影)。

使用矩形选框工具框选最上方3个像素,删除。

取消对Seperator层 和 Titlebar层 的隐藏。

步骤 8
现在我们将为内容框创建3个圆形按钮。确定Seperator 层为当前编辑层,创建新的图层并命名为“Red Orb”。
步骤 9
创建新的图层并命名为“Orb Base”,选择椭圆选框工具,并按住SHIFT键,创建一14像素的圆。Take the Elliptical Marquee Tool and while holding  create a circle that is 14 pixels. Then fill the circle with any colour by pressing SHIFT + BACKSPACE and using these settings.

 Step 10
Now we are going to stylize this plain orb by modifying this layer's blending options. We'll have to add a:
- Outer Glow
- Inner Glow
- Gradient Overlay
- Stroke


We're going to add the shine at the top of the orb now. Load the Selection for the "Orb Base" layer and then create a New Layer named "Top Shine". Take the Gradient Tool(Keyboard Shortcut: G) and click and drag down so you have something like this, you'll want to try a few times to get this to look somewhat similar.

Now press CTRL + T to transform this selection, you'll want to scale it down by 83% for both height and width then press ENTER to apply the transformation. The top shine should now be centered in the top of the orb.

 Step 12
Let's make a shine for the bottom of the orb now. The procedure for creating the bottom shine is pretty similar to the top shine minus a few differences. First you want to Load the Selection for the "Orb Layer" then create a New Layer named "Bottom Shine". Take the Gradient Tool this time with the radial gradient instead of the linear gradient type. Then from the bottom of the orb you want to drag up towards the center until you have something like this. Take the Move Tool(Keyboard Shortcut: V) and press the UP ARROW once to move the bottom shine up one pixel. Now change the Blending Mode to Overlay so that the bottom shine blends in better.

Step 13
You have learned how to make the orb, so now we want to create two more so what we are going to is just Duplicate the Layer Set to create the yellow and green orbs. To change the colour of the orbs just edit the Gradient Overlay for the Blending Options so that the gradient is the colour you want the orb to be. Once you have finished you should have something like this below.


Step 14
The last step is to create the button on the top right hand corner which hides the main Mac window. What you do is repeat steps 9-11 again with a few modifications. Instead of using an elliptical marquee tool you want to use a Rounded Rectangle Tool with a radius of about 10pixels. For the Blending Options take out the Inner Glow and for the Gradient Overlay change the colours to a white to gray colour.

 Final Product
That's it, hope you enjoyed this tutorial and look forward to seeing you visit the Imusion Studio Forum!

I also wished that you were able to learn something useful in this tutorial. This tutorial is just the basis of trying to replicate the window on a Mac, you can go further and add further details. Remember the whole point of a Mac is the detail and care taken in building everything that is why all of our steps detailed here go indepth on doing things certain ways so that it will achieve a specific look that is unique to a Mac. Below is the final product. Buh Bye!
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
    关于我们 | 帮助(?) | 广告服务 | 版权声明 | 商业合作 | 发展历程 | 联系我们

    Copyright ? 2005-2008 CGFancy.com, All Rights Reserved,达达网络:陕ICP备06010337号

    技术交流:71125455(平面)、545534707(三维),业务合作:71125455