تويت
Remote Control Interface
السلام عليكم
الله يعنيكم الدرس انقليزي معلبش طبق على الصور هههههههه
This tutorial will teach you how to create a simple "Remote Control" which you can use as an interface or navigational tool for your site.
14.Time for drop shadows! Create a new layer, and name it drop shadows (this layer should be underneath the base layer - base on top). CTRL+Click the base layer, and then select the drop shadows layer. To create the drop shadow (the drop shadow layer should still be selected), choose Select-> Feather-> about 4 pixels (depending on your taste). Move the selection 3 to 4 pixels right and 3 to 4 pixels down. Now fill the feathered selection with Black. Repeat this process for the inside layer.
15.Now, using the same beveled line technique (with one line selection) create lines to separate the remote into separate buttons. You will need to make them on the appropriate layer (inside or base). If you want, add some text for the buttons and a background. Add rollovers, cut up the image with Adobe ImageReady or using the Cutting Up Images tutorial, and you should have a remote control interface that will make all your buddies jealous!
الله يعنيكم الدرس انقليزي معلبش طبق على الصور هههههههه
This tutorial will teach you how to create a simple "Remote Control" which you can use as an interface or navigational tool for your site.
1.
Start by creating a new document about 200x350. Refer to the Rounded Edges Tutorial if you don't know how to make rounded inteface edges (see below example), and then come back here.
Start by creating a new document about 200x350. Refer to the Rounded Edges Tutorial if you don't know how to make rounded inteface edges (see below example), and then come back here.
2.
Once you have a shape that looks something like the example shown below, CTRL+Click on the channel to load the selection (if you don't already have it). Rename the channel outline.
Once you have a shape that looks something like the example shown below, CTRL+Click on the channel to load the selection (if you don't already have it). Rename the channel outline.
3.Open the Layers Palette, and create a new layer. Then fill the selection with solid grey and rename the layer base.
4.Next, duplicate the channel we named outline (click on it and drag it to the new channel icon) and name the new copy of the channel shadow. Use Filter-> Blur-> Gaussian Blur-> 4 or 5 pixels (higher may be necessary if your shape is substantially larger than the example).
5.Now, switch to the Layer Palette and choose Select-> Load Selection-> shadow. After that, choose Select-> Modify-> Contract by 3 pixels, then Select-> Inverse. Then press D to set colors to default and ALT+Delete to fill with black. Now choose Select-> Load Selection-> outline to load the original selection. Choose Select-> Inverse and press Delete... your image should now look like the one below.
4.Next, duplicate the channel we named outline (click on it and drag it to the new channel icon) and name the new copy of the channel shadow. Use Filter-> Blur-> Gaussian Blur-> 4 or 5 pixels (higher may be necessary if your shape is substantially larger than the example).
5.Now, switch to the Layer Palette and choose Select-> Load Selection-> shadow. After that, choose Select-> Modify-> Contract by 3 pixels, then Select-> Inverse. Then press D to set colors to default and ALT+Delete to fill with black. Now choose Select-> Load Selection-> outline to load the original selection. Choose Select-> Inverse and press Delete... your image should now look like the one below.
6.Looks pretty cool so far, eh? Press CTRL+D to deselect, and go to channels again, duplicate the shadow channel, and rename it reflex.
7.Now, with the reflex channel selected, choose Image-> Adjust-> Curves and manipulate the diagonal line until it looks about like the example below (hold your mouse over the image below and you will see a sample of the results). This will distort the channel so it can be used as a reflex -- the difference between shadows (own shadow and drop shadow).
7.Now, with the reflex channel selected, choose Image-> Adjust-> Curves and manipulate the diagonal line until it looks about like the example below (hold your mouse over the image below and you will see a sample of the results). This will distort the channel so it can be used as a reflex -- the difference between shadows (own shadow and drop shadow).
8.Switch to the base layer on the Layers Palette. Choose Select-> Load Selection-> reflex and move the selection 3 pixels up and 3 pixels left. Now, choose Select-> Inverse and create a new layer. Fill the layer with white -- Rename to reflex.
9.Now it's time to adjust the reflex layer. Press CTRL+D to deselect. Set it the Layer's opacity to somewhere between 60-80% if it seems to be too bright (depending on how you feel about it). Make sure that the reflex layer is still selected, and choose the Eraser Tool (also select a big soft brush from the Brush Palette). Erase the left and upper sides of the reflex layer so you can see more of the (black) shadow from the base layer. Choose Select-> Load Selection-> outline (with the reflex layer still active). Choose Select-> Inverse and press Delete, then CTRL+D to deselect. Keeping reflex selected, press CTRL+E to merge the layer down - you should now only have just the base layer and the background layer.
10.Choose Image-> Adjust-> Levels and adjust the your shape until you are satisfied with the color and balance between shadows and highlights.
9.Now it's time to adjust the reflex layer. Press CTRL+D to deselect. Set it the Layer's opacity to somewhere between 60-80% if it seems to be too bright (depending on how you feel about it). Make sure that the reflex layer is still selected, and choose the Eraser Tool (also select a big soft brush from the Brush Palette). Erase the left and upper sides of the reflex layer so you can see more of the (black) shadow from the base layer. Choose Select-> Load Selection-> outline (with the reflex layer still active). Choose Select-> Inverse and press Delete, then CTRL+D to deselect. Keeping reflex selected, press CTRL+E to merge the layer down - you should now only have just the base layer and the background layer.
10.Choose Image-> Adjust-> Levels and adjust the your shape until you are satisfied with the color and balance between shadows and highlights.
11.Select the bottom part of the base layer with your Marquee Selection Tool. Select the Move Tool, and use the Down arrow on your keyboard to split your shape into two pieces (you may have to resize your canvas to make it fit). Then, create a new layer and call it inside. Draw a rectangular selection on the new layer (see 2nd image) and fill it with light gray -- check the layer's Marquee Selection Tool.
Check the Preserve Transparency box (necessary for upcoming step).
Check the Preserve Transparency box (necessary for upcoming step).
12.Now, select the Airbrush Tool and set its pressure to 25-30%. Pick out a soft brush (45 pixels wide is good) and draw 2 lines along the left and right edges while holding Shift so they are straight (these will be shadow lines to make the middle section appear to be round). Go to the Layers Palette and drag the inside layer so it is below the base layer, and make sure it is centered.
13.Now, select the Single Row Marquee Tool from the fly-out menu and switch to the base layer. Create a selection line one pixel from the edge where the layer was divided in half (mouse over the sample image below for a zoomed example). Now, choose Image-> Adjust-> Levels, and enter 2 in the middle "Input Levels" box. Click OK, then move the selection 1 pixel up and choose Image-> Adjust-> Levels and put 0.4 in the middle "Input Levels" box. This will create a beveled line on the very edge of the base layer. Repeat this process for the other edge, only move one pixel down this time. We will use this technique again later.
(Optional: You may wish to add "two" of these bevel lines to the edges to make them stand out, I have included 2 in the sample image)
13.Now, select the Single Row Marquee Tool from the fly-out menu and switch to the base layer. Create a selection line one pixel from the edge where the layer was divided in half (mouse over the sample image below for a zoomed example). Now, choose Image-> Adjust-> Levels, and enter 2 in the middle "Input Levels" box. Click OK, then move the selection 1 pixel up and choose Image-> Adjust-> Levels and put 0.4 in the middle "Input Levels" box. This will create a beveled line on the very edge of the base layer. Repeat this process for the other edge, only move one pixel down this time. We will use this technique again later.
(Optional: You may wish to add "two" of these bevel lines to the edges to make them stand out, I have included 2 in the sample image)
14.Time for drop shadows! Create a new layer, and name it drop shadows (this layer should be underneath the base layer - base on top). CTRL+Click the base layer, and then select the drop shadows layer. To create the drop shadow (the drop shadow layer should still be selected), choose Select-> Feather-> about 4 pixels (depending on your taste). Move the selection 3 to 4 pixels right and 3 to 4 pixels down. Now fill the feathered selection with Black. Repeat this process for the inside layer.
15.Now, using the same beveled line technique (with one line selection) create lines to separate the remote into separate buttons. You will need to make them on the appropriate layer (inside or base). If you want, add some text for the buttons and a background. Add rollovers, cut up the image with Adobe ImageReady or using the Cutting Up Images tutorial, and you should have a remote control interface that will make all your buddies jealous!
تعليق