当前位置导航:炫浪网>>网络学院>>图形图像>>PhotoShop教程>>PS图像处理

利用PhotoShop制作网站内容框

步骤 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 ', CAPTION, 'Elliptical Marquee Tool');" onmouseout="return nd();" href="javascript:void(0);">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 ', CAPTION, 'Fill');" onmouseout="return nd();" href="javascript:void(0);">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:
- ', CAPTION, 'Outer Glow');" onmouseout="return nd();" href="javascript:void(0);">Outer Glow
- ', CAPTION, 'Inner Glow');" onmouseout="return nd();" href="javascript:void(0);">Inner Glow
- ', CAPTION, 'Gradient Overlay');" onmouseout="return nd();" href="javascript:void(0);">Gradient Overlay
- ', CAPTION, 'Stroke');" onmouseout="return nd();" href="javascript:void(0);">Stroke

 Step 11 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 ', CAPTION, 'Gradient Tool');" onmouseout="return nd();" href="javascript:void(0);">Gradient Tool(Keyboard Shortcut: G) and click and drag down so you have ', CAPTION, 'Top Shine Preview');" onmouseout="return nd();" href="javascript:void(0);">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 ', CAPTION, 'Scaling Transformation');" onmouseout="return nd();" href="javascript:void(0);">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 ', CAPTION, 'Radial Gradient Type');" onmouseout="return nd();" href="javascript:void(0);">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 ', CAPTION, 'Bottom Shine Preview');" onmouseout="return nd();" href="javascript:void(0);">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!
相关内容
赞助商链接