MODERN LAYOUT TUTORIAL

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:

MODERN LAYOUT TUTORIAL; credits by: ka paul of fm
Topic Started: Apr 3 2007, 04:31 PM (1,877 Views)
ayiz	Apr 3 2007, 04:31 PM Post #1
random</3 Posts: 4,072 Group: Moderator Member #1,082 Joined: February 4, 2007	by ka Paul of friendstermagic MODERN LAYOUT TUTORIAL - ADOBE PHOTOSHOP [ADVANCE USER] 1. Open a new document in photoshop with a white background. Size should be 760x770 pixels. 2. Select Rounded Rectangle Tool ( set radius to 20 pixels ) and draw a simple grey rectangle. Posted Image Posted Image 3. Next go to Edit > Transform Path > Warp and use the following settings: Posted Image 4. Hit Enter then with Move Tool place this shape in the middle of the canvas. If you want to resize the image, just press Ctrl+T and drag each corner to fit your size and click Enter. Posted Image 5. Now we will add some layer styles. Be sure you have this layer selected. Then add the following layer styles: Posted Image Posted Image Posted Image Posted Image Posted Image This is my result: Posted Image 6. Now hold the CTRL key down and press on the Layer Thumbnail with your left mouse click. Posted Image You will notice that you have selected all the layer: Posted Image 7. Now create a new layer ( press CTRL+SHIFT+ALT+N ) then go to Select > Modify > Contract ( Choose contract by 20 pixels ) and press ok. This is my result: Posted Image 8. Select Paint Bucket Tool and fill your selection with white ( or any other color you want ). Then press CTRL+D to deselect. Posted Image 9. Now select Rectangle Marquee Tool and drag it creating a box starting from the middle left side of canvas. Then click Delete. Posted Image 10. Now select Elliptical Marquee Tool and drag it creating an oval. Click Delete to remove the remaining parts. Then press CTRL+D to deselect. Posted Image This is my result: Posted Image 11. Now please add the following layer styles: Posted Image Posted Image Posted Image This is my result: Posted Image 12. Now we will add a navigation under blue header. First select Rounded Rectangle Tool and make a simple rectangle: Posted Image 13. Go to Edit > transform path > perspective and drag the left bottom corner to the left side and press Enter. If you want to resize the image, just press Ctrl+T and drag each corner to fit your size and click Enter. This is the result: Posted Image 14. Now add the following layer styles: Posted Image Posted Image Posted Image Posted Image 15. Now we will change the Layer order. Click layer 1 and drag it up. Posted Image This is the result: Posted Image 16. Now we will add some screws heads. Create again a new layer ( press CTRL+SHIFT+ALT+N ). Select Ellipse Tool and make a small circle ( hold down SHIFT key while you create this circle ) Then add the following layer styles: Posted Image Posted Image Posted Image Posted Image 17. Duplicated this layer a few times. Placed this small screw heads like in the following image. If you want to resize the each screw image, just press Ctrl+T. Hold down SHIFT key and drag one corner to fit your size and click Enter. Posted Image 18. Your web layout is done! Posted Image Just add the texts you needed on it. Have fun!
	nothinglast.forever.


zwit_mine	Apr 8 2007, 02:19 AM Post #2
Posts: 145 Group: Moderator Member #1,668 Joined: February 21, 2007	Posted Image :good: wOw niCe.. gaLinG mOh LeY muuaahhh :)
	dOnt cLick tHis pLeasE Quote: .:dOnt trY tO fiX me.. iM nOt brOken..:.


bhythm00	May 2 2007, 09:18 PM Post #3
Member Posts: 13 Group: Members Member #2,959 Joined: April 14, 2007	hahaha nice.... :good:
	Im a Losser Pazaway Pero Mapag-Mahal


jopatz	May 5 2007, 08:36 AM Post #4
Posts: 12 Group: Banned Member #3,951 Joined: May 5, 2007	POST in ENGLISH EDITED by Staff



ZERIUS	May 5 2007, 10:15 AM Post #5
lokohan na lol Posts: 12,400 Group: Members Member #5 Joined: December 27, 2006	:lol: post in english dude/dudette :D yeah most of us really dont know that a site called friendstermagic exists. FM members like u have harsh verbal words and that made ur site nonsense :-?
	You can discover what your enemy fears most by observing the means he uses to frighten you.


lojace	Jul 17 2007, 04:03 AM Post #6
"Rosario Institute-Junior Student" .. ^CavitE^ Posts: 1,395 Group: Administrator Member #6,193 Joined: June 3, 2007	Ahh!!!So this is how We can make a Lay-out... HiHiHiHi!!!! :banana:
	*.::Certified Badminton Player::.*


?MaRkEd	Aug 10 2007, 12:23 AM Post #7
Member Posts: 40 Group: Members Member #4,805 Joined: May 17, 2007	can you teach me how to make animation on text or image



coycoy	Aug 16 2007, 06:47 AM Post #8
"sparkler" Posts: 3,645 Group: Moderator Member #8 Joined: December 28, 2006	thank you ayiz
	____________ ________ 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<<<<<<<<<<<<


aufelle	Jan 31 2008, 06:49 PM Post #9
Member Posts: 1 Group: Members Member #18,792 Joined: January 31, 2008	zerius May 5 2007, 06:15 PM :lol: post in english dude/dudette :D yeah most of us really dont know that a site called friendstermagic exists. FM members like u have harsh verbal words and that made ur site nonsense :-? i think you shouLd be carefuL on what you were saying :]



ibanez	Mar 13 2009, 06:49 PM Post #10
Member Posts: 4 Group: Members Member #27,874 Joined: March 13, 2009	dude what happened to the pictures? can you upload the pictures again. thanks. i really really need this tut.



1 user reading this topic (1 Guest and 0 Anonymous)


« Previous Topic · Adobe Photoshops · Next Topic »