PortalHomeFAQRegisterLog in

Share | 
 

 How to make your own Layout using only Photoshop ^^,

Go down 
AuthorMessage
+ps.Krzteli
Forum Moderator
Forum Moderator
avatar

Number of posts : 338
Age : 27
Location : here
My Mood :
ShoutOut : Howdy!!
Country :
Reputation : 0
PS Points : 0
Registration date : 2009-01-08

PostSubject: How to make your own Layout using only Photoshop ^^,   Mon Jan 26, 2009 12:54 am

Screenshot:


Hi! I made this tutorial for those who want to make their own web layout. This is so simple. All you need are:
1.Adobe Photoshop
2.Images from the net
3.Net connection
4.Time and patience

Here,
i used two sets of brushes only. We will use the basic photoshop tools:
Slice, Brush, Paint Bucket, Move, Text, and the Rectangle tools.

I
didnt make a sample tutorial (because i dont want anyone to copy-paste
it without my permission /lol). Please DONT RIP! Anyone posting this to
other sites will...die../pis

Lets start!

1. Create a new document.
Follow:
File > New > input the width and height. We will create a layout
so the width must be wide enough. You can use other size (the size here
is quite big though).


2. Painting the Background.
Follow: Click the Paint Bucket tool . Then click the Set foreground color and choose black. Click on the work area to color it black.

3. Creating box/border.
Follow: Click the Rectangle tool . See the properties above, there should be no style. And beside it, pick a color you want. (see image)

Create a box in the middle. (see image)


4. Creating a new layer
In
the Layers window, click Create a New Layer (see image). You can create
as many layers as you want depending on the style of layout you want,
whether the brush be in front of the box, or behind it. Just drag the
layer up or down.


5. Brushing up!
Here's my favorite part, brushing!
Click the Brush tool . Choose a set of brush. You can download brushes in DeviantArt or click this for Brush and Font Links
Now we will have something like this (see image). I added a new layer for the other brush to look a bit outside.


6. Adding Navigation
Click
again the Rectangle tool and create your navigation boxes. Duplicate
the layer so it would all have the same sizes. You can free transform
it by CTRL T so it may look like no in place eheh! Use the Move tool to
move it. You can also put your pic there or anything you want to put ^^,

7. Adding Text
Click the Text tool and type in the About Me, My Photos, Credits, Chatbox, Music, Home, etc...

8. Add some images from the net. (the metal thing) And you'll get something like this. (see image)


8. Slicing
Now here comes slicing the images so it can be used in web.
Click the Slice tool
and slice the About me, My Photos, Credits, etc.. (those that you want
to have a link on it). And we will have something like this (see image)


9. Adding link
Now click the Slice Select tool
(its just behind the Slice tool, right click it to see). For example,
double click the PxDesign. A Slice Option will appear (see image). Type
in the URL where you want to link it.
the URL i placed here is directed to PxDesignz site.
http://www.pxdesignz.net/forum.htm
...and do the same thing on the others.


10. Saving
Now,
were done in making and slicing the layout. Click File > Save for
Web and Devices. A new window will appear. Just click Save. Be sure to
save the right format : HTML and Images (see image)


11.
Open up the folder where you saved it, and the file will look something
like this. ( I used Firefox thats why ehhe) see image

Double click it and it will open up your own made website! ^___^


Original post: Krzteli
DONT RIP DONT RIP DONT RIP DONT RIP DONT RIP DONT RIP DONT RIP DONT RIP DONT RIP DONT RIP DONT RIP DONT RIP
Back to top Go down
View user profile
drew14
Member
Member
avatar

Number of posts : 5
Age : 31
Location : los baños laguna
ShoutOut : stay put...
Country :
Reputation : 0
PS Points : 0
Registration date : 2009-01-02

PostSubject: Re: How to make your own Layout using only Photoshop ^^,   Thu Feb 12, 2009 4:21 am

ahhmm ndi naintindihan hehehe...
Back to top Go down
View user profile
+ps.Krzteli
Forum Moderator
Forum Moderator
avatar

Number of posts : 338
Age : 27
Location : here
My Mood :
ShoutOut : Howdy!!
Country :
Reputation : 0
PS Points : 0
Registration date : 2009-01-08

PostSubject: Re: How to make your own Layout using only Photoshop ^^,   Fri Feb 13, 2009 3:04 am

hehe you should have Adobe Photoshop first for you to understand ^^,
Back to top Go down
View user profile
Yagami Light
Cool Member
avatar

Number of posts : 171
Age : 25
Location : negros or. PH // Seoul korea co ngaun :))
My Mood :
ShoutOut : put your freakum dress on \m/
Reputation : 0
PS Points : 0
Registration date : 2008-11-29

PostSubject: Re: How to make your own Layout using only Photoshop ^^,   Thu Feb 19, 2009 10:46 pm

Thanks :]
Back to top Go down
View user profile
Sponsored content




PostSubject: Re: How to make your own Layout using only Photoshop ^^,   

Back to top Go down
 
How to make your own Layout using only Photoshop ^^,
Back to top 
Page 1 of 1

Permissions in this forum:You cannot reply to topics in this forum
PinoySoft :: Tutorials :: Photoshop or PhotoEditing Tutorials-
Jump to:  
  Affiliates » [Link Us|Apply]
PinoySoft PXDesignz XtremeShare CodecDesignz JLdesignz Creeps-Design BlogSpreads ALCT Techtrip GFX Core PinkFab PinoyPandesal
Site Owned by:Noscire
Copyright © 2008-PinoySoft
http://www.pinoysoft.net
Free forum | © phpBB | Free forum support | Contact | Report an abuse | Forumotion.com