Jump to content


- - - - -

Tutorial #9 - Clean Hide URL Layout


  • Please log in to reply
3 replies to this topic

#1 _*cipcip_*

_*cipcip_*
  • Guests

Posted 13 October 2007 - 04:24 AM

Welcome to the 9th tutorial of the 100 Tutorials Marathon!

In this tutorial i am going to teach you to make something like this:

Posted Image

This is very easy to make, but it is really clean ...

So let`s start shall we ?

First create a 760px X 800px blank white document ...
Next save the following background to use it as a pattern in this layout!

Posted Image

Fill your white space with this pattern ... now you should have something like this:

Posted Image

Next, look for a spy image or you can add whatever you want here, place it so it can look real good, and also add your site`s name and slogan under it ... something like this:

Posted Image

Next we are going to make the text area .. where you will fill out the adress and the hide button ... For that you need to create some shapes using your rectangle tool or rounded rectangle tool and create them having a white background and add a 1px stroke with the #efefef color, also add the text to them using your favourite font and color ... you should now have something like this:

Posted Image

Next using the same technique as at the previous step ... we are going to create another shape with also a 1px stroke with the #efefef color, and add your site description or advertisement to it using your favourite font and color ... you should have something like this:

Posted Image

Next add your copyright information and then you are all done... final preview:

Posted Image

I really hope you enjoyed this tutorial, and find it usefull ...

Thanks for reading,
Gfxclass.com Admin!

#2 Sullivan

Sullivan

    Young Padawan

  • Members
  • Pip
  • 4 posts

Posted 11 November 2007 - 01:56 PM

Nice, but how about the coding part, to make the URL actually shorter?
I have been wanting to do this.

~Sullivan~

#3 rocktofakie3

rocktofakie3

    Young Padawan

  • Banned
  • Pip
  • 10 posts

Posted 30 May 2009 - 08:47 PM

Yeah and how do i make the text box so i can paste a url?

#4 GreyApe

GreyApe

    Call me Yoda

  • Members
  • PipPipPipPip
  • 3,026 posts
  • Gender:Male
  • Location:London
  • Interests:Tech, Coding, Designing

Posted 31 May 2009 - 05:20 AM

http://www.gentlesou...ort-url-script/ integrate this somehow.

There is a small layout that comes with this script so perhaps you can add it to your current design.

Hope this helps :P




1 user(s) are reading this topic

0 members, 1 guests, 0 anonymous users