Help - Search - Members - Calendar
Full Version: Tutorial #9 - Clean Hide URL Layout
Pixel2Life Forum > Member Tutorials and Requests > Forum Tutorial Archives > Photoshop Tutorials
cipcip
Welcome to the 9th tutorial of the 100 Tutorials Marathon!

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



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!



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



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:



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:



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:



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



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

Thanks for reading,
Gfxclass.com Admin!

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

~Sullivan~
rocktofakie3
Yeah and how do i make the text box so i can paste a url?
N4Z.
http://www.gentlesource.com/short-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 smile.gif
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.