Interfaces
Learn
Our tutorials have been submitted by our own members and staff over the last four years. They cover a range of design packages and programming languages.
Tutorials are key part of learning new skills, so we not only recommend that you try some, we suggest you experiment with the framework that they give you, don't be scared to wander from the instructions.
Click the categories below to get started!
Contribute
Alternatively you can pass on your useful tips and advice to others, by creating your own.
Submit a Tutorial
Recommend to Others
If you like a tutorial, please use the "digg" button below it.
Glassy Effect
Alright, so you want to know how to make that type of glassy effect that you see on gradients in a lot of forums? Well, it's really quite simple.
First, just start out with a blank canvas.
Now, create a new layer for your gradient. Select the color that you want to base the gradient off of, and fill-in your layer with it.
Ok, now for the gradient. Open-up the blending options for that layer, and go to the "Gradient Overlay". This is the hard part. For your first color, choose a color slightly darker than your base color. For your second color, choose a color slightly lighter.
Now, still in the "Gradient Overlay" field, select "reflected" from the "Style" field.
You can see it starting to come together, can't you? All we need now is a glare. Create a new layer above your gradient layer. Use a marquee to select half of the canvas vertically, but all of it horizontally. Fill it with pure white.
You're practically done. All that's left is to lower the opacity of that layer. DO NOT change the blending options. Just change the layer opacity to something between 5 & 15%.
Well, there you have it! A perfect glassy effect that can be used anywhere. You can use it as a cool effect in banners, a nice menu background, or for gradients. The possibilities are endless.
Tutorial by Scorpian Please do not repost
Gradient Nav
1. Create a 500x500 document (best if you have space to work in). Fill the background in with the color 7D7D7D
2. Select the rounded rectangle tool and make a rectangle on your page, fill this in with the foreground color, white. press d then x on your keyboard. your foreground color and background color should now be white and black. if this is correct, proceed to the next step.
3. Select your gradient tool and from the bottom of the rectangle, hold shift and move the gradient up, let go.
4. After this, give your image a gaussian blur of 1.5. If followed correctly, your image should now look like the following. Preview
5. Create a new layer, but ctrl+click on your first layer (the gardiented rectangle). so you're gradient rectangle is selected, but you're on the new layer. like shown Preview
6. Go-to Select > Modify > contract...contract this by 4. That dotted rectangle should now have moved in by 4pixels, like show. Preview
7. Fill this in with white, right click this rectangle and go to 'Blending Options'. Give it an (Leave the settings as default, just changing as stated below) Outerglow Blend Mode : Normal Color: Black Opacity: 75% Gradient Overlay Opacity: 41% Stroke: Size: 1 Opacity: 54% Color: Black Your image should now look like this Preview
YOUR NAV BOX IS NOW NEAR ENOUGH COMPLETE, IF YOU WANT TO LEAVE IT LIKE THIS AND JUST ADD YOUR TEXT, GO AHEAD. BUT OTHERWISE, FOLLOW ON.
8. Create another small rectangle just at the top of the current one, so it's like a small heading. Give it another gradient like the first box you did, but this time set the gaussian blur to 1.0, Set the opacity of this box to 16%, so you now have something like this Preview
9. Add some text 10. A few inset lines and you're done. :D Final Image:
Making a tech Logo, Menu and Buttons Set
This is a too long tutorial and In This Tutorial, we are going to make a Tech Logo with the Manu and its buttons set together.
For this job, first wee need to create a New Document in our desired size, the size, which we like, our logo be in, we should choose the wide similar to our forum wide.
For example, here I have chosen 750 as wide and 200 as height.
Then we need to create a New Layer on it and then start to create basic shapes on it.
For this job, you need to choose Rounded Rectangular Tool from your Photoshop Toolbar and create a Rounded Rectangular like mine:
Image
Now again create a New Layer, again choose Rounded Rectangular Tool, and create another smaller rounded Rectangular in the left side of the bigger Rectangular.
Image
Now, go to Menu, Edit and from there choose Transform Path and then Skew. Now try to deform your shape like mine:
Image
Now until here, we are going to add effects on both Rectangular which we have created before. First, choose the first Rounded Rectangular shape layer and add these effects on it gradually like me:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Effect 7
Effect 8
(To add effects, Double Click on the Layer, then a box will appear to you, and then start adding effects like me)
Now you should have something like this:
Image
Now you should add all those effects again on the second rectangular layer. For this job, you can Right Click on the bigger Rounded Rectangular Layer and choose Copy Layer Style, Then another Right Click on the Smaller Rounded Rectangular Layer and choose Paste Layer Style.
Now you must have something like this:
Image
Now, we are going to add other parts. First, we work on Bigger Rounded Rectangular shape. First, create a New Layer and then choose Rounded Rectangular Tool from your Photoshop Toolbar, and create another Rounded Rectangular like mine:
Image
Now add these effects Step by Step like me again on this New Rounded Rectangular. First a right click on the New Rectangular layer, an effect box will opens to you and you need to add these effects on it:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Effect 7
Now again create a New Layer, Then press CTRL and choose this new Rectangular layer to make it selected like this:
Image
Now, is the time to adding Brushworks on the New Layer, which you have created before. Choose Brush Tool from your Photoshop Toolbar and add Brushworks like mine:
Image
I have used d31 Brushes, which I have downloaded from Deviantart. Now go to Menu, Image and from there Adjustments and then choose Hue and Saturation and choose this format and numbers like me:
Image
Now you must have something like this:
Image
Now your Rounded Rectangular Layer is selected yet, you must choose your Brushwork Layer and go to the Menu, Edit, and choose Stroke.
Now you need to add a dark Stroke in 2A2A2A color, Outside and 1px size, and then click on OK.
Now you must have something like this:
Image
Now create a New Layer again, and choose Rounded Rectangular Tool from your Photoshop Toolbar and create a little Rounded Rectangular and use Skew on it to make it fit with the smaller Rectangular like this image:
Image
Now add these Effects Step by step like me on this new rounded rectangular, Right Click again on the new rectangular layer, an effect box appears to you, now add effects:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 5
( Color = B7E1F7)
Effect 6
Now you must have something like this:
Image
Now create a New Layer again, we are going to make a shape like a pipe between Bigger Rounded Rectangular and Smaller Rounded Rectangular.
Now create a New Layer and then choose Rectangular Marquee Tool and set its Feather to 5 px and create a square and fill into it with black color. Choose Paint Bucket from your Photoshop Toolbar and then fill into it like this:
Image
Choose that Rectangular Marquee Tool again and create another square like the image and then Press DEL on your keyboard like second image:
Image 1
Image 2
Now change the Feather of Marquee Tool into 0px again and create another square like this image and press DEL on your keyboard like second image:
Image 1
Image 2
Again create another square like image 1 and press DEL on your keyboard like image 2:
Image
Now you must have something like this:
Image
Duplicate your layer and then create another new Layer on it.
Now you need to choose Brush Tool and choose Rounded Brushes and set its size as 5 px. Then start to adding these lines on a New Layer. Like the image:
Image
Now choose your First Duplicated Layer, the First Cuted Square Layer and press CRTL on your keyboard and then Click on Your New Layer which you added lines on it to make it selected. Then Press DEL on your keyboard.
Now you must go back to your First Cuted Square Layer and add these Effects on it Step by Step:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Effect 7
Effect 8
Then choose the Duplicated Layer and press CTRL on your keyboard and then Click on it to make it Selected and then choose Paint Bucket From your Photoshop Toolbar and fill into it with your favorite color, here I have used a light blue.
My image after adding effects and colors is like this:
Image
Just after all works I have explained you at the top, you can work on the pipe yourself and make it well groomed and match with your other parts of header.
Now here we are going to add a text and some objects on the bigger Rounded Rectangular. How about some circles?
For this job, first create a New Layer, then start creating a tiny circle by using Ellipse Tool from your Photoshop Toolbar :
Image
Now you need to add these Effects on your Circle Layer step by step like me:
Just double Click on the circle shape layer and then an Effect box will appear to you, now add effects:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Now you must have something like this:
Image
Now first create a New Layer, then choose Ellipse Tool again from your Photoshop Toolbar and create another circle but this time in a smaller size:
Image
Now again, double click on the layer and add all previous effects, which we added on the bigger circle, here, also you can do something different.
First a Right Click on the bigger Circle Layer and choose Copy Layer Style, then a Right Click on this new Smaller Circle Layer and choose Paste Layer Style.
Now you must have something like this:
Image
Now you need to create a New Layer, then choose Ellipse Tool from your Photoshop Toolbar again and create another smaller circle to complete the decoration.
Here again you need to add all previous effects on the smaller circle. After that you must have something like this:
Image
Attention! : all these Decoration which I have added, is something for example, you can add your desired decoration on your logo. Also you can choose your favorite colors. Here I just like to show you how you can assemble objects and use effects and brushes to create a logo. All is just for example.
Now is the time to add your Forum’s name on your logo. First create a New Layer, then choose Text Tool from your Photoshop Toolbar and add your text on your logo. Here I have chosen Mingle Font you can download from Dafont and its size is 36.
After creating your text, now is time to add effects on the text. Text effects are completely up to you. Here I have added these effects on my text, you can add on your text too:
Effect 1
Effect 2
Effect 3
Effect 4
Effect 5
Effect 6
Effect 7
Effect 8
Effect 9
Now you must have something like this:
Image
Now create a New Layer again and add a text or something you like on the smaller Rounded Rectangular. Here I have added a text.
When you added the text, you can add your desired effects on it, just Remember here because of the animation which we are going to have on this text, wee need to have a Color Overlay Effect. In the first Text, I have used This color code 03F9F6 as Color Overlay Effect. Now you should have something like this, just remember your effects maybe are different from mine. Just Color Overlay is the same:
Image
Now go to Menu, Layer, and from there choose Duplicate Layer, now you have another copy from your Second Text Layer. Go to this New Duplicated Layer and there, choose Color Overlay from Effects in Layer Palette and double click on it, now you need to change the Overlay color into another color, For example here I have chosen FFFF00 color, or Yellow color as Duplicated Layer Color Overlay:
Image
Now Create a New Layer and then choose Rounded Rectangular Tool from your Photoshop Toolbar and create a tiny Rounded Rectangular like mine:
Image
Now here you need to go to Layer Palette and choose the Small Rounded Rectangular Layer and right click on it, choose Copy Layer Style. Then come back on your new Tiny rounded Rectangular Layer and right click on it and choose Paste Layer Style.
By this job, you must have something like this:
Image
Now go to the Menu, Layer, and from there, choose Duplicate Layer and create a copy from this Tiny rounded Rectangular and then move it to another corner of your banner by arrows on the keyboard.
Now you should have something like this:
Image
Now it’s the time to add animation on our logo. Send your image to ImageReady, now there you need to first turn off the eye beside the duplicated layer:
Image
Now go to the Animation Palette, Set the time on 0.2 and delay forever. Now create a new Frame and then go to the Layer Palette and now turn on the eye beside the duplicated Layer. Now your animation is ready, you can go to the Menu, File, and from there choose Preview in Browser. Now you can see your image in the Internet Explorer Window.
Its time to save your image. If you like you can add more decoration on your logo, but here, because its just a practice, I’m going to save it here in Image Ready.
For this job, you need to go to Menu, File, and then from there choose Save Optimized As, and save it as gif image, (Animated Gif)
Here you have finished your job on the logo, and now its time to start creating menu and its buttons.
Here something is really important for you to make your menu and its buttons completely match with your logo, you must remember the size of the space between two tiny Rounded Rectangular. You can find it by using ruler in the photoshop. If you like to see Ruler in your Photoshop page, you need to press CTRL+R on your keyboard, now Ruler appears on your Photoshop page.
Now you need to right click on the ruler and there choose Pixels and by this way, find the size of the space between tiny rounded rectangulars.
Now we are going to make menu and then its buttons. For this job you need to create a new document in your forum wide size. Here I have chosen 750px as wide and 80 px as height.
Now first you need to create your menu butoons background in the size of the space between tiny rounded rectangulars in logo just you need to create this shape a few bigger than this space to make it match with your logo.
Here first create a New Layer and then choose Rounded Rectangular Tool from your Photoshop Toolbar and create a Rounded Rectangular from 50px on your Ruler to 450, and then add it all Effects which you have added on the bigger Rounded Rectangular when you was creating the Logo, also you need to move it a few to the bellow and let a few free space at the top for decorations. Now you must have something like this:
Image
Now it’s the time to add some Decoration on your Menu, remember here we need to add this menu to the Logo, for this job, we need to make pipes like which we created to connect Bigger Rounded Rectangular to Smaller Rounded Rectangular.
Then create a New Layer and create pipes again, here you can create a pipe like image and then duplicate both its layers and move them to another side to have something like this:
Image
(Put these pipes by using ruler on 51 and another on 410.)
Now your menu background its ready, but if you like you can add some decoration like this images on it as your taste:
Image
Now your menu background is ready. If you like to have PM bar also, you can create something like menu bar but a few smaller, beside menu bar for PMs. Also you can attach it to the logo by adding pipes or something like on this.
Also you can use your Smaller rounded Rectangular as your Pm bar. All of them is up to you and you can make it yourself by your taste.
Now here you have menu and logo and just need menu buttons match with your menu bar. For this job you need to use , menu bar background and create buttons from that background, when you saved you menu, let it be open and now start adding your menu buttons texts on the menu background first like this:
Image
Now you must choose Crop Tool from your Photoshop Toolbar and Crop them one by one:
Image
After Crop, you will have something like this:
Image
This is your Home button. Now you can save it. If you like to have Rollover menu buttons, you need to save it as Home_off.
Now to creating next button, you should first press CTRL+Z on your keyboard to undo your action, now choose next button to Crop:
Image
And about all other buttoms you need to repeat all previous actions. And remember to save all of them “Button_off” if you like to have Rollover menu buttons.
When you finish your work on all your buttons and saved them, you need to make your ON buttons for your Rollover form.
Open your button. Then go to Menu, Image, and Adjustments and from there choose Hue and Saturation and set the setting like mine:
Image
Your ON button is ready, now you just need to save it as “Button_on”
And you must do this on all other buttons to create your ON buttons.
Finally, this job has finished and now you have your logo, menu and its buttons completely match together.
Just you need to put them by their codes in your forum. Please for any questions, post here, also if you need more explains about a part in this tutorial, post here I will post here for you more explain.
Now I just made this tutorial as a sample for you to show you how you can make a tech logo and menu and its buttons.
I will post another tut here for you about making Pipes in several forms and styles, to show you how you can make Tech Pipes and add on your logo and somewhere you like. Also here I have choose a white background to show you everything better, you can choose your desired color for the background.
Enjoy!
and it will be your banner and menu with a button after you added into your forum.
Final Image
here maybe I have some faults because I have made it so hotfoot. please if you see something wrong post here, Ill edit it :)
thanks
Created By Ellen
Making Menu Grad & Menu Buttons Set
Step 1:
Open up an image, and make it the width of your forum. The height should be between 25 and 30. For the purpose of this tutorial, we will use the height as 30px.
Step 2:
Click on the gradient tool. (right click on the paint-bucket tool if you do not see it)
Step 3:
Open up the gradient editor menu. Put in the colors that you would like to use for the gradient. We will use 1d1d1d and 8f8f8f as ours.
Step 4:
Now, do you see the field with the words "Custom" typed in already? Now you will type in the name you would like the gradient to be called. After you do this, click on the "New" button next to the field.
Step 5:
Now, we are going to make sure we get an even gradient on the buttons and menu background. To do this, click on the fill tool (Paint Bucket). Now, fill in the entire canvas using it.
Step 6:
Now, open up the blending options menu for the layer. Go to "Gradient overlay." Since you already made your gradient, all you have to do is click on it in the gradients list.
Step 7:
Now, save the image something like "Menu BG image" and you are done with the first part.
Step 8:
Next, we are going to make the buttons. First, open up a new file that is 30px in height and around 90px wide. (you can crop the width to fit later, this is just to make sure the word fits)
Step 9:
Now, using the fill tool (paint-bucket) like before, we are going to fill the entire canvas with a dark gray, or other color.
Step 10:
Now, open up the blending options for the layer with the gradient. Go to the Gradient Overlay box, like before. Now, since you already made the gradient before, just click on it and click ok. Now your button gradient matches your menu background gradient perfectly.
Step 11:
Now all we have to do is add the text for the particular button, and it now resembles what it should! Step 12: It looks a bit big though, doesn't it? If so, we can just use the cropping option to get rid of blank space. (Use the rectangular marquee tool to select only what you want as the button, and go to image-->Crop and get rid of the rest) Now you have a good looking button!
Experiment now. Try adding little extras, like dividers and text effects to improve the look!
Created by ~CrAzY~ and Ellen
Realistic Tape
Tutorial: Tape in Photoshop
1: Make a new document (300 by 300) and press Ctrl + A to select all.
2: Make your foreground colour 7B0000. Right click the canvas and choose "Fill". Choose foreground in the dropdown list. Hit Ok.
3: Make a new layer (ctrl + shift + N) and press D and then X on your keyboard.
4: Choose the "Rectangular Marquee Tool" and make a selection similar to this:
5: Choose the "Lasso Tool" and hold down the Alt button and make a selection (that deletes) like this:
6: And do the same in the bottom so it looks similar to this:
7: Right click the canvas and choose "Fill". Choose foreground in the dropdown list. Hit ok. 8: Go to the Layers pallete and reduce the Opacity to 90%.
8: Make a new layer (Ctrl + Shift + N) and click on the "Brush Tool" and right click the canvas, click the little, blue arrow that points right and choose a grunge brush (big enough to fill the selected area. (Go to [url=http://google.com]Google[/url] and search for "grunge photoshop brushes" if you do not have any.)
9: Press D on your keyboard. Now click once in the selected area and go to the Layers pallete and change the Opacity to 9%.
10: Merge the grunge layer with the white tape layer. (Ctrl + E.) 10: Press Ctrl + t to move the tape. This is what I got:
Here I have illustrated the see-through on different colours:
Enjoy! :D
Shiny Bar
Shiny Bar by hpmad
1. Open a new canvas about 500x20 pixels or so.
2. Create a new layer and name it "Bar". Fill this layer with a color. It can be any color you want. Click for screenshot
3. Create a new layer. Name it "Top". Ctrl+Click the "Bar" layer to load the selection. Make sure you are still on the "Top" layer. Click for screenshot
4. Hold down Alt and select the bottom 1/3 of the loaded selection from the last step. You should now have about 1/3 of the image selected on top. Click for sceenshot
5. Again, make sure you are on the "Top" layer. Fill this selection with any color, only a lighter shade. Click for screenshot
6. Choose the Move Tool (V) and press the down arrow key about 1 or 2 times to nudge the top part down a little bit. Click for sceenshot
7. You now have a professional looking bar! Experiment with some gradients or blending options to see what you can come up with. You can add text and even use the slice tool to make a menu bar! This is what I came up with: Click for screenshot
Shiny Buttons
I'm going to show you how to make something like this: Preview
1. Make a new image, around 60x25
2. Fill it with a dark grey to white gradient
3. Right click that layer and go to blending options: Use these settings: Inner Shadow Stroke Gradient Overlay When you use stroke, you need to make the colour close to the background of your buttons.
4. Make a new layer
5. Select the single column marquee tool and then place the selection to the left or right. Go to Select>>Modify>>Expand
6. Fill the marquee with a colour that will stand out, I'm gonna use orange because it looks cool.
7. Right click that layer and go to blending options. Use these settings: Preview
8. Then add some text in a pixel font. I used 04b_8 which can be downloaded from www.04.jp.org
9. Use these blending options Preview Simply go to Image>>Duplicate if you need more than one button.
Simple Orb
Creating a simple orb, complete with glow, in Photoshop using the gradient fill tool and selection tool. You will also be using the feather feature of the selection tool.
Simple Orb
start a new document, size doesn't matter
Take the rectangular marquee tool and alt click it until a circle appears then draw a circle Fill it with black and go to blending options. enter these settings:
Drop shadow: default
Inner shadow: default
Bevel and emboss: size 100
Color overlay: colour of you choice
Gradient overlay: scale 84% you should have something similar to this:
Control and click the layer where you orb is so you select it Make a new layer beneath the orb. Go to select->modify->expand and make it 5 Go to blending options and use these settings: Drop Shadow: default Bevel and emboss: default Colour overlay: 645252 Here is the end result:
Or you can add a pattern like in the image below:
Steel Bordered Orb
1) Open a new file. The size should be at least 250x250.
2) Duplicate the background layer. You should now have two white layers.
3) Select the eliptical marquee tool
4) Select a circular shape similar to the following one:
5) Fill the circle with A6A6A6
6) Use the magic wand tool (press w) and remove the white part of the image.
7) Create a new layer. (it should be transparent)
8) Create a circle in the new layer similar to the following:
9) Fill it with FF00BA
10) Use the magic wand tool (press w) and select the pink circle.
11) Select the layer with the greay circle on it and press delete.
12) Now go to layer>layer style>blending options
13) Select "Bevel and Emboss" with the following settings:
14) Select stroke with the following settings:
15) It will look something like this:
16) Select the layer containing the pink circle and go to layer>layer style>blanding options
17) Select "Inner glow" and enter the following settings:
18) And select "stroke" with the following settings:
19) It will look something like this:
20) Go to filter> render> lens flare
21) Do the first one on the south east of the circle with the following settings:
22) Do the second one on the north west of the circle with the following settings:
23) The Result:
Website Interface Lesson 1
Basic Techniques Tutorial
Part 1: Basic Content Boxes
Alright, this tutorial is going to bring you into the world of creating a website using Photoshop. Im going to first make a bunch of mini tutorials on some techniques I use when creating website templates. The first thing that I always make, so that I can get a feel for making the rest of the site, is to make my content box. A content box is the little square/cirlce/area that you will be placing all your text in. This is a very important thing because you dont want it to overpower the text, but you also want it to be appealing to the majority of visitors to your site.
Lets start by creating a new document, 800x500. The reason I have so much space is because I make everything big first, then shrink it down.
Now on your new document, fill the bottom-most layer with D5D5D5 and name this layer Background. No preview needed for this. The next thing we do is select our Rounded Rectangle tool. Now draw, with white as your color and a radius of 20px, a rounded rectangle that fills appoximatley 95% of the document.
Now we need to rasterize the layer to make it easier to work with. This is done by right clicking the layer and choose "rasterize layer." After that, press "M" or select rectangle marquee tool and select a good portion of the our rectangle, about 85% of the image and press delete.
Now we will begin filling our layer. It is best to fill it with a gradient because that makes the image just that much more appealing. Press CTRL+SHIFT+N to create a new layer, name this layer "gradient." Hold control and click the layer named "Shape 1" to select everything contained in that layer and select the gradient tool from your tool pallete. Set the background color to D5D5D5 and your foreground color to E5E5E5. Now in your select area, on your "gradient" layer, drag from top to bottom until you have something that resembles this. Now this is where most people make a mistake, they go to blending options and stroke this layer. That is the wrong way to do it as you will end up with a rigid and not smooth stroke. What we will do instead is create a new layer named "Stroke" and position it below our "Gradient" layer. Now CTRL Click the "Gradient" layer and choose from the menu at the top Select -> Grow -> Expand and expand the selection by one pixel.
Now press D to return to your default colors (Black/White) and then press SHIFT + BACKSPACE to bring up your fill menu. Choose fill by foreground color, and press okay. You should havea smooth stroke now.
Sometimes you may want a different border color, so mess with the opacity of the "Sroke" layer to get one that better suits your needs. For now, I am going to stick with generic old black. The next thing we are going to do is add a line to the gradient to give it more of a 3D effect.
Start by creating a new layer named "White Line" and then select your 1px Horizontal Marquee tool. Position your mouse at the top most pixel of the "Gradient" layer and click. Make sure it isnt in the black, but one pixel down from it.
Now make sure you are on your "White Line" layer and fill the selected area with white. Make sure your foreground color is set to white and press SHIFT+BACKSPACE and Enter and it should all be done for you. It may not look noticeable right now, but it will once we add the other parts of the image.
You might be thinking, "How do I get rid of the excess on the sides?" Easy! CTRL Click your "Gradient" layer and then press CTRL+SHIFT+I to select the inverse. Now make sure you have the "White Line" layer selected and press Delete.
Now we are going to start making this thing look pretty. Choose a blue-ish color because blue jsut seems to always work with whites and silvers. I choose 22289F. Now select your Elipse Tool and draw three small circles on the right end of your image.
Now Rasterize those layers using the same method from one of the previous steps. Now to make things easier to work with, we are going to merge these three layers togather. Name the layer Circles. Now CTRL Click this layer, go into your "Gradient Layer", do the Select -> Modify, except this time, contract the selection by 1 pixel and press delete. Drag the "Circles" layer below the "Gradient" layer.
Now the next step is to fade these circles into the gradient. CTRL Click your circles layer again and make sure your "Stroke" layer is selected and press delte. Select your "Circles" layer again and send the opacity of it down to 34%.
This next step might be a little bit tricky, so pay close attention. What you need to do is select another blue color, a little lighter then the one from before and then select the Elipse tool again. This time, draw a big oval in the middle of your document and Rasterize it. Now manuever it above your gradient layer so that the majority of your gradient cannot be seen but you can see the White Line.
Now position the circle in a spot where it will be attractive, covers the right side of the image, and you cannot see any of the bottom of our main gradient layer.
Now you may notice I am going a bit fast, the reason is because I assume you know basic tasks and have picked up the ones I have mentioned before and know how to do them now.
CTRL Click the "Gradient" layer so that you have it all selected, select the inverse (CTRL+SHIFT+I) and make sure your "Shape 2" layer in your Layers Pallette is selected; press delete.
Now, with the "Shape 2" layer selected, send its opacity down to something where the white line is noticeable and the circles are still darked then it. You may need to modify the opacity of the "Circles" layer.
OPTIONAL: Now that I am at this point, I have decided that I want my stroke to be a bit lighter, this is okay since the stroke is in a totally seperate layer. Send the opacity of the "Stroke" layer to 21%. You dont have to do this, but for the rest of the tutorial, that is what my stroke will look like.
The next step is to make some sort of seperation between the gradient and the shape. This is not very hard to do. What I did was add a bevel and emboos effect to the layer. Bring up your "Blending Options" pallete for the "Shape 2" layer and mimic the following settings:
Now that white line is looking a bit abnoxious, isnt it? What we have to do now is simply drop the opacity of it to somewhere between 20% and 25%. This will make our gradient and shape blend better also. No preview necessary.
The next thing we need to do is make a Layer Set. Name the Layer Set "Top Grad" and place all current layers except the background layer in it, make sure you dont mess up order of the layers and if you do, it shouldnt be hard to place them in the correct order again.
To create the bottom portion of our box, we are going to simply duplicate the layer set and flip it vertically, pretty simple, huh? Doing things this way saves us time because we dont need to recreate the same image from before. Before moving this new gradient any, go to Image -> Trim and choose Trim Transparent Pixels. You won't notice any changes, but you have just deleted any parts of that circle we drew that ended up outside of our document.
To give this new grad some individuality, flip it horizontally too. Your document should look like this now: (You may need to reposition the bottom grad a bit)
To cnnect the two boxes, we are going make a new layer above the background layer, but under the Top Grad layer set. In this layer, draw black lines to connect the top to the bottom image and then make the opacity of this layer the same as the opacity of your stroke layer. On the inside of the black lines, draw white lines do give the box a beveled appearance. It helps to zoom in really close to the image on this step. If you have lowered the opacity of your stroke layer, you may not notice these white lines very much, but they will make all the difference.
To seperate your content area from the background layer, choose your Rectangle Marquee tool, make a new layer and choose all the area inbetween the top grad, bottom grad and the side lines. Name this layer "Body" and fill it with a color that is a bit lighter then the document background, try colors like E5E5E5, E6E6E6, D8D8D8 or any other silvery-white color.
Well, we are done, now all we need to do is trim out image. Go to your background layer and hide it. Now go to Image -> Trim and trim by transparent pixels. This should make your image a lot smaller and only make the content box the visible portion.
In the next lesson, I will show you how to use this image multiple times and how to create easy to use and attractive interfaces. Make sure you save the PSD of this image because if you dont, you will have to recreate it over and over again and thats no fun.
Good luck, have fun, see what you can do with these images.
A good portion of this tutorial can be used to create attractive top/bottom images for your Proboards forum also :)
Wires
1) Assuming you have the image open which you want to add wires to already, create a new layer, and with a 9px brush, draw the rough shape of how you want your wire to look: Preview 2) Create a new layer on top of the wire layer, and select a darker colour than the one used to draw the main wire. Start to draw lines over the top of the wire: Preview Contine to draw lines until you have an image like the one above. 3) Having the lines layer still selected, Ctrl + click on the original wire layer. Press Ctrl + shift + I, then hit delete. This should get rid of the excess lines: Preview 4) Merge the lines layer to the wire layer (Ctrl + E), then select the burn tool. Set the exposure to as high as you want it (higher for a darker shadow), then choose one edge of the wire you wish to have a shadow on. Use the burn tool to go across that edge. This will give the wire a more 3D look: Preview Now, if you got it right, you should have something that end up like this (NOTE:: The Orbs were made seperately, quite obviously) Preview
Wires
Step 1. Open up a new Document and use these settings
Step 2. Fill the backround with 222222 using the paint bucket tool.
Step 3. Set your foreground color to black(000000).
Step 4. Click on the brushes panel and find the round brush with the diameter
of 13. Hint: adjust the master diameter to 13 to locate it quickly.
Step 5. Create a new layer. Name it Wire.
Step 6. Make a long stroke on the canvas where you want your wire to be.
Step 7. Left click on the wire layer> Blending Options. Use these settings.
Drop Shadow:
Bevel and Emboss:
You should have something like this:
Step 8. Now you we need to add some segments onto it to make it look more wirey.
Make a new Document
Zoom in to 1600% and grad the pen tool and make the pixel on the far left black.
Now go Edit>Define Pattern> Name it "Wire Segmant".
Step 9. Go back to the image with the wire on it and open up blending options.
Use this setting
Texture:
Click OK and your done. This is what I got
Here are some examples of things I've made using this.
I hope you enjoyed reading this tutorial and learned something from it. Wires are one
of my favorite things to make!