3,259 Subscribers
Jun
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.
Newsletter
Subscribe for free to the grafpedia’s newsletter and get all updates coupons and exclusive free graphic resources every week. Read this page to have more information about the newsletter or fill the form below to subscribe now !
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
- 30+ Newly Fresh Web Design Layout Tutorials | iwebask
- Web Design Tutorials: The Ultimate Roundup (part-III) | How It Easy (HIE) Computing community
- 39 Best Photoshop Web Page Layout Tutorials | Late Night Stop
- 10+ Professional Web Designing Tutorials @W3Graphix
- 67 Web Layout Design Photoshop Tutorials
- Around 160+ Great Web Design Tutorials Collection
- 250+ Best Web Design Tutorials to Take Your Creativity to the Next Level – Part 2
- 20 Sleek Photoshop Web template tutorials in iapdesign « Downgraf – Design weblog for designers
- PSD Website Templates: Free High Quality Designs | 1step web design: Best for developer and designer
Leave a reply
Subscribe for free to the grafpedia’s newletter and get all updates and exclusive free graphic resources every week !
- Actions (7)
- Backgrounds (2)
- Brushes (31)
- Cinema 4D (1)
- Contests (4)
- Designing (16)
- Drawing (13)
- Effects (4)
- Gradients (4)
- HTML5 / CSS3 (2)
- Icons (52)
- Illustrator (3)
- Layer Styles (4)
- Logos (1)
- News (14)
- Patterns (5)
- Photo Effects (3)
- Psd Themes (101)
- Psd to HTML (1)
- Stock Images (20)
- Templates (103)
- Text Effects (1)
- Textures (17)
- Tutorials (129)
- Vectors (134)
- VIP Downloads (217)
- Web Elements (16)
- Web layouts (108)
- Wordpress Themes (1)
Facebook Grafpedia Group
© 2011 | Grafpedia is proudly powered by Wordpress edited by GrafikNetwork
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…
Just loved it ! Very cute and unusual!
I’ll try to re-create a new one following these steps! Thanks ;] !
inspiring tutorial…
Thanks a lot…
This is indeed unusual……
I want to train and become as good as you guys!! I hope you to continue updating the blog. Bookmarked this page.^^
awesome.. I have learnt lot from this web layout.
very innovative and creative designs..
I got lots of ideas from here. I love the colored designs.
Hello, I need to spend some time researching more about topics like this. Thanks for great information I was looking for this information for one of my school assigments. I will com back to read more. Thanx.
nice tutorial thnx for sharing
awesome resource thanks for sharing
Very good design and tutorial, thank you!
What I find so itenresntig is you could never find this anywhere else.
Nice banner tutorial
thanks for sharing this
This is something new. I didn’t know you could use Photoshop to create websites. Still have a lot to learn. thanks
I’m french but I undersand all you explain ! Thank you so much and I hope you will post your continuation very quickly !!
I’m french but I undersand all you explain ! Thank you so much and I hope you will post your continuation very quickly !!
I am very appreciate for this, thx!
This is a terrible tutorial. Nice color scheme, everything else is low quality. No detail in this design. It’s like.. you had a good when creating this.. but didn’t give 100% on it.
Awesome tutorial thank you!
This is a great design but you haven’t told anyone the colours you used, and we have to buy the patterns?
very nice 1
You are the best. Thank you very much, this was kinda hard but I got the gist of it by trying hard.
How is the shadow made under “In the middle of this layout I will add some images, and some text”
Interesting and very efficiently written post. It will be valuable to anybody who uses it, including yours truly. Keep doing what you are doing – i will definitely read more posts.
Awesome web layout tutorial
Thanks so much for sharing it
Keep up good work
wow this is great totourial tnx for sharing
Hi,
Thanks for the sharing this
Awesome man.. excellent. Thanks
This is excellent post. Very useful. Thanks for sharing
Truly inspiring, you just gave me an awesome idea