What's new
Photoshop Gurus Forum

Welcome to Photoshop Gurus forum. Register a free account today to become a member! It's completely free. Once signed in, you'll enjoy an ad-free experience and be able to participate on this site by adding your own topics and posts, as well as connect with other members through your own private inbox!

If you want how a specific part of website was designed


AlwaysAlone

Member
Messages
6
Likes
1
Good day every one,

I think this website is the perfect place to put my question in, as it has I lot of good stuff and such a grate members.

I've found such a beautiful website interface especially its background I really liked the overlapped squares and I tried to emulate it with my little experience in photoshop but all I got is failure :cry:.

here is the background:
Screen Shot 2012-11-10 at 3.15.34 AM.png
And if you would like to check out the website your self, here it is:

druff.co.za/index.asp


So please if anyone can help me to do the same background step by step or name some resources that might help me, thats is going to be highly appreciated.

Thanks

Sincerely
 

Remote-Medic

Beast RARRR!
Messages
672
Likes
370
Okay, even with little knowledge it should be easy enough to recreate this.
Here is the background image (I have put the '© etc' there as it is their image and I only wanted you to see how they have done it)

Druff-Interactive-MainBG.jpg

Create a new document with the dimensions 200 x 200 pixels @ 72dpi

Enable the grid by clicking View>Show>Grid (make sure 'Snap' is enabled) pressing shft+Ctrl+;

Pick your colour scheme and alternate the colours how you want. Once you have got the colours you want, click on 'Layer' at the top then>Layer Style>Blending Options>Bevel & Emboss ticking the 'Texture' radio button. Pick your texture and adjust accordingly.

Now go to:

Image>Canvas Size and enter 84 pixels x 84 pixels.

Once you have done this, select the grid you have made then:

Edit>Transform>Rotate

In the box at the top:

rotate.jpg

Enter 45 degrees

Now, with the grid you have made selected in layer, hit Ctrl+J 4 times, this will create the other parts to fill the corners in, drag each layer into each corner. This should now look like the image you liked on the website.

Save for Web, either jpeg or whatever format you like. Upload and within you Website building software set this to tile. Your background should now be complete.

Alternatively, I have just made this video quickly on mainly where buttons etc are that you will need. I have already completed the steps on creating a new document 200 x 200 pixels and have added basic colours. You will have to pick a colour scheme that you want and maybe make the squares smaller. I used squares that were 50 x 50 pixels for ease. Play with the sizes and see what works for you. Also you will see that I have dragged some guides out. Press Ctrl+R to enable rulers and then just drag these from the left side and from the top, holding down the 'Shift' key to keep accurate and precise on placement. Pressing Shift+; will hide these.

Video of a couple of the steps:


Hope this helps, I am sure others will be along and may be able to advise on different methods. This one works but I do tend to sometimes go the long way around.
 

AlwaysAlone

Member
Messages
6
Likes
1
Good day Mr. Remote-Medic ,

I'm really sorry for inconvenience, but I've tried every way to get the same squares that you got by the showing the grid view but it
didn't work,

I've set the dimensions to 200 X 200 pixels with 72 dpi, and I enabled Snap as well as the grid view however I've changed the settings of my grid view to every possible digit
but I'm still getting that little incomplete squares at the right side of my work space.

View attachment 23845

I know this problem can be skipped but it is kind of frustrating for me,


sorry again and thanks.
 

Top