Basic nuke chrome theme

by krike in Tutorials, photoshop

Part1: Mainbody

Welcome to the design tutorial, in this tutorial I’ll teach you how to design a basic theme. This theme will be used for the coding later.
In this tutorial you will need one style “chrome1″ and 2 patterns, you can download it in the download section.

This is the theme you will design in this tutorial:

step1

- Start by opening a new document:

- Call the first layer background and fill it in with #aeaeae.

- Now make 2 groups (blocks & Mainbody), It’s very usefull to work with maps so you know where each layer is located.

step2

- Take your rectangle tool and draw a normal shape, right mouse click on layer and click on “rasterize layer” then apply the style chrome1. Rename that layer “header background”

- Now take your rounded rectangle tool, put radius on 50 and draw a shap above the layer “header background” (if your rounded rectangle tool is selected look at the top menu and you will find radius).

Call that layer “top header”:

- Now hit CTRL and click on the thumbnail of layer “Top header” to select it. Then select the layer “Header background” and press Delete button. (the chrome layout should change a bit). After that put the layer”Top header” behind “Header background”.

step3

Indent:

- Take your rectangular marquee tool and make a random selection (make sure it has more or less the same width as your header, but the selection should not pass the header). fill it whit a color.

- Put the fill to 0%.

- Open blending options and apply following settings:

- Create a new layer and merge it with the previous layer (you need to select both layers and then hit CTRL+E)

- Delete the unwanted parts:

- Place now the finished indent between the layer “header background” and “Top header”:

- Now duplicate that layer and hit 6 times the down arrow of your keyboard
(tip*: you can also move shapes with the arrows of your keyboard, they will move pixel by pixel, very usefull if you need to move just a few pixels).

Repeat this step several times (I did it 9 times) and you should have something like this:

- Merge the original layer with all the copy’s and moved just behind your header:

- Make a duplicate of the 3 layers (ctrl+j), select the 3 copy’s and move them at the bottom.
Rename the copy’s of the layer to “footer background”,…. (see image).

step4

- Now take your rounded rectangle tool and draw a border (from header to footer), rightmouse click on the layer and choose “rasterize layer, then duplicate the layer and move it to the right:

- Now merge the borders with the header and footer (just select the first border layer and hit 3 times CTRL+e, then the border will have the chrome look. If you select all the layers first and merge them together then the border won’t take over that chrome look):

step5

I applied a few patterns in the background (you can skip this step if you want).

- If you downloaded the style&pattern pack from the download section the open the 2 images and for each image go to “edit->define pattern”, give a name for both.

- Create A new layer and go to “edit->fill”, choose “pattern” and select your scanlines:

- Click ok and put the layer opacity to 40%.

- Create a new layer and apply the second pattern, put layer opacity on 40%.

- The apply a “hue and saturation”, go to layer->new adjustment layer-> hue/saturation and apply the following settings:

I just want the background (left and right, not middle) to have that background pattern, So I’ll aplly a basic background in the middle, just make a selection and fill it with the color #aeaeae. Be sure to have created a new layer and that the layer is above the “hue/saturation” layer:

step6

Now just add the finishing touch like a text. I used following settings for the text:

I also applied the chrome1 style, but in the blending options (bevel and emboss) I changed the size to “2″:

---

Part2: Blocks

- Draw a shap with the rounded rectangle tool and apply chrome1 again, go to blending options (bevel and emboss) and put size to 9.

- Just duplicate that layer 2 times, move on to the middle and one to the right.

- On the middle block apply a free transform to stretch it a bit out.

you should have this as final result:

Once finished create a new layer on top and go to image-> apply image. it will make an image of your complete theme, that layer will be used for coding.

---

Part3: Forumheader

In this part we’ll design this forum header:

step1

1) Start by opening a new document 570*120, then add the background color #d1d1d1.

2) Take your rounded rectangle tool and draw a shape like this (set radius on 20 and rasterize layer):

3) apply the chrome1 style, put bevel and emboss-> size to 3 or 4.

4) Take your rounded rectangle tool and draw a smaller shap like this (radius on 20 and rasterize layer):

5) apply the chrome1 style, put bevel and emboss-> size to 1 or 2.

step2

1) Create a new map and call it left nav, and duplicate your button 2 times:

2) Now duplicate the group leftnav and rename it to rightnav. Then move that group to the right:

3) now just add a text in the middle (eg: site title), and add names to the buttons. (I used once more the chrome1 style).

---

Part4: images

Here we’ll design the account images, weblink and download logo, voting bar and topic images.

Normally I always make the buttons and forum buttons once I finished coding the mainbody and the style.css because then I can adjust the colors of the buttons with the colors of my theme.

step1

Account images:

- Open a new document, size 80 * 80

- Give it a color, eg: #d1d1d1 (this is the same background color as your blocks)

- Take your rounded rectangle tool, don’t forget to take another color, and draw a random shape:
(don’t forget to lower down the radius, I’ve set it to 10)

- Rasterize layer and apply the chrome1 style once again. Go then to blending options (bevel and emboss) and put the size to 4:

- add an icon to it, eg: logout icon. Resize it a bit and then go to layer-> new adjustment layer -> hue/saturation and add following setting:

- Final result:

Repeat this for the other account buttons: Comments, home, info, journal, message and theme. (to have an example download the finished theme in the download section).

step2

Topic images:

Just repeat the same steps like above. I don’t really know what announcements you are going to make on your site so I won’t go into details in here. You just need to make another map called “topics” in your images map and put all of your topic images in that map.

just one thing you should know, if you have made for example a topic image for shop announcements and you called the image “shop.gif”, the same image (in fact an image with the name “shop.gif”) must be present in the topic images map of phpnuke itself.

so if you have shop.gif in your theme “themes/your_theme/images/topics/shop.gif”
then that images must be also uploaded to “root/images/topics/shop.gif” of your phpnuke system. otherwise PHP-Nuke won’t be able to replace the original shop.gif image with your custome image because there is no original image to replace.

step3

Weblink and download logo:

- Open a new document (doesn’t really matter), I’ll choose for 240*55

- Give it a color, eg: #d1d1d1 (this is the same background color as your blocks)

- Add a logo and the text

final result:

–> have to save it as “down-logo.gif” in the images map.

–> have to save it as “link-logo.gif” in the images map.

step4

voting bar:

- Open a new document, size 10*12 and zoom in to 1600%

- Give it a color, eg: #d1d1d1 (this is the same background color as your blocks)

- Take your rounded rectangle tool and draw a shape like this:

- Rasterize layer and apply once again the chrome1 style, then go to blending options (bevel and emboss) and put the size to 1. Also remove the outer glow:

- Save it as “leftbar.gif” in your images map of your theme (here -> themes/TD-chrome/images/leftbar.gif)

- Move the shape to the left so you see the middle part:

- Save it as “mainbar.gif” in your images map of your theme (here -> themes/TD-chrome/images/leftbar.gif)

- Save it as “rightbar.gif” in your images map of your theme (here -> themes/TD-chrome/images/leftbar.gif)

Follow us on Twitter, or subscribe to our rss feed.