Jump to content


* * * * * 2 votes

My First Tutorial Ever ( Clean web 2.0 template )


  • Please log in to reply
13 replies to this topic

#1 _*cipcip_*

_*cipcip_*
  • Guests

Posted 29 May 2007 - 03:05 PM

Well this is my first tutorial ever so i hope it came up well ...
Here it is ...
This is a preview of what we will be making ....
Posted Image
Start by creating a 800x600 pixels new document ... the color doesn`t matter since we are filling the background with a pattern ...
Save the following pattern to use it for this tutorial:
Posted Image
This is what you will have so far:
Posted Image
Now grab the rounded rectangular shape tool and make a big sellection ... this is the main area ...
Add the following blending options to it:
- Drop Shadow: - default settings
- Stroke: - 1px border
- position: outside
- blend mode: normal
- opacity: 100%
- fill type: color ( #FFFFFF )
And this is what we will have:
Posted Image
Then add your logo or just write your company name on the top left corner ... the font i used is called cocon ...
Posted Image
On the top right corner add some of your sites features ... like hosting, tutorials, etc ... you can add whatever you want ...
Posted Image
Then ... add your main index picture ... i added this picture with this guy on the beach :lol: ... And draw a 1px white border around it with your pencil tool ...This is what i have ...
Posted Image
Under the photo ... place your copyright information ... again i used the cocon font ...
Posted Image
On the right side of the picture ... using the rounded rectangle tool ... draw a white box ... something like this:
Posted Image
In it ... add 3 smaller boxes using the same technique ... but make them black ...
Posted Image
Add your sites name or logo in the top box ...
Posted Image
On the second box ... add your latest news ... i put up some dummy text from lipsum.org ...
Posted Image
On the last box ... add a search bar or whatever you want too ... i put up a shell pic too ... so it looks more classy :D ...
Posted Image
Finally add your menu using what font you like ... again i used cocon ... and you are ready to go :) ...
Posted Image
Thanks for reading this ...

#2 _*cipcip_*

_*cipcip_*
  • Guests

Posted 31 May 2007 - 09:52 AM

50 views and no one likes it ? :P :( B)

#3 Vandalised

Vandalised

    Jedi In Training

  • Members
  • PipPip
  • 307 posts
  • Gender:Male
  • Location:UK
  • Interests:Most sports, football, cricket, hockey, tennis, golf. Web design, graphic design (photoshop) Socialising with friends, going to clubs, bars, concerts.

Posted 31 May 2007 - 01:09 PM

Pretty sweet, however I feel that the white rounded box, is to large. As in the border is to thick.

#4 _*cipcip_*

_*cipcip_*
  • Guests

Posted 31 May 2007 - 03:12 PM

thanks for your comments ... i`ll try to do best next time :)

#5 StnrScott

StnrScott

    Young Padawan

  • Members
  • Pip
  • 7 posts

Posted 24 June 2007 - 11:08 PM

I love the outcome.

I also joined GFXClass and left a few replies around the forum.

#6 StnrScott

StnrScott

    Young Padawan

  • Members
  • Pip
  • 7 posts

Posted 25 June 2007 - 01:39 AM

A clean and nice outcome.
Here's my result..
Posted Image

A friend of mine is in a band and wants me to design his website.. This tutorial helped me out a lot.
I'm going to make the rest of the website some other time.

Thanks!

#7 Danh

Danh

    Young Padawan

  • Members
  • Pip
  • 2 posts

Posted 25 June 2007 - 08:06 AM

@ cipcip - Very nice tut mate, i might just well have to use this next time round on a website.
@ StnrScott - what is the name of the font you have used on your page above?

Danh

Edited by Danh, 25 June 2007 - 11:04 AM.


#8 StnrScott

StnrScott

    Young Padawan

  • Members
  • Pip
  • 7 posts

Posted 25 June 2007 - 03:05 PM

The font's name is "Broken 15."
You can download it from here: www.dafont.com

Edited by StnrScott, 25 June 2007 - 03:06 PM.


#9 DeathWish^!

DeathWish^!

    P2L Jedi

  • Members
  • PipPipPip
  • 501 posts
  • Gender:Male
  • Location:England
  • Interests:Photoshop :)

Posted 24 August 2007 - 09:23 AM

Nice out come

Thanks for sharing

#10 _*cipcip_*

_*cipcip_*
  • Guests

Posted 06 September 2007 - 04:26 AM

i`ll come back with more ... i had a bad time ...

#11 telittleone

telittleone

    Young Padawan

  • Members
  • Pip
  • 6 posts

Posted 09 September 2007 - 10:41 AM

y did u remove it. It was a good tut.

#12 _*cipcip_*

_*cipcip_*
  • Guests

Posted 13 September 2007 - 10:59 AM

it still is ... i was stupid i admit that ...

#13 telittleone

telittleone

    Young Padawan

  • Members
  • Pip
  • 6 posts

Posted 13 September 2007 - 03:29 PM

it still is ... i was stupid i admit that ...

thanx!!!!!!! plz don't delete anymore of ur tuts. they're all good. :P
oh, and is the stripped background supposed to be uneven in the middle? jus making sure.

Edited by telittleone, 13 September 2007 - 03:32 PM.


#14 _*cipcip_*

_*cipcip_*
  • Guests

Posted 13 September 2007 - 04:59 PM

yes!




0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users