Design a creative unusual layout
In this tutorial I will show you how to manipulate some simple shapes, to obtain a wonderful layout. As you have seen I am trying to create unusual layouts. I want to show you that it is possible to create also another type of layouts (not usual ones).
Apply for VIP to download this layered PSD file
Start by creating a new document (CTRL+N) with the following size: 960 x 900 pixels, and with the background color #5c7a02.
Select Rounded Rectangle Tool, and set your corner radius to 50 Pixels
With this tool I will create a shape in the middle of my layout, then I will press on CTRL+T and while I am holding the Shift key down, I will rotate the shape
Right now it doesn’t matter what color you will choose. I will use different colors for each shape I make, because I want to show you where I will place the shapes
Now I will change the color for all this shapes to #3c3427
On the top of my layout I will add another shape, but this time I will use the Rectangle Tool
I will change the color for this shape to # 3c3427, and on the bottom right of this layout I will add another shape
With Rounded Rectangle Tool, I will create another 2 shapes
Be sure you have selected both layers in your layer palette, then press on CTRL+T, and with your mouse pointer rotate the shape to the left. I will place my shapes like in the following image. Over this green shape I will have my text button.
I will create a new layer above all layers, and with my Brush Tool, I will add some points with a big smooth round brush.
Then I will change the blending mode for this layer to overlay
This is my result so far
Now with Horizontal Type Tool I will write some text. The font I will choose is Bookman Old Style. Italic.
Now I will add some images from my last tutorials in the middle part of my layout. I will cut some round images from my previous tutorials.
On the top of the website I will add another rounded shape.
I will select Line Tool, and with a thin line (1 pixel) I will create two lines between my text buttons.
I will select both line layers in my layer palette, and then I will press on CTRL+E (to merge the layers into a single one). I will select Eraser Tool, and I will use a Soft Mechanical brush with a size between 200 and 300 pixels. Then I will delete the right part of the line.
I will delete also the left part, and I will make some duplicates after this layer. With Move Tool or with your arrow key I will move the duplicated layers to the bottom.
With the same technique as above I will add some lines also on other parts of the layout. You can change the blending mode for this layer to overlay.
I will create a new layer right under my round images. I will select Brush Tool, and with a round soft brush, I will make a point over my layout in the following spot. Please set your foreground color to black.
Select Rectangular Marquee Tool, and create a selection like mine.
Your selection should be right between the horizontal lines you have placed a few steps ago. Now be sure you have the right layer selected (with the black brush drawing), and now press on CTRL+I, or go to Image > Adjustments > Invert. Your layout will look like this one.
Press on CTRL+D if you have the selection still active, and now change the blending mode for this layer to Overlay, and you can also lower the opacity value to 40 %.
This is how my simple slideshow will look like
Now I will add some round buttons
In the middle of my layout I will add also a round shape
This is my final layout
If you want to learn faster how this layout is made please apply for a VIP account, and you will be able to download all the PSD files from this website, including this one, and in the same time you can download all the VIP downloads( vector files, layer styles, gradients, adobe illustrator swatches, Photoshop brushes ).
For a small fee you will be amassed what you will be able to download.
Please note: The payment is onetime fee, and you will not be charged further, when your month expire.
Apply for VIP to download all PSD layouts for each tutorial including this one.
Where to find useful 70-432 study materials and how to pass 220-702 exam successfully is definitely a problem specially for those new to IT field. If you are also one among those, it is recommended to join 640-553 online training for guarantee exam success and save on training cost.
Responses to “Design a creative unusual layout”
Trackbacks
- CSS Brigit | Design a creative unusual layout
- 45 awesome Photoshop website template/layout tutorials | [Re]Encoded.com
- 30 Best Photoshop Web Layout Design Tutorials to Design Decent Websites | Dzine Blog
- AnthemGDA » Blog Archive » 30+ High-Quality PSD Website Templates
- 185+ Web Design Tutorials using Photoshop, CSS, HTML etc. | tripwire magazine
- 31个高品质的PSD网站模板下载 | 创意悠悠花园
- Best Web Design Layout Tutorials - Wsblogz.com – Web design magazine
- 30 Best Photoshop Web Layout Design Tutorials to Design Decent Websites | DzineBook
- 36 Best Photoshop Web Layout Design Tutorials Part 4 |dzinebook.com | DzineBook
- Top 10 Professional Photoshop Web Design Tutorials
- 36 Best Photoshop Web Layout Design Tutorials | Drawlines
- JEGee | Закрытые проекты | Проект : Сайт ITCo Union
- Tutoriais de layout em Photoshop Parte II « Upmasters
good template design. and really unusual.
I love this PSD layout. Please let me know if i can purchase now the VIP account for another year. I have already purchase for one month, but i think it will be better if i pay for more time ( 1 year )
Do i have to wait to expire my actual payment, or can i pay it right now
And one more question. can i use the layout for a small personal project ?
thank you for your time to write such easy to follow tutorials
Nice stuff
I like it, it’s just unusual enough to be effective.
Featured here: http://www.presidiacreative.com/web-picks-24/
I love this unusual web layout
That layout is unusual… but really looks great! I wanna try doing it too… Thanks for sharing this tutorial. Hope you’ll post this kind of topic more often.
Nice layout, good for portfolio site.
Thanks for sharing
this design will be a one of the outstanding our there
Hi,
Like your tutorials very much.
Would love to see a dark layout with a metal look, red with different gradients of red or a complete different theme then a bussines or portfolio layout. Maybe some dating, shop, classifieds or auction site.
Other things would love to see some tutorials with only parts of website such as buttons, content boxex, drop down navigation graphics and coding, icons etc etc.
Also for each web layout a tutorial how to slice and code in CSS.
thanks a lot for your work and sharing it here.
This is really nice…but the problem is, if this were to go on LIVE, how would you go about coding it in html? Could you please explain and if need be, give a follow-up (Part 2) tutorial on how to go about coding this layout in html? =) Thanks!
Now THAT is nice!
Every layout can be coded without problems.
For VIP members we have a unique method on how to code a PSD layout into a valid xhtml/css website.
If you plan to learn how to do it i recommend you to apply for a VIP account to learn my personal method, when i am converting layouts to html websites
http://www.grafpedia.com/tutorials/design-and-code-a-layout-withouth-using-slice-tool
Awesome layout with nice step by step tutorial
You are awesome
Thanks a lot for posting Awesome tutorial
keep up good work
God bless you
hy boy &girl
I love layout tutorials where I hate the layout.
Very Nice~ thank you for shared.
Great layout and explanation of the design. Now all I need is to be a web designer and get the coding done.
This is a very nice layout, but not for a website. If you really make websites as a web-developer, you may know that it is impracticable for a 100% HTML+CSS site.
Sorry by my bad english. Nice design!
I don’t want to be the one that breaks that into CSS/HTML but I am loving your choice of colors. Slick. Good job.
Every layout can be turned into a xhtml/css website. the problem is with the text. the big problem is that text can not be turned correctly from PSD to css
Thanks ,
very nice tutorial
Nice Layout but i think its hard to code it.
Since you can only make square divs/tables.
superb work
nice cool layout,it was a really easy tutorial
hope you`ll be posting more of this soon
thhhaaanx!!!
NICE ONE!
Great! I like your design. Really creative
Keep up the awesome work!
hey superb tutorial! Very nice awesome template. Please post more & keep going! good luck!
Nice tutorial
great tutorial ♥♥
and very unsual l indeed ..
thanks for this,.
Nice. I paid the VIP fee to download this and other tutorials. While the files are all there, including the xhtml and css, I would have liked having an eplanation to how you put together the xhtml and css as well. Nice tutorials though. I bet coding tutorials would have be done as thorough also.
AH! I found it! Did not see the other download on creating a site without slicing. NICE! Just what I needed and wanted. Thank you!
That’s an awesome tutorial and I just love the layout. It really stands out. great work!
gercekten cok tesekkürler harika bi çalışma olmuş yayınladığınız için tesekkürler…
perfect tutorial… Thanks for shairng
Cool layout! Nice sharing:)
great work…