3,259 Subscribers
May
Create a Game layout – Clan Layout
Clan layout
In this tutorial you will learn how to create a nice looking game layout, or a clan layout.
If you love playing games and if you want to create a clan website together with your friends, then follow my tutorial and you will see how you can create a website like that.
Please note that you need to have basic knowledge of Photoshop if you want to follow this tutorial. Layered PSD layout is available only for VIP Members. Join now to download all premium downloads from Grafpedia
Let’s start with a new document with the following size: 960 x 900 pixels. With Gradient Tool, add a simple color over your background layer
Select Rounded Rectangle Tool (set the radius size to 6 pixels) and create 2 shapes. The first one we will use a top navigation and we will add buttons later in this tutorial. And the second one will be our body of the website where we will place our main content
For the top navigation bar add the following layer styles
On the top navigation bar I will create a button
You can create this button with Pen Tool, or you can create with Rounded Rectangle Tool, and then apply a warp effect
Load the selection for this button (rasterize the shape first)
You will see a selection around your button
Move the selection with Arrow keys a few pixels to the bottom
Create a new layer (press CTRL+SHIFT+ALT+N) and with Brush Tool, I will create a few points over my button, then I will move the selection back to the original position, and I will add more drawings with the Brush Tool.
Note: I have used a Wacom Table to create this white drawing over my button. I have full control over the pen pressure, and I can create smooth drawing like this very easy. If you want to achieve the same effect, you can use a round smooth brush, and you can lower the opacity for the brush to 50 %
Please keep in mind this effect, because we will need the same effect later in this tutorial
I will create a few shapes with Rounded Rectangle Tool
I will add the same layer style for the black shapes
This is my result
With the same method as above I will add more buttons on different parts of the website
Now I will add some images, and some text
In the middle of the layout I will add another image from a popular game
Over the button I will add some shapes and some text. For the shapes I will lower the opacity of the layer to 15 %
Over the image I will create another rectangle, and I will cut the top part of the shape
I will lower the opacity for this layer to 20 %, and then I will write some text over it
With Rectangle Tool I will create some shapes with different colors
I will add some small avatars and some text. I will also add some triangles made with Pen Tool
Right below this box, I will create a login Box. I will select Rounded Rectangle Tool, and I will create 2 shapes
Under The Login Text I will create 2 circles with different sizes. I will add some layer styles to create like a metallic text
Under this login box I will add some images and a dashed line made with Horizontal Type Tool
On the top navigation bar I will add some text and some flag icons
Between the texts buttons I will add a few lines made with Pencil Tool (set the brush size to 1 pixel) then I will erase the bottom and the top part of the line with a smooth brush
On the header I will add a logo (in a few days I will show you how to create nice 3D Logos in a few seconds)
On the right side of the header I will add 2 shapes, and some nice icons
Optional you can add a stock image right above the background image
To add a nice effect over this layout I will create another layer above all layers and with Brush Tool I will create some random drawings like in the following image
I will change the blending mode for this layer to Overlay. This is my final result
I hope you like my tutorial. This PSD layout is Available only for VIP Members.
VIP Members can Log in and Download! If you’re not a member, you can of course join today!
Want to become 70-646 certified? Then subscribe for 642-446 online training to achieve guaranteed success. Pass your 650-177 exam on first try using certified material.
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 “Create a Game layout – Clan Layout”
Trackbacks
- Small web design element tutorials collection | Design-Notes
- The IT Knowledge » Creating Professional Theme Components
- 160+ Mega Web Design Tutorial Roundup | tripwire magazine
- AnthemGDA » Blog Archive » 30+ High-Quality PSD Website Templates
- 185+ Web Design Tutorials using Photoshop, CSS, HTML etc. | tripwire magazine
- 31个高品质的PSD网站模板下载 | 创意悠悠花园
- 36 Best Photoshop Web Layout Design Tutorials Part 4 |dzinebook.com | DzineBook
- The Ultimate Web Design Tutorials | Online Tutorials For Designers
- Photoshop ile site nasıl yapılır? | Bildikce - Güncel Blog
- Photoshop ile site nasıl yapılır? - Genel - Troypc
- Adobe Photoshop ile Nasıl Site Yapılır ? » Grafikteyiz.NET | Grafik - Tasarım Platformu
- 30+ Newly Fresh Web Design Layout Tutorials | iwebask
- Web Design Tutorials: The Ultimate Roundup (part-III) | How It Easy (HIE) Computing community
- Amazing Web Design Tutorial | VapvaruN | WP Experts
- 70+ Best photoshop layout tutorialDesign Freebies
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
and how to create html from this?
can you create tutorial for cuting and coding
great work…..the web layout looks great
thanks
Thank you sooo much for this!!!
klavins21, there are tutorials how to cut in this kinda pictures on youtube, i can’t give you URL because I’m on a limited web service atm.
and how to create html from this?
can you create tutorial for cuting and coding
Forgot to mention great post. Looking forward to seeing the next post!
I will create very soon a basic tutorial on how to turn the PSD layout to xhtml/css website
emmm…. why did that person copied my nickname (the one who writed on 12:29)
???
Why don’t you create an account on Gravatar.com ? you will not have this problem anymore
Hi,
Super post, Need to mark it on Digg
Have a nice day
Nice layout! To the people wanting to cut out of the psd, there’s a plugin you can get called SiteGrinder which cuts it and exports as valid XHTML. Otherwise, learn some basic XHTML and CSS from w3schools and it’s not hard to code from scratch,
.
This layout is very clean and professional, great job.
Featured here: http://www.presidiacreative.com/web-picks-20/
wow definitely awesome and also assassins creed is been featured wow! nice combination for the tutorial…
Great tutorial… but one thing…. you missed the t out of matches.
Even if you missed a t the layout is still great. one of the best one i have seen. Did you created all this great layouts ? If yes i really want to know you personally maybe you can teach me better how to create such wonderful game layouts
Wow really impressive site design. An awesome use of gradients too, not too far but not too little. Nice work!
Great design and asstunishing layout. However can you please create tutorial for this simple logo that you use in this tutorial? Please I would really want to see how can be logo made simple in PS.
Best regards,
S;)
Tomorrow i will post a tutorial on how to create a 3d logo in photoshop
Great Job, I was actually thinking of like this layout, 1 point that header (space between navigation and stage) was not good executed or it need to work on
take care and best of luck
Hello, Great Tutorial as usural but i strugled with the making of the buttons can anyone help me create them?. Thanks in advance, and assistance is appreciated.
What problem do you have ?
Great Tutorial what else can i say?i learn alot…and i want to learn more a lottttttt..coz im very interesting
more…..its really cool Great Tutorial
yeah… I like its design button… thanks. btw nice tooltips
thx u so much
Can you give me the stock image at the last of tut
Thanks
Hello, What the font you use?