Welcome to Gaia! ::

The Collective Guild

Back to Guilds

 

Tags: Collective, minishop, artists, project, community 

Reply Collective Collections
[TUTORIAL] Basic Profile Layouts for Beginners. ~ no posting

Quick Reply

Enter both words below, separated by a space:

Can't read the text? Click here

Submit

Lady Cressida

38,225 Points
  • Alchemy Level 8 100
  • Team Josie 25
  • Super Jumper 500
PostPosted: Wed Nov 12, 2008 6:51 pm


Hello and welcome to my tutorial. I have seen numerous question in the PD (Profile Discussion) Forum regarding on how to make a layout. I will give you step by step details on how to make a basic profile as well tips. So open what ever photo editing program you got and lets get started.

**NOTE** All tools and important links will be posted here.



Programs:

Gimp (free program and it works just as good)
Photoshop
Paint Shop Pro.


Brushes/textures:


Deviantart
Obisidan Dawn



Stock Photos:

Deviantart



**NOTE** When using brushes, textures, or stock image from a site, always read their Terms of Usage. Each person has their own terms and it is important to read in case they ask you to link back, give them credit, etc.

**SPECIAL NOTE** If you are using avatar art from someone else, it is very very important to ask them permission to use it. Once you get important it is also very very important to credit their work somewhere visible on your layout.
PostPosted: Wed Nov 12, 2008 7:36 pm


Now all we have to do is plan a theme. Once you have a theme in mind, gather all the necessary things you need like brushes, textures, and stock images. For this tutorial, I will be doing a simple winter theme. Lets jump into the next part.


Before starting, the golden rule is that everyone has different screen resolution. Basic size for any profile will be the following:

800px X 600px
1024px X 768px

You can make them bigger or smaller, but remember if you are making a bigger profile, make sure you state somewhere on your profile that "This profile is best seen with so and so resolution." What you will see on your profile with be different on another person computer and it can be horrible.


In this tutorial I will be using the basic 800px X 600px. Open you program up (I am using Photoshop CS3 Extended for this tutorial) and go to FILE ---> NEW

Type in size as in the picture.

User Image - Blocked by "Display Image" Settings. Click to show.


Next step is the background color. Pick a color that you want your background to be. In this case I use a light blue. Take the paint bucket fill and fill the background layer with the chosen color.

User Image - Blocked by "Display Image" Settings. Click to show.

If you want a pain background, then skip this next part. For those who want a texture/pattern background then continue on.

Photoshop: Duplicate the background layer and then delete the background. Click the FX button on the bottom of the layer window and scroll to Pattern Overlay. Choose a pattern that you want. In this case I made couple patterns which I will be using in this tutorial. Play round with the blending mode or transparency to get what you want. Hit Ok once you are satisfied with the results.

GIMP: Make a new layer. Go to the paint tool and click beside pattern fill. Chose a pattern and then fill the new layer with it. Play around with mode or transparency until you get you want.

User Image - Blocked by "Display Image" Settings. Click to show.




That is it for the background tutorial. Jump to the next post for content back ground, sections and other things.

Lady Cressida

38,225 Points
  • Alchemy Level 8 100
  • Team Josie 25
  • Super Jumper 500

Lady Cressida

38,225 Points
  • Alchemy Level 8 100
  • Team Josie 25
  • Super Jumper 500
PostPosted: Wed Nov 12, 2008 8:02 pm


Next step is easy to do. We are going to make a new transparent layer and name it "Content" Make a shape in top of the background on the new layer

**NOTE** Dont make a new layer for Photoshop users, if you are using the Custom Shape Tool.

**TIP #1** Basic rectangle shape is popular for a Content background. Try experimenting with other shapes and styles to make your profile different and unique.

Choose a secondary color for the content background, if you have a dark background then use a shade lighter or a lighter color and visa versa for a light background.

**TIP #2**
Try avoid using vivid colors, or multiple colors if you don't know how to use them properly. I have seen this and it's an eyesore. Try to stick to 2-3 colors if you can. You can use a monochromatic color scheme if you like.

Since my background is light blue, I will be using very very light blue for the content background. Again you can use another pattern, but try not to make it clash with the backgrounds, or texture.

I will be using both for this. I am going to duplicate a transparent layer and take a texture brush with a shade darker of the Content background.

Make multiple layers if need and play around with texture brushes.

I used 4 layers with different brushes in this order Light --> Dark --> Light --> Dark.

Play around with the transparency to your liking and then merged the brush layer.

Brush work made a mess on the outside? No problem, click the Content layer and use the magic wand inside the shape. Hit Select --> Invert and click the brush layer and hit delete. No more messy edges.

For pattern, use the steps on the last post as we did for the background. Again make sure the pattern doesn't clash with the background pattern and make sure you apply the Pattern Overlay on the brush layer.
I used a dotted pattern for mine.

**NOTE** Reminder for GIMP users, make sure you make a new transparent layer for the pattern.


We are not done yet, so don't merge the layers yet for Gimp users. For those who are using Photoshop, you can now merged the brush and Content layers. Hit the FX button and scroll to Stroke.

Pick a darker/lighter color for the border and play round with the width. Try not to make the border to huge or it will look ugly. 1-3px is perfect. Monkey around with the settings and hit ok.



Here is my progress so far.
User Image - Blocked by "Display Image" Settings. Click to show.


Ok jump to the next post of fun part =)
PostPosted: Sat Nov 15, 2008 1:43 am


Next part is going to be fun. You have 2 ways of doing this.

1) Start planning and making the sections (wishlist, about me, friends etc)

or

2) Add any pictures and do some brushwork.


Either way it doesn't matter. Since I have a snowman art I made last year, I'm going to jump to #2


Go to File ---> Place ---> choose the file and hit ok

**GIMP** File ---> Add Layer ---> Choose file and hit ok.


You can change the size of the picture if necessary, but in my case, I'm going to leave Frosty the way it is.


**NOTE** Depending on the size of the layout, it is important not to clutter it with art. One or two pieces is fine for this size we are working with it. That may include one head shot or full body depending on it's size. Two full body chibis is perfect as well, again it all depends on the size.


I'm going to play around with brushes. It is important that you don't get to crazy with them can make your profile hideous if you don't know what you are doing. Now I'm going to make a new transparent layer and add some brush work.

I added some white snowflakes on the background. It is ok if you get some on your artwork, it will make it nice and pretty =) Ok I'm done with the flakes, time to add something in the Content area.

I found these nice swirl brushes from Obsidian Dawn that I used in the corners of the two small rectangles. Since the brush only bottom right hand position. I had to duplicated the new layer that has the first scroll brush and flip it so it can go in to the top left hand corner of the upper small rectangle. Then I merged the 2 scroll layers.


Now I'm done with brushes for now, I'm going to play around with the shapes in PS3 (not playstation)


Graphics are done and now its time to do the final step...sections.

Lady Cressida

38,225 Points
  • Alchemy Level 8 100
  • Team Josie 25
  • Super Jumper 500
Reply
Collective Collections

 
Manage Your Items
Other Stuff
Get GCash
Offers
Get Items
More Items
Where Everyone Hangs Out
Other Community Areas
Virtual Spaces
Fun Stuff
Gaia's Games
Mini-Games
Play with GCash
Play with Platinum