Create a dark corporate layout
Corporate layout
Today I will show you how to create another PSD layout.
This time I will create a sleek corporate layout. You can use this layout also for any internet business you want.
From today i will try to provide also the XHTML / CSS layout for each layout tutorial i will provide. This dark layout can be transformed also into a wordpress themes or also a drupal theme.
Open a new document with the following size: 960×900 pixels. For the background color I will use a dark color: #4d4d4d. I will select Rounded Rectangle Tool, and I will create 2 shapes.
I will duplicate these two shapes. To duplicate a shape you need to select it first in your layer palette, then press on CTRL+J . You will see the layers above the original ones. Right click on each copy and choose Rasterize layer.
Then for the top layer please add the following layer styles. Please note that you can download the layer styles from this page
And for the bottom one use the same layer styles as above, but check the “ Reverse “ checkbox
Here is my result so far
I will load the selection for the top shape. To load the selection please hold down your CTRL key, then press on the Thumbnail for the top layer
Go to Select > Modify > Contract… and modify with 1 pixel
Create a new layer above all layers ( press CTRL+SHIFT+ALT+N ), then go to Edit > Transform > Stroke
Press on CTRL+D to deselect, then you will have the following result
I will select Eraser Tool, and with a big smooth brush I will delete some parts of this line
I will change the blending mode to Overlay, and I will reduce also the opacity to 50%
Please keep in mind how you have achieved this effect, because I will use several times in this tutorial. I will create the same thing border for the bottom shape.
I will create other shapes with Rounded Rectangle Tool
I will add the following layer styles for all the white shapes
This is my result
Above these layers I will create other ones.
I will rasterize all this white shapes, and I will delete the bottom part of the shape
I will add the following layer styles for all these shapes
This is my result
I will create other shapes with Rounded Rectangle Tool. I will place the shapes under the previous one
I will Merge all the white shapes., and I will delete the bottom part
Then I will add the following layer styles for this shape
This is my result
I will create some buttons with Rounded Rectangle Tool
The same I will merge all the buttons into a single layer ( press CTRL+E ) , then I will add the following layer styles
This is my result
I will add right now some circles with Ellipse Tool
For all the small circles please add the following layer styles
This is my result so far
Now I will add some text, and after that I will add also some images
On the right side I will add some shapes with Rectangle Tool
I will lower the opacity for all these layers, and I will place some text
The next step is to create on a new layer. On this layer I will use Brush Tool, to create a few white points
Change the opacity for this layer to 40% , and the Blending Mode to Soft Light. This is My final result. I hope you like it
Apply now for a VIP subscription and you will be able to download the PSD file, and the XHTML / CSS layout.After each tutorial I receive a lot of question if you can use the design in for your own websites. The answer is Yes. You can our PSD or html to create your own personal website. It is very nice from you if you link back to us. We will really appreciate.You can also create Wordpress layouts from this design if you want.
Register and download the layered PSD file and the XHTML / CSS layout
Responses to “Create a dark corporate layout”
Trackbacks
- Adobe Photoshop Tutorials | Creating a Dark Corporate Website Layout | Free Photoshop Tutorials | Forging Fire Studio
- Top tutorials week ending 05/02/09 | FAQPAL Blog
- 45 awesome Photoshop website template/layout tutorials | [Re]Encoded.com
- 160+ Mega Web Design Tutorial Roundup | tripwire magazine
I’m tryin to create an myspace page with photoshop and flash is that posible using this tutorial and others I have already seen mainly this one you used here.
Yes you can use it. if you need help do not hesitate to contact me
Thank you so much for this!!!
Wow!
Very nicely done. I love this design!
Thanks for the tutorial…
I usually like the designs here, but this one doesn’t really look very corporate, and the fonts used for the tabbed navigational buttons and headings look bad, and aren’t very suitable for the implied use as per typography. Sorry, but this design needs to go back into Photoshop for some rework.
great design. i like the end design very much. i hope to see more layouts like this one on this website. You have one of the best web layout tutorials from the web
i disagree saquel, nasty comments not needed. WHy dont you redo it and show the world your amazing visual insights. You;re probably a librarian or something are you?
Thank you for this tutorial. Do you have a tutorial that would show how to slice this as well?
I will create a tutorial on how to convert a PSD file into a xhtml/css website
I translate it into your directory and advertiser in Israel, it’s okay?
Very Nice Design. I like this very much and i am waiting for this kind of layout. thank you very much.
Hi,
I am lost in the CSS and HTML.
It seems to me to recreate the background you give a background color 4d4d4d
and then you layer a shine image on top of the background.
To create the shine image did you merge the shine layer with the background layer and adjusted the width of this image or something else?
Besides the shine image you also use shape1, shape2 and shape3 image. Looks like you sliced the background layer. I don’t get this step. Why is it done? What does it add? Doesn’t the background color and shine image allready recreate the background.
If shape1, 2 and 3 are necessary shapes how did you decide where to slice them especialy shape3 .
Also the whiteborder.jpg, whiteborderbottom.jpg and whiteshape.jpg are confussing steps. Could you tell why these images are used. Looks like they are overlayered again with smaller shapes.
Could you please help me with this.
Thanks.
Hi
Some of the images there was placed for you to understand better how each layer is placed.
We do not use slice tool. You can merge some layers ( background and shine ), then use Rectangular Marquee Tool , to cut the image you want. Using CSS you can place the shine where you want.
Some layers are overlaying because i repeat, i wanted to place each layer using the method described in the tutorial. If you delete some of the layers, you will still have the same result
Please note that you need to delete the html code and the css code, and you will still have the same result.
using this method is not so easy at the beginning, and you will have a lot of headache, but i recommend you this method because you will create valid css , and html code
When google visit your site is very important to have nice code. i am telling from my own experience.
A few months ago i have bought 2 domains. On both domains i placed the same content, but i have different code. the valid code was ranking very good in search engines.
Thanks
Razvan
Wow… this guy is toooo good! Excellent on all tutorials! Package your tutorials in video format, along with your source files and you’ve got me signed up!
Wow.. This is very good good good tut.
Some people just don’t know the difference between a example for learning and a finished product ready for use on the internet.
Thanx for some lovely instructions and some great guidance in my first steps in understanding Photoshop.