| We hope you enjoy your visit. Join our community! If you're already a member please log in to your account to access all of our features: |
| Creating an Interface Photoshop Tutorial 3 | |
|---|---|
| Topic Started: Dec 30 2006, 03:20 AM (1,707 Views) | |
| +SparkCom | Dec 30 2006, 03:20 AM Post #1 |
.
|
This is the third section of the 4 part tutorial on how to make a nice interfere. Make sure you have done sections 1 and 2 before you do this one. The first step is to make a section for your website's title to go it. So, use your rectangle selection tool to select a rectangle shape in the middle of your top title gradient. Fill it with a dark gray. Posted Image Now, using the same method as we used on the other navigation bar, make an inner bevel using the stroke option. (If you forget how to do this here is a reminder) Select your square, go to edit>stroke and stroke it with 1 px and a dark gray, or black. Now make a new layer and stroke it with a light gray. Delete some of the light gray border using the eraser tool so that it the light border is to the right, and bottom, and the dark border is to the left and top. You should have an image like the one below. Posted Image Now, I am just going to add a little flavor to the top. I make a new layer and selection a selection as shown below using the polygon selection tool. I them filled it with a dark gray and lowered the opacity to about 50% or less. Posted Image You should have an image like the one below. Posted Image Now for the harder part. We are going to add some detail to our side bar. Do do this we are going to use the 2 line inner bevel technique. Make a new layer and on it use your line tool to make a short line with a dark gray color with a thickness of 1 px. Zoom in to make things easier by pressing ctrl and + Posted Image Make another layer on top of your line and again, using the line tool, make a line with a light gray color and a thickness of 1 px Position your light line so that it is right below your dark line. You should have an image like the one below. Now, press ctrl and E to merge your two line layers, or go to layer drop down menu and select "merge down" Posted Image Now lower the opacity so that it looks about like the line below. Now come the fun/hard part. Duplicate your line layer. Use the rectangle selection tool to select and delete some of your line to make it a little shorter. Now go to edit> transform> rotate. Use this rotating tool to rotate your line so that it connects with the other. Keep duplicating and rotating until you have lots of lines! Posted Image Mine came out something like this. Posted Image I then merged all my line layers, duplicated the layer and placed a duplicate of my lines on the bottom right corner to add a little more detail to the bottom. Your interface is starting to come together now, your almost done ;) You should have an image like the one below. So, its on to the last and final tutorial! Posted Image This step is the easier of the 4. By now you should have just about mastered the art of making simple gradients so I am not going to go into too much detail for this one. Basically what we are going to do is add a spot for your content (text) to go. For this, select a rectangle shape that just about fills up the empty middle space from side to side and is not too thick. Use your gradient tool to make another gradient, making sure that the darker portion is on the top. Posted Image Now for the place were your text will be. Use your selection tool to select a large rectangle and fill it with a dark gray, slightly lighter that your bg color. Now just give your gradient a light gray border, and your rectangle content portion a darker gray border. I make two of these content boxes, one small and one big simple so I can have 2 sections for my page. Well, there you have it. You are all done, and you have a nice interface :) I hope you enjoyed the tutorial. Posted Image |
Never argue with idiots
| |
 |
 
|
| ZERIUS | Jan 2 2007, 10:05 PM Post #2 |
|
lokohan na lol
|
ill try it..i have bought an adobe software bwahah! sa wakas |
You can discover what your enemy fears most by observing the means he uses to frighten you. 
| |
|
|
|
| +SparkCom | Jan 2 2007, 10:14 PM Post #3 |
|
.
|
u bought bought? lolz! hope we can see your master piece soon :woot: |
|
Never argue with idiots
| |
|
|
|
| ZERIUS | Jan 2 2007, 10:17 PM Post #4 |
|
lokohan na lol
|
maybe after 50 yrs!!wahaha i hope im still alive and the spark wahah.. :woot: ill try to explore this software thingy bwahah anyway thanks 4 the tip hehe.. |
|
You can discover what your enemy fears most by observing the means he uses to frighten you.
| |
|
|
|
| coycoy | Jan 17 2007, 05:51 PM Post #5 |
"sparkler"
|
wow! that's cool! |
______ __________  ____I can see this place dying a sad and lonely death unless you take hold... I can see your IP Address dude! haha!   my Friendster >>>>>>>>>>>So Beautiful<<<<<<<<<<<< | |
|
|
|
| lordskillz | May 22 2007, 06:49 AM Post #6 |
Member
|
Q> how can i save it!! and se the codes and edit it in a notepad!! Circling in my mind is this (openwith a notepad !!) but when i do that i dint understand the txt inside of it!!hehe!!newbie kc e!!same the txt that i open with is like in the OG of markyctrigger.com!! can u teach me how!! |
  NEWBIE HERE.... FS >> click here!! | |
|
|
|
| kill3rb33 | Jul 8 2007, 09:54 PM Post #7 |
Member
|
where could i get the page source of the overlay that i created with adobe? :help: |
| |
|
|
|
| ZERIUS | Jul 8 2007, 10:16 PM Post #8 |
|
lokohan na lol
|
http://forums.sparkcom.org/index.php?showtopic=629 pls avoid double posting :) |
|
You can discover what your enemy fears most by observing the means he uses to frighten you.
| |
|
|
|
| kill3rb33 | Jul 10 2007, 07:35 PM Post #9 |
|
Member
|
[SIZE=7]I'M SORRY ABOUT THAT DOUBLE POST. AGAIN, WHAT I WANT TO KNOW IS ON HOW TO GET THE CODES FOR ADOBE-CREATED OVERLAYS, BECAUSE ON YOUR REPLY, IT IS FOR DREAMWEAVER. THANKS IN ADVANCE!!! :rolleyes: |
|
| |
|
|
|
| kill3rb33 | Jul 24 2007, 07:09 AM Post #10 |
|
Member
|
I'M SORRY ABOUT THAT DOUBLE POST. AGAIN, WHAT I WANT TO KNOW IS ON HOW TO GET THE CODES FOR ADOBE-CREATED OVERLAYS, BECAUSE ON YOUR REPLY, IT IS FOR DREAMWEAVER. THANKS IN ADVANCE!!! |
|
| |
|
|
|
| +ambot | Jul 26 2007, 05:47 AM Post #11 |
Janitor
|
pls try to read this tut http://forums.sparkcom.org/index.php?showtopic=1277 |
 --->  <---
| |
|
|
|
| spenzan | Aug 9 2007, 07:32 AM Post #12 |
Member
|
hei that's a lot of help thanks, i had made a layout like that but i cant put links on it can i ask a favor to you? please post a tutorial on how to put links on the layout please please please? :wacko: |
| |
|
|
|
 unyot11
|
Aug 9 2007, 06:15 PM Post #13 |
"you're my dream come true ♥♥♥"
|
follow this link spenzan, it will help with your prob
:D http://forums.sparkcom.org/index.php?showtopic=1277 |
 | |
|
|
|
| spenzan | Aug 10 2007, 03:43 AM Post #14 |
|
Member
|
uhmm i arealdy saw that but i dont have the macromedia dreamweaver ultradev software, i only had the adobe dreamweaver. do you have tutorials that is compatible with the software? please help please please? |
|
| |
|
|
|
| 1 user reading this topic (1 Guest and 0 Anonymous) | |
| « Previous Topic · Adobe Photoshops · Next Topic » |
11:44 PM Jul 30
