Welcome!

Join our community of MMO enthusiasts and game developers! By registering, you'll gain access to discussions on the latest developments in MMO server files and collaborate with like-minded individuals. Join us today and unlock the potential of MMO server development!

Join Today!

Web [Tut]Photoshop Techniques -- CMS Design

Status
Not open for further replies.
Newbie Spellweaver
Joined
Apr 13, 2008
Messages
91
Reaction score
1
Introduction:
I think I have stressed this enough, but most server's websites are, poop. I'm not going to single any out, but It's true. For those servers that do make an effort to design their own website, good job. But, for those people that just leech pages, buu!
Throughout this guide I will be telling you some photoshop techniques I use for some basic websites.

Contents:

  1. File Formats
  2. Layers
  3. Blur
  4. Patterns
  5. Gradients

Tools:
Photoshop Cs3

1. File Formats:
Hrm, file formats. These are probably thought of the least when it comes to designs. The file format DOES have a part in the design of your website.

PSD - Just use this as your "basic-photoshop-file-work-in-progress-format" or BPFWIPF.

PNG - You will use these when you have transparencies, or even just for the best format. Sure, they use alot of space, but it's quality that you are aiming for.

JPEG - This is probably the most used format there is. It uses the least amount of space, but it gives you one of the worst pictures, unless it's set to max quality on photoshop, by which takes up more space then the PNG format.

GIF - Just used for animations, don't use it for anything but animations.

BMP - Really, really, really, small pictures with a minimal amount of colors.

In the end, use PNG all around, please.

2. Layers:
Always, make a new layer. Even if it's just for a small button. I don't care, make a new layer. Later you can always merge two layers that are supposed to go together.
  1. Have the layers selected
  2. Press "Ctrl + E" to merge the layers
3. Blur:
I love this effect, with a passion. It surprises me how people don't really know how to use it to get the desired effect. Here's a quick tutorial on a nice effect blur:

  1. Go into photoshop and copy an area of the background; for headers.
  2. Make sure you have THAT LAYER SELECTED then go into filters and apply a Gaussian blur, box blur, or even a blur more filter.
  3. Make a new layer that's the same exact size as the layer you just blurred and fill it with ether: black, or white.
  4. Set the opacity for that color layer to about 55%, or 65% or even lower.
  5. Select both of the layers: The color, and the image you blurred and press "Ctrl + e" to merge the layers.
  6. Then create a layer mask, pressing the little box "| o |" that sorta looks like that for the newly merged layer (the box thing is in the layers pallet). Now select your gradient tool; set from black, to white.
  7. Press shift and drag the line across the sides.
4. Patterns:
Not everything needs a pattern. I mean, seriously. Don't go all patterny. But, when you do decide to for say: a background, only do ones at an angle, or vertical. Never, ever use a horizontal pattern. Unless, you want your layout to look like a fatty that needs to go on a Jenny Craig diet.

5. Gradients:
Gradients, they are your friend! I use them quite a bit when I design a layout, or something like that. Always use easy colors that fade easily, I mean, don't use orange, to green or something. Use something like: Blue, to navy blue. Something in the same range. To make a straight line gradient do this:

  1. Have your gradient line ready
  2. Press "shift"
  3. Drag your line
See? That was easy!

More coming soon. I really can't think of anything else to add at the time being. If you have any questions, or if you want to know how to do something, don't be afraid to ask me.
 
Last edited:
Newbie Spellweaver
Joined
Aug 12, 2008
Messages
24
Reaction score
0
Re: [Guide] Photoshop Techniques

Can you maybe explain how to download the Photoshop CS3
 
Experienced Elementalist
Joined
Aug 31, 2008
Messages
214
Reaction score
0
Re: [Guide] Photoshop Techniques

hmm..nice guide...but I suggest u put a place like (ToolsNeede/Download) cause I dont noe wAT U NEED AND WHERE GET .....i wan download link!
 
Mythic Archon
Loyal Member
Joined
Apr 10, 2008
Messages
758
Reaction score
0
Re: [Guide] Photoshop Techniques

Wrong section.
 
Skilled Illusionist
Loyal Member
Joined
Jun 23, 2008
Messages
324
Reaction score
0
Re: [Guide] Photoshop Techniques

Can you maybe explain how to download the Photoshop CS3

There is already a Guide abt how to download Photoshop CS3, use the search button, i forgot where but im sure i saw this Guide be4
 
Newbie Spellweaver
Joined
Apr 13, 2008
Messages
91
Reaction score
1
Re: [Guide] Photoshop Techniques

Very very basic. Anybody who has photoshop would probably know this + more.
I do know more then that. If you actually read the bottom...

@Others: I don't really know what section.
 
Master Summoner
Joined
Jul 28, 2008
Messages
503
Reaction score
0
Re: [Guide] Photoshop Techniques -- CMS Design

included screenshots would be nice :)
 
Banned
Banned
Joined
Aug 16, 2008
Messages
102
Reaction score
0
Re: [Guide] Photoshop Techniques -- CMS Design

Yh.. maybe place some sS's.. Nice guide.... make more details
 
Senior
Loyal Member
Joined
Feb 8, 2008
Messages
1,873
Reaction score
42
Re: [Guide] Photoshop Techniques -- CMS Design

this is great, i wish i had this like a year ago xP
 
Status
Not open for further replies.
Back
Top