أفضل مواقع لتنسيق الالوان لمصممين مواقع الويب
PSD/HTML Conversion: Code a Clean Business Website Design / تحويل شكل الموقع من الفوتوشوب الى موقع HTML
How to Design a Clean Business Website with Photoshop / تصميم شكل القالب لموقع اعمال باستخدام الفوتوشوب
5 مكتبات لتأثيرات css ليكون تصميمك غني و ثري / 5 CSS Effects Libraries for Supercharging Your Designs
![Creating the Photoshop document](http://images.sixrevisions.com/2009/08/30-04_3d_elements_layout_step01.gif)
![Making the Background layer editable](http://images.sixrevisions.com/2009/08/30-05_3d_elements_layout_step02.gif)
![Creating the background](http://images.sixrevisions.com/2009/08/30-06_3d_elements_layout_step03.gif)
![Creating the background](http://images.sixrevisions.com/2009/08/30-07_3d_elements_layout_step04.gif)
![Creating the background](http://images.sixrevisions.com/2009/08/30-08_3d_elements_layout_step05.gif)
![Creating the background](http://images.sixrevisions.com/2009/08/30-09_3d_elements_layout_step06.gif)
![Creating the background](http://images.sixrevisions.com/2009/08/30-10_3d_elements_layout_step07.gif)
![Creating the background](http://images.sixrevisions.com/2009/08/30-11_3d_elements_layout_step08.gif)
![Creating the background](http://images.sixrevisions.com/2009/08/30-09_3d_elements_layout_step06.gif)
![Creating the background](http://images.sixrevisions.com/2009/08/30-12_3d_elements_layout_step09.gif)
![Creating the Header](http://images.sixrevisions.com/2009/08/30-13_3d_elements_layout_step10.gif)
![Creating the Header](http://images.sixrevisions.com/2009/08/30-14_3d_elements_layout_step11.gif)
![Creating the Header](http://images.sixrevisions.com/2009/08/30-15_3d_elements_layout_step12.gif)
![Creating the Header](http://images.sixrevisions.com/2009/08/30-16_3d_elements_layout_step13.gif)
![Creating the Header](http://images.sixrevisions.com/2009/08/30-17_3d_elements_layout_step14.gif)
![Adding the Header title](http://images.sixrevisions.com/2009/08/30-18_3d_elements_layout_step15.gif)
![Adding the Header title](http://images.sixrevisions.com/2009/08/30-19_3d_elements_layout_step16.gif)
![Creating the Navigation bar](http://images.sixrevisions.com/2009/08/30-20_3d_elements_layout_step17.gif)
![Creating the Navigation bar](http://images.sixrevisions.com/2009/08/30-21_3d_elements_layout_step18.gif)
![Creating the Navigation bar](http://images.sixrevisions.com/2009/08/30-22_3d_elements_layout_step19.gif)
![Creating the Navigation bar](http://images.sixrevisions.com/2009/08/30-23_3d_elements_layout_step20.gif)
![Creating the Navigation bar](http://images.sixrevisions.com/2009/08/30-24_3d_elements_layout_step21.gif)
![Creating the Navigation bar](http://images.sixrevisions.com/2009/08/30-25_3d_elements_layout_step22.gif)
![Creating the Navigation bar](http://images.sixrevisions.com/2009/08/30-26_3d_elements_layout_step23.gif)
![Making the Navigation Hover button](http://images.sixrevisions.com/2009/08/30-27_3d_elements_layout_step24.gif)
![Making the Navigation Hover button](http://images.sixrevisions.com/2009/08/30-28_3d_elements_layout_step25.gif)
![Making the Navigation Hover button](http://images.sixrevisions.com/2009/08/30-29_3d_elements_layout_step26.gif)
![Making the Navigation Hover button](http://images.sixrevisions.com/2009/08/30-30_3d_elements_layout_step27.gif)
![Making the Navigation Hover button](http://images.sixrevisions.com/2009/08/30-31_3d_elements_layout_step28.gif)
![Making the Navigation Hover button](http://images.sixrevisions.com/2009/08/30-32_3d_elements_layout_step29.gif)
![Making the Navigation Hover button](http://images.sixrevisions.com/2009/08/30-33_3d_elements_layout_step30.gif)
![Transforming the Hover button](http://images.sixrevisions.com/2009/08/30-34_3d_elements_layout_step31.gif)
![Transforming the Hover button](http://images.sixrevisions.com/2009/08/30-35_3d_elements_layout_step32.gif)
![Transforming the Hover button](http://images.sixrevisions.com/2009/08/30-36_3d_elements_layout_step33.gif)
![Transforming the Hover button](http://images.sixrevisions.com/2009/08/30-37_3d_elements_layout_step34.gif)
![Transforming the Hover button](http://images.sixrevisions.com/2009/08/30-38_3d_elements_layout_step35.gif)
![Transforming the Hover button](http://images.sixrevisions.com/2009/08/30-39_3d_elements_layout_step36.gif)
![Creating the Content Area](http://images.sixrevisions.com/2009/08/30-40_3d_elements_layout_step37.gif)
![Creating the Content Area](http://images.sixrevisions.com/2009/08/30-41_3d_elements_layout_step38.gif)
![Creating the Content Area](http://images.sixrevisions.com/2009/08/30-42_3d_elements_layout_step39.gif)
![Creating the Content Area](http://images.sixrevisions.com/2009/08/30-43_3d_elements_layout_step40.gif)
![Creating the Content Area](http://images.sixrevisions.com/2009/08/30-44_3d_elements_layout_step41.gif)
![Creating the Content Area](http://images.sixrevisions.com/2009/08/30-45_3d_elements_layout_step42.gif)
![Creating the Content Area](http://images.sixrevisions.com/2009/08/30-46_3d_elements_layout_step43.gif)
![Creating the Content Area](http://images.sixrevisions.com/2009/08/30-47_3d_elements_layout_step44.gif)
![Making the Search box graphic](http://images.sixrevisions.com/2009/08/30-20_3d_elements_layout_step17.gif)
![Making the Search box graphic](http://images.sixrevisions.com/2009/08/30-42_3d_elements_layout_step39.gif)
![Creating the Featured Area](http://images.sixrevisions.com/2009/08/30-48_3d_elements_layout_step45.gif)
![Creating the Featured Area](http://images.sixrevisions.com/2009/08/30-49_3d_elements_layout_step46.gif)
![Creating the Featured Area](http://images.sixrevisions.com/2009/08/30-50_3d_elements_layout_step47.gif)
![Creating the Featured Area](http://images.sixrevisions.com/2009/08/30-51_3d_elements_layout_step48.gif)
![Creating the Featured Area](http://images.sixrevisions.com/2009/08/30-52_3d_elements_layout_step49.gif)
![Featured Area content](http://images.sixrevisions.com/2009/08/30-53_3d_elements_layout_step50.gif)
38 Add a subtle gradient overlay to the featured border layer. Click the layer’s thumbnail whilst holding down the Ctrl key on the keyboard to load a selection around it, and then go to "Select > Modify > Contract". Contract the selection by 10px, and then press OK.![Filling in the Featured Area with content](http://images.sixrevisions.com/2009/08/30-54_3d_elements_layout_step51.gif)
![Filling in the Featured Area with content](http://images.sixrevisions.com/2009/08/30-55_3d_elements_layout_step52.gif)
![Filling in the Featured Area with content](http://images.sixrevisions.com/2009/08/30-56_3d_elements_layout_step53.gif)
![Creating the content area's 3D Ribbons](http://images.sixrevisions.com/2009/08/30-57_3d_elements_layout_step54.gif)
![Creating the content area's 3D Ribbons](http://images.sixrevisions.com/2009/08/30-58_3d_elements_layout_step55.gif)
![Creating the content area's 3D Ribbons](http://images.sixrevisions.com/2009/08/30-59_3d_elements_layout_step56.gif)
![Creating the content area's 3D Ribbons](http://images.sixrevisions.com/2009/08/30-60_3d_elements_layout_step57.gif)
![Creating the Footer](http://images.sixrevisions.com/2009/08/30-61_3d_elements_layout_step58.gif)
![Creating the Footer](http://images.sixrevisions.com/2009/08/30-62_3d_elements_layout_step59.gif)
![Creating the Footer](http://images.sixrevisions.com/2009/08/30-63_3d_elements_layout_step60.gif)
![Creating the Footer](http://images.sixrevisions.com/2009/08/30-64_3d_elements_layout_step61.gif)
![Creating the Footer](http://images.sixrevisions.com/2009/08/30-65_3d_elements_layout_step62.gif)
![Creating the Footer](http://images.sixrevisions.com/2009/08/30-66_3d_elements_layout_step63.gif)
![Creating the Footer](http://images.sixrevisions.com/2009/08/30-67_3d_elements_layout_step64.gif)
![Creating the Footer](http://images.sixrevisions.com/2009/08/30-68_3d_elements_layout_step65.gif)
PSD/HTML Conversion: Code a Clean Business Website Design / تحويل شكل الموقع من الفوتوشوب الى موقع HTML
How to Design a Clean Business Website with Photoshop / تصميم شكل القالب لموقع اعمال باستخدام الفوتوشوب
5 مكتبات لتأثيرات css ليكون تصميمك غني و ثري / 5 CSS Effects Libraries for Supercharging Your Designs
In this web design tutorial, you will discover a way to create a sleek and professional web page layout that incorporates the 3D Ribbon design trend, as well as some other captivating 3D elements, using Photoshop.
Final Result
Here’s a preview of what we’re going to create.
Creating the Photoshop document
1 Start off by creating a new document (Ctrl+N); enter the dimensions 1200 pixelsby 1200 pixels.
![Creating the Photoshop document](http://images.sixrevisions.com/2009/08/30-04_3d_elements_layout_step01.gif)
Making the Background layer editable
2 By default, Photoshop locks the Background layer so that you cannot edit it. To make it editable, double-click on your Background layer within the Layers Panel (press F7 to toggle the Layers Panel if it is not visible). Alternatively, you can right-click on the Background layer and choose to "Layers from Background". Once double clicked, you’ll be presented with a dialog box (as shown in the figure below). Enter a new name for your Background layer and press OK; doing this will enable us to edit our background layer.
![Making the Background layer editable](http://images.sixrevisions.com/2009/08/30-05_3d_elements_layout_step02.gif)
Creating the background
3 Now that our background layer is editable, double-click on the layer’s thumbnail to add a Gradient Overlay layer style; use the following figure as a guide on the layer style’s settings.
![Creating the background](http://images.sixrevisions.com/2009/08/30-06_3d_elements_layout_step03.gif)
4 Create a new layer (Ctrl+Shift+N) named "header background". Choose the Rectangular Marquee Tool (M) in the Tools Panel and then make a selection across the top half the canvas; the selection should be about 150px in height and span the entire width of the canvas.
![Creating the background](http://images.sixrevisions.com/2009/08/30-07_3d_elements_layout_step04.gif)
5 Fill the selection (Alt+Backspace) with any color then add these layer styles.
![Creating the background](http://images.sixrevisions.com/2009/08/30-08_3d_elements_layout_step05.gif)
![Creating the background](http://images.sixrevisions.com/2009/08/30-09_3d_elements_layout_step06.gif)
6 Create a new layer (Ctrl+Shift+N) labeled "navigation background". Repeat Steps 4 – 5, only this time the selection should be about 50px in height, still spanning the full width of our canvas; the selection should also be made directly underneath the last one.
![Creating the background](http://images.sixrevisions.com/2009/08/30-10_3d_elements_layout_step07.gif)
7 Fill the selection (Alt+Backspace) with any color then add a couple of layer styles (a Color Overlay and a Stroke layer style).
![Creating the background](http://images.sixrevisions.com/2009/08/30-11_3d_elements_layout_step08.gif)
![Creating the background](http://images.sixrevisions.com/2009/08/30-09_3d_elements_layout_step06.gif)
You should now have something like this.
![Creating the background](http://images.sixrevisions.com/2009/08/30-12_3d_elements_layout_step09.gif)
Creating the Header
8 Create a new layer (Ctrl+Shift+N) labeled "header", get the Rectangular Marquee Tool (M) from the Tools Panel and then make a fixed sized selection that is 850pxwide and 150px in height.
![Creating the Header](http://images.sixrevisions.com/2009/08/30-13_3d_elements_layout_step10.gif)
9 Place the selection in the middle of the canvas, making sure that the bottom of the selection ends on the stroke which is applied to the "navigation background" layer.
![Creating the Header](http://images.sixrevisions.com/2009/08/30-14_3d_elements_layout_step11.gif)
10 Fill the selection (Alt+Backspace) with any color, and then add the following three layer styles.
![Creating the Header](http://images.sixrevisions.com/2009/08/30-15_3d_elements_layout_step12.gif)
![Creating the Header](http://images.sixrevisions.com/2009/08/30-16_3d_elements_layout_step13.gif)
![Creating the Header](http://images.sixrevisions.com/2009/08/30-17_3d_elements_layout_step14.gif)
Adding the Header title
11 Add your website title and slogan on to the left side of the header by utilizing the Horizontal Type Tool (T). The settings and color codes are listed in the figure below.
![Adding the Header title](http://images.sixrevisions.com/2009/08/30-18_3d_elements_layout_step15.gif)
You should have something like this.
![Adding the Header title](http://images.sixrevisions.com/2009/08/30-19_3d_elements_layout_step16.gif)
Creating the Navigation bar
12 Create a new layer (Ctrl+Shift+N) labeled "navigation". Use the Rectangular Marquee Tool (M) to make a fixed selection that’s 850px wide and 50px in height.
![Creating the Navigation bar](http://images.sixrevisions.com/2009/08/30-20_3d_elements_layout_step17.gif)
13 Make the selection directly underneath the header, then fill with any color.
![Creating the Navigation bar](http://images.sixrevisions.com/2009/08/30-21_3d_elements_layout_step18.gif)
14 Now, add these three layer styles to your "navigation" layer.
![Creating the Navigation bar](http://images.sixrevisions.com/2009/08/30-22_3d_elements_layout_step19.gif)
![Creating the Navigation bar](http://images.sixrevisions.com/2009/08/30-23_3d_elements_layout_step20.gif)
![Creating the Navigation bar](http://images.sixrevisions.com/2009/08/30-24_3d_elements_layout_step21.gif)
You should have something like this.
![Creating the Navigation bar](http://images.sixrevisions.com/2009/08/30-25_3d_elements_layout_step22.gif)
15 Use the Horizontal Type Tool (T) to add your navigation links onto your navigation bar.
![Creating the Navigation bar](http://images.sixrevisions.com/2009/08/30-26_3d_elements_layout_step23.gif)
Making the Navigation Hover button
16 Select the Rounded Rectangle Tool (U) from the Tools Panel and set its Radius to10px.
![Making the Navigation Hover button](http://images.sixrevisions.com/2009/08/30-27_3d_elements_layout_step24.gif)
17 Draw out a small rectangle that’s about 80px x 50px.
![Making the Navigation Hover button](http://images.sixrevisions.com/2009/08/30-28_3d_elements_layout_step25.gif)
18 Use the Rectangular Marquee Tool (M) to make a rectangle over the top half of the rectangle. Fill the rectangle the same color as the rounded rectangle.
![Making the Navigation Hover button](http://images.sixrevisions.com/2009/08/30-29_3d_elements_layout_step26.gif)
19 Duplicate the shape by right clicking on the layer and choosing Duplicate Layer. Then rotate the duplicated layer 180 degrees using the Transform feature, Edit > Transform > Rotate 180o. Finally, place the shapes next to each other making sure there level; use the Move Tool (V) to move the shape around.
![Making the Navigation Hover button](http://images.sixrevisions.com/2009/08/30-30_3d_elements_layout_step27.gif)
20 Make a selection around half of the duplicated shape using the Rectangular Marquee Tool (M). Once you’ve made a selection, hit the Del key to clear the area beneath the marquee selection.
![Making the Navigation Hover button](http://images.sixrevisions.com/2009/08/30-31_3d_elements_layout_step28.gif)
21 Use the Move Tool (V) and your arrow keys to align the little shape next to the bigger shape, making sure they are not directly overlapping. Once moved into place, Ctrl + click your little shape layer’s thumbnail within the Layers Panel window to load a selection around it.
![Making the Navigation Hover button](http://images.sixrevisions.com/2009/08/30-32_3d_elements_layout_step29.gif)
22 Switch to the bigger shape’s layer and hit the Del key to clear the area beneath it. Repeat the steps for the other side of the shape – and when you’re finished – you should have something like this.
![Making the Navigation Hover button](http://images.sixrevisions.com/2009/08/30-33_3d_elements_layout_step30.gif)
Transforming the Hover button
23 Once you have your hover button you can delete the duplicated layer, and then rename the remaining layer "nav hover". Now, add these couple of layer styles to it.
![Transforming the Hover button](http://images.sixrevisions.com/2009/08/30-34_3d_elements_layout_step31.gif)
![Transforming the Hover button](http://images.sixrevisions.com/2009/08/30-35_3d_elements_layout_step32.gif)
24 Drag the "nav hover" layer underneath your navigation text layer. Shift the "nav button" layer behind one of your navigation links and then change the link texts color to white (#FFFFFF).
![Transforming the Hover button](http://images.sixrevisions.com/2009/08/30-36_3d_elements_layout_step33.gif)
25 Underneath your "nav hover" button layer, create a new layer (Ctrl+Shift+N) called "nav hover extra". On this layer, create a small ellipse using the Elliptical Marquee Tool (M) and fill the ellipse with the color #A3002F.
![Transforming the Hover button](http://images.sixrevisions.com/2009/08/30-37_3d_elements_layout_step34.gif)
26 Cut the ellipse in half by using the Rectangular Marquee Tool to make a selection of the bottom half, and deleting the bottom portion of it. Then move the half-ellipse under the rounded part of the nav button. If the ellipse hangs over the navigation, trim it some more. Once the ellipse is the correct size, duplicate its layer and place the duplicated one on the other side.
![Transforming the Hover button](http://images.sixrevisions.com/2009/08/30-38_3d_elements_layout_step35.gif)
You should have something like this.
![Transforming the Hover button](http://images.sixrevisions.com/2009/08/30-39_3d_elements_layout_step36.gif)
Creating the Content Area
27 Create a new layer (Ctrl + Shift + N) called "content area". Using the Rectangular Marquee Tool, create a selection 850px in width, same as our other boxes, and as high as you need depending on the amount of content your going to have; you can make it bigger or smaller later, as needed. Fill the selection with any color and then add these three layer styles.
![Creating the Content Area](http://images.sixrevisions.com/2009/08/30-40_3d_elements_layout_step37.gif)
![Creating the Content Area](http://images.sixrevisions.com/2009/08/30-41_3d_elements_layout_step38.gif)
![Creating the Content Area](http://images.sixrevisions.com/2009/08/30-42_3d_elements_layout_step39.gif)
28 Drag the "content area" layer below the "navigation" layer and adjust the content area box using the Move Tool (V) so its looks like an indented line where the content area and navigation meet.
![Creating the Content Area](http://images.sixrevisions.com/2009/08/30-43_3d_elements_layout_step40.gif)
Making the Search box graphic
29 Create a new layer (Ctrl+Shift+N) called "search field" and create a rectangular marquee selection inside the navigation area on the right hand side using the Rectangular Marquee Tool (M).
![Creating the Content Area](http://images.sixrevisions.com/2009/08/30-44_3d_elements_layout_step41.gif)
30 Fill the selection by choosing Edit > Fill (Shift+F5) with the color of white (#FFFFFF), and then add a Stroke layer style.
![Creating the Content Area](http://images.sixrevisions.com/2009/08/30-45_3d_elements_layout_step42.gif)
31 Inside the dummy search field, add some text inside using the Horizontal Type Tool (T).
![Creating the Content Area](http://images.sixrevisions.com/2009/08/30-46_3d_elements_layout_step43.gif)
32 Directly next to the dummy search field, create another selection using the Rectangular Marquee Tool (M).
![Creating the Content Area](http://images.sixrevisions.com/2009/08/30-47_3d_elements_layout_step44.gif)
33 Fill the selection with any color then add a Gradient Overlay and Stroke layer style; use the following figures for guidance on their settings.
![Making the Search box graphic](http://images.sixrevisions.com/2009/08/30-20_3d_elements_layout_step17.gif)
![Making the Search box graphic](http://images.sixrevisions.com/2009/08/30-42_3d_elements_layout_step39.gif)
You should have something like this.
![Creating the Featured Area](http://images.sixrevisions.com/2009/08/30-48_3d_elements_layout_step45.gif)
Creating the Featured Area
34 Create a new layer (Ctrl+Shift+N) called "featured area" and create a rounded rectangle area using the Rounded Rectangle Tool with a radius set at 10px.
![Creating the Featured Area](http://images.sixrevisions.com/2009/08/30-49_3d_elements_layout_step46.gif)
35 Use the Polygonal Lasso Tool (L) to create a pointed arrow on the upper left side. Fill the arrow on the same layer with the same color as the rounded rectangle.
![Creating the Featured Area](http://images.sixrevisions.com/2009/08/30-50_3d_elements_layout_step47.gif)
36 Now add a couple of layer styles (a Gradient Overlay and Stroke) to your featured area layer.
![Creating the Featured Area](http://images.sixrevisions.com/2009/08/30-51_3d_elements_layout_step48.gif)
![Creating the Featured Area](http://images.sixrevisions.com/2009/08/30-52_3d_elements_layout_step49.gif)
Filling in the Featured Area with content
37 Create a new layer (Ctrl+Shift+N) called "featured border" and using the Rounded Rectangle Tool (U), create a rectangular shape inside the featured area.
![Featured Area content](http://images.sixrevisions.com/2009/08/30-53_3d_elements_layout_step50.gif)
38 Add a subtle gradient overlay to the featured border layer. Click the layer’s thumbnail whilst holding down the Ctrl key on the keyboard to load a selection around it, and then go to "Select > Modify > Contract". Contract the selection by 10px, and then press OK.
![Filling in the Featured Area with content](http://images.sixrevisions.com/2009/08/30-54_3d_elements_layout_step51.gif)
39 Find an image/photo that you want to use (I used an image of some flowers), open it in Photoshop, and copy the image to your clipboard (Ctrl + C). Then with the contracted marquee selection that we made in the previous step still active, go to Edit > Paste Into (Shift+Ctrl+V). The image will then be paste inside the selection.
![Filling in the Featured Area with content](http://images.sixrevisions.com/2009/08/30-55_3d_elements_layout_step52.gif)
40 Finish off the featured area with some dummy text and titles.
![Filling in the Featured Area with content](http://images.sixrevisions.com/2009/08/30-56_3d_elements_layout_step53.gif)
Creating the content area’s 3D Ribbons
41 Use the same method as our navigation hover buttons to create the left par, only this time create the main overlapping part much longer and horizontally oriented instead of vertically oriented (jump back up to the Making the Navigation Hover buttonsection of the tutorial to refresh your memory if needed).
![Creating the content area's 3D Ribbons](http://images.sixrevisions.com/2009/08/30-57_3d_elements_layout_step54.gif)
42 At the end of the ribbon (right-hand side), create a triangular shape using the Polygonal Lasso Tool (L) and use the Del key to remove the unwanted area. Finally, add a Drop Shadow layer style to this layer (use your preferred settings) and some dummy text.
![Creating the content area's 3D Ribbons](http://images.sixrevisions.com/2009/08/30-58_3d_elements_layout_step55.gif)
43 Duplicate the 3D ribbon layer and flip the duplicated layer by choosing Edit > Transform > Flip Horizontally. Use the Move Tool (V) to position it on the right; they will serve as the headings for the sidebar content.
![Creating the content area's 3D Ribbons](http://images.sixrevisions.com/2009/08/30-59_3d_elements_layout_step56.gif)
44 Underneath each heading, add some dummy text and maybe an image or two.
![Creating the content area's 3D Ribbons](http://images.sixrevisions.com/2009/08/30-60_3d_elements_layout_step57.gif)
Creating the Footer
45 Recreate the hover button again (alternatively, you can simply duplicate the layers of the hover button).
![Creating the Footer](http://images.sixrevisions.com/2009/08/30-61_3d_elements_layout_step58.gif)
46 Replace the Gradient Overlay settings using the colors listed below.
![Creating the Footer](http://images.sixrevisions.com/2009/08/30-62_3d_elements_layout_step59.gif)
47 Merge them into one layer and rotate it via Edit > Transform > Rotate 90o CCW. Move the object on the left side of the layout.
![Creating the Footer](http://images.sixrevisions.com/2009/08/30-63_3d_elements_layout_step60.gif)
48 Duplicate the shape again and flip it horizontally using Edit > Transform > Flip Horizontally. Move the shape across on to the other side of the layout.
![Creating the Footer](http://images.sixrevisions.com/2009/08/30-64_3d_elements_layout_step61.gif)
49 Merge both shapes into one layer (Ctrl+E), zoom (Z) into any one of the shapes, and make a rectangular selection just like in the figure below, and choose Edit > Free Transform (Ctrl+T).
![Creating the Footer](http://images.sixrevisions.com/2009/08/30-65_3d_elements_layout_step62.gif)
50 Select the middle anchor point and drag across to the other side of the canvas.
![Creating the Footer](http://images.sixrevisions.com/2009/08/30-66_3d_elements_layout_step63.gif)
You should have something like this.
![Creating the Footer](http://images.sixrevisions.com/2009/08/30-67_3d_elements_layout_step64.gif)
51 Finally, using the Horizontal Type Tool (T) add your footer information
![Creating the Footer](http://images.sixrevisions.com/2009/08/30-68_3d_elements_layout_step65.gif)
The end !
لتحميل ملف PSD للتصميم من هنا
0 التعليقات :