Jump to content


- - - - -

Tutorial #8 - Pet Shop Layout


  • Please log in to reply
4 replies to this topic

#1 _*cipcip_*

_*cipcip_*
  • Guests

Posted 19 September 2007 - 10:44 AM

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

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

Posted Image

Ok, let`s get to work :o ... now start a fresh new document in photoshop with the size 800px X 750px.

Next using the rectangle tool make a selection like this in the left of the page and also add a 1 px line using your pencil tool among the whole height of the selection you just made with the color: #959595 ... Now you should have something like this:

Posted Image

Now add a picture of a pussycat on the top right side of your layout ... it should look really good. Search on google.com for a pic, that is how i found mine :) ... you should have something like this:

Posted Image

Next add your logo on the left black side of the layour and you should have something like this:

Posted Image

Now we are going to create our menu, just create a paw using the custom shape tool and colour it with the next orange color: #f6931b ... for the font i used Myriad Pro with a size of 12 px ... here is what i got:

Posted Image

Now again with the rectangle tool create a shape under the pussycat, fill it with #ddded6 ... and also add to it a 1px stroke with the color #414141 ... you should have something like this:

Posted Image

Next inside of the shape we made on the last step, we are going to make 2 more using the same technique only that this time we will fill them with a more lighter color ( #e8e8dc ) ... and also add a 1 px stroke to them with the color #414141 ... you should have something like this:

Posted Image

Now all we have left to do is to add some dummy text using lipsum.org .. yeah that famous site :biggrin: ... and you are done ...

Posted Image

Thanks for reading this tutorial,
Gfxclass.com Admin!

#2 _*Creative Insanity_*

_*Creative Insanity_*
  • Guests

Posted 19 September 2007 - 10:56 AM

Gee wizz fella ya pushing these templates out. Cool stuff ya doing here. :biggrin:

#3 _*cipcip_*

_*cipcip_*
  • Guests

Posted 19 September 2007 - 11:26 AM

thanks ... i am glad you like them ... it means so much too me ... :biggrin:

#4 _*Creative Insanity_*

_*Creative Insanity_*
  • Guests

Posted 19 September 2007 - 12:21 PM

I am going to be doing a video on creating a full site from template making to coding up the finished site in Dreamweaver.. would you have any objections in me using one of your tuts in the video and credit you for the template naturally.
Posting this in public so it is all clear that I did ask. All up front and above board me is .. hehe

#5 _*cipcip_*

_*cipcip_*
  • Guests

Posted 19 September 2007 - 02:28 PM

yes sure you can use it ... a small link to gfxclass.com should do the trick :biggrin:

Edited by cipcip, 19 September 2007 - 02:29 PM.





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users