نادى الاتصالات والتقنية

نادى الاتصالات والتقنية (http://dsl.adslsolutions.net/index.php)
-   منتدى التصاميم والجرافكس (http://dsl.adslsolutions.net/forumdisplay.php?f=41)
-   -   دروس فوتشوب اجنبيه (http://dsl.adslsolutions.net/showthread.php?t=3521)

سر العشـــاق 07-05-2010 01:19 PM

دروس فوتشوب اجنبيه
 
دروس فوتشوب اجنبيه 2010 , دروس فوتشوب اجنبيه للمبتدئين , دروس فوتشوب اجنبيه روعه , دروس فوتشوب اجنبيه cs3

the mirror effect.
The Tutorial

Step 1

Open a new document (you can choose the dimensions by yourself) and add the object or text of your choice in form of a new layer. I chose a styled-down version of the DesignLovr logo.
http://designlovr.com/wp-content/upl.../12/step-1.jpg
Step 2

Duplicate the layer (Ctrl+J) and flip the new layer by going to Edit>Transform>Flip Vertical.
Move the freshly flipped layer down until the bottom of the original layer and the top of the duplicated either touch or have only little space in between them (depending on which method you choose you get a slightly different Mirror Effect, just play a little around and see what you like).
http://designlovr.com/wp-content/upl.../12/step-2.jpg
Step 3

Now you have to add a layer mask to the duplicated layer by clicking on the little symbol at the bottom of the layer palette (see the red circle below). Select the Gradient Tool (Shift+G), choose black and white as colors in the Tool Option Window (it usually is placed directly above your canvas) and move the white stop to the left until a location of 50% is indicated (see screenshot below).
Now create the gradient by clicking on the lowest point of your duplicated layer (in my case it was the bottom of the D of DesignLovr) and pulling a straight line to the highest point (the end of the g in the example).
Quicktip:

By adding a layer mask to a layer you have the possibility to fade out parts of a layer completely or partially. When the layer mask is selected in the layer palette you can simply paint with the Brush or Pencil Tool on the canvas or you can use the Gradient and Fill Tool.
Wherever you apply black the corresponding layer will fade out completely, different grays will fade it out partially (as if you reduce the opacity just on the specific part of the layer) and white will leave things as they are. It is a powerful feature of Photoshop that allows you to use only parts of a layer without the need to delete something with the eraser.
http://designlovr.com/wp-content/upl.../12/step-3.jpg
Step 4

The only thing left to do now is to lower the opacity of the duplicated layer in the Layers Palette (usually a value between 30% and 50% is good) and you’re done. Looks great, doesn’t it?
http://designlovr.com/wp-content/upl.../12/step-4.jpg
Final Result

In order to create an even stronger mirror impression you can also add a split gradient to the background as I did below.
You can achieve different results by playing with the distance between the two layers, the gradient you add to the layer mask and different opacity values.

http://designlovr.com/wp-content/upl...nal_result.jpg
I also prepared a version in which I used an icon (from the
Smashing Retro Icon Set) instead of text, the process is the same.
http://designlovr.com/wp-content/upl...reflection.jpg
Additional Info

The Mirror Effect had his big moment a few years ago during the Web2.0 boom. It was heavily (over)used on a great amount of web sites and is out of this reason a little bit frowned upon by many web designers nowadays. But that is no reason not to use this effect if it suits your design.
The mirror effect can help to give your design depth, realism and a polished, shiny look. As you will see in the showcase it is often (and should be) used very subtle and added rather to objects than text. It seems to be especially popular in the combination with iPhones (another, overused web trend).
Just do yourself and others the favor and use the effect only if it really fits rather than on your next grunge design.
The Showcase

The amount of web sites that use a mirror effect is much smaller than it was just a few years ago, but you can still find it on selected web sites.
In combination with a simple black or white background it adds an extra ounce of elegance (reminding one of shiny, polished surfaces) to a web site and can help to emphasize a product or object

ابو حسن مشاهدة ملفه الشخصي إرسال رسالة خاصة إلى ابو حسن البحث عن كل مشاركات ابو حسن
#2
http://www.6smem.com/vb/6smem/statusicon/post_old.gif 02-18-2010, 08:54 AM
ابو حسن http://www.6smem.com/vb/6smem/status...er_offline.gif
عضو مميز
تاريخ التسجيل: Feb 2010
المشاركات: 212


http://www.6smem.com/vb/images/icons/icon1.gif دروس فوتوشوب انجليزى
دروس فوتوشوب انجليزى للمحترفين , دروس فوتوشوب انجليزى تصميم , دروس فوتوشوب انجليزى تصميم مواقع


http://devisefunction.com/tutorials/...cture%2050.jpg
Lets get started…
1. The first thing we want to do is create a new document with the dimensions of 1020×1180.
http://devisefunction.com/tutorials/...icture%201.jpg
2. Starting from the top, we want to begin with our header. Using your Rectangle Marquee Tool, make a selection similar to the following and fill it with #000000.
http://devisefunction.com/tutorials/...icture%202.jpg
3. Keeping it black would just be boring, so the next step is to add some blending options. To do so, go to your layer in the layers palette and right click it and choose Blending Options from the drop down menu. Insert the following:
http://devisefunction.com/tutorials/...icture%203.jpg
http://devisefunction.com/tutorials/...icture%204.jpg
4. For our navigation, we want to give it a “bubbly” look at the bottom. To achieve this, there are a few different ways of doing it, and the way I am going to show you is very simple. Using your Elliptical Marquee Tool, make a circle simple to the following and fill it with #000000.
http://devisefunction.com/tutorials/...icture%205.jpg
5. Now what we need to do is duplicate this layer by selecting your layer in the layers palette and hitting CTRL+J (Command+J). Place your duplicated layer in a similar way as the following:
http://devisefunction.com/tutorials/...icture%206.jpg
6. Merge your layers and keep repeating this process until you get something that looks like this going across your header:
http://devisefunction.com/tutorials/...icture%207.jpg
7. Using your Rectangle Marquee, make a rectangle similar to the following and fill it with #000000 on its own layer.
http://devisefunction.com/tutorials/...icture%208.jpg
8. Merge your “bubbles” layer, and your newly created rectangle layer together and then lower your layers opacity to about 80% and insert the following blending options onto your layer.
http://devisefunction.com/tutorials/...icture%209.jpg
9. For the logo I used the font Chunk , and for the musical icon, I downloaded the Mono Icon Set. Keep this set handy as we will use it in other parts of this tutorial. I then applied the following blending options to both the icon layer, and my text layer:
http://devisefunction.com/tutorials/...cture%2010.jpg
http://devisefunction.com/tutorials/...cture%2011.jpg
It will look something like this:
http://devisefunction.com/tutorials/...cture%2012.jpg
10. Our links will be fairly basic on the right side of our header. Using a font similar to helvetica, go ahead and add some white text to represent our links. For our active link text, I used the color #1F282F. I then used the Rounded Rectangle Tool with a radius of 5px to create a box behind my link with the following blending options:
http://devisefunction.com/tutorials/...cture%2013.jpg
http://devisefunction.com/tutorials/...cture%2014.jpg
11. Your header should look something like this:
http://devisefunction.com/tutorials/...cture%2015.jpg
12. Next we want to create the color glow that will be behind our screenshot preview in our featured area. Create a new group in your layers palette (Command+G), and label it “Color Glow”. Then Command+Click your blue background layers thumbnail preview in your layers palette to make it an active selection. With your new group selected in the layers palette, go ahead and chose the layer mask icon at the bottom of your Layers Palette. This will make it so nothing will be visible in our content area of the site.
13. Next use a soft brush to add some bright colors in a similar way to the following, each on their own layer. Then lower the opacity of each layer until you like your results. This is what I came up with:
http://devisefunction.com/tutorials/...cture%2016.jpg
14. I wanted to add a little starburst effect as well that will radiate behind our screenshots, so I downloaded this rising sun brush pack and added a starburst effect.
http://devisefunction.com/tutorials/...cture%2017.jpg
15. Take a screenshot of your favorite music streaming site (I chose last.fm for this tutorial), and place your screenshots in a similar fashion.
http://devisefunction.com/tutorials/...cture%2018.jpg
16. All that is left for this is to add a little shadow underneath our screenshots. Use your Elliptical Marquee with a bit of a feather, and fill a selection similar to the following with #000000 and then lower the opacity to a point you like.
http://devisefunction.com/tutorials/...cture%2019.jpg
17. The last thing I did was to add a “Play” icon that I made using my Elliptical Marquee with a black fill, and my Polygonal Lasso Tool with a white fill. Lower the opacity on it and the left side of our featured area will look something like this when we are complete. We will then be able to move onto the right side.
http://devisefunction.com/tutorials/...cture%2020.jpg
18. Using your Text Tool, add some text in a similar way to the following. Our heading is #1E282F, while our body text is #FFFFFF.
http://devisefunction.com/tutorials/...cture%2021.jpg
19. With your Pen Tool, make a path similar to the following under your heading:
http://devisefunction.com/tutorials/...cture%2022.jpg
20. We want to add a stroke to our path. Chose your Brush from your Tools Palette and make sure your foreground is set to #1E282F, with about a 2px soft brush active. Make sure you are on a new layer, and then select your path from the Paths Palette, and then choose the Stroke Icon at the bottom to add a stroke to your path.
http://devisefunction.com/tutorials/...cture%2023.jpg
21. On your strokes layer, insert the following blending options:
http://devisefunction.com/tutorials/...cture%2024.jpg
http://devisefunction.com/tutorials/...cture%2025.jpg
22. The last thing we need to do for our featured box is to add our “Sign up now” button, and our “Find out More” button. To do this we want to use our Rounded Rectangle With a Radius of about 20px.
http://devisefunction.com/tutorials/...cture%2026.jpg
23. Add the following blending options to your layer:
http://devisefunction.com/tutorials/...cture%2027.jpg
http://devisefunction.com/tutorials/...cture%2028.jpg
http://devisefunction.com/tutorials/...cture%2029.jpg
24. Using your Text Tool, add some text in a similar way to the following. I then added an icon from the Iconic Icon Pack.
http://devisefunction.com/tutorials/...cture%2030.jpg
25. On your icons layer, added the following blending options to give it a nice green gradient.
http://devisefunction.com/tutorials/...cture%2031.jpg
http://devisefunction.com/tutorials/...cture%2032.jpg
26. Then follow the same steps to create a “Find out more” button. The only thing that changes is that our icon will use a different gradient. I used the same gradient as our blue background, except it is reversed. Your header will look like this when it is finished.
http://devisefunction.com/tutorials/...cture%2033.jpg
27. Our content area is up next. With your Rectangle Marquee, make a selection similar to the following and fill it with #FFFFFF.
http://devisefunction.com/tutorials/...cture%2034.jpg
28. Insert the following blending options onto its layer.
http://devisefunction.com/tutorials/...cture%2035.jpg
http://devisefunction.com/tutorials/...cture%2036.jpg
29. Starting with the left side of our content area, we are going to make the “Start Listening” box. So pull out your Rounded Rectangle Tool from your Tools Palette and set the radius to 10px.
http://devisefunction.com/tutorials/...cture%2037.jpg
30. On this newly created layer, we then want to add the following blending options:
http://devisefunction.com/tutorials/...cture%2038.jpg
http://devisefunction.com/tutorials/...cture%2039.jpg
31. To make the the heading of our box, we want to Command+Click (CTRL+CLICK) the thumbnail in our layers palette of our rounded rectangle layer to select it. On a new layer, fill your selection with #000000. Using your Rectangle Marquee Tool, select most of the box that will house content and choose Edit>Clear. It will look something like the following:
http://devisefunction.com/tutorials/...cture%2040.jpg
32. Insert the following blending options onto your newly created layer:
http://devisefunction.com/tutorials/...cture%2041.jpg
http://devisefunction.com/tutorials/...cture%2042.jpg
33. All that is left for the heading is to add some text to describe the content box. I chose to add a little icon on the right to add a “open new window” type option.
http://devisefunction.com/tutorials/...cture%2043.jpg
34. Once you add some content into the box, you can have something that looks like the following:
http://devisefunction.com/tutorials/...cture%2044.jpg
35. The right side of our content area houses a “featured Artist” box, and “What members say” box. These boxes are fairly basic. Using the Rounded Rectangle with a radius of 10px is how I created the container, and the back of the heading. Use the same gradient you used in step #32 for the background of your box, and then use the same gradient you used for your active link in step #10. Add some content and your content area will look like this:
http://devisefunction.com/tutorials/...cture%2045.jpg
36. All that is left is the footer and then we will be done! Using your Rectangle Marquee Tool again, make a rectangle similar to the following and fill it with #1F282F.
http://devisefunction.com/tutorials/...cture%2046.jpg
37. Now insert the following blending options onto its layer:
http://devisefunction.com/tutorials/...cture%2047.jpg
http://devisefunction.com/tutorials/...cture%2048.jpg
http://devisefunction.com/tutorials/...cture%2049.jpg
38. All that is left is to add some icons and text and your footer will be complete. All icons are from the Iconic Icon pack we downloaded previously. When it’s all said and done, your final template should look like the following:






الساعة الآن 02:18 PM.

dsl.adslsolutions.net