Guest George || Oxyden Posted September 15, 2010 Share Posted September 15, 2010 Hello everyone, I was looking around the web and found a cool game that gave me a big inspiration. I found the game Prison Block and loved their template so much I wanted to make something...kindof similar. At first I was going to make a duplicate but then decided to use some of their ideas for a FREE design I would release to this community. You may download the final product and view it below and if you wish to see a brief tutorial of how I made it, keep scrolling! Download link: http://rapidshare.com/files/419288340/prisonlayout.psd TUTORIAL: Please use PSD as reference material. Step 1: Designing the background For this step I decided to create a prison wall as you can see above. The first step I took was adding the wall texture. I used a brick wall found on a free textures site and at first it was too light so by creating a black background and putting the transparency of the wall to 40% I was able to create a nice grey dark wall. Make sure to find a repeatable brick wall! The next step will be to add a top "cement" block as a ledge. This I used a very simple effect shown below. By creating a rectangle in photoshop, I was able to change the properties to something that resembled a cement ledge: Please refer to the PSD file that you downloaded. Make sure to add a brick like texture of your choice preferable in the category Texture Fill 2. Then the next step was creating rectangles as rods and the barbwire from a brush package and there you have a wall. The final detail I added was the ground which is a gradient with noise to represent the bumps in cement. Step 2: Header and Logo The header was very easy, I used a gradient stroke in photoshop and added a texture and changed the transparency level to a darker shade. You make 2 rectangles, one for profile information and the other is for your user bars. The final feature of step 2 was the logo. I used 2 resources for this, which one was a skull and crossbones and a police badge. By putting them together it created a unique logo idea. I then used an old wood texture and cut out a plank like shape and made it black and white. By putting 2 together, I was able to place the words: Prison Lords on them and change the text transparency that is similar to old paint. Step 3: The Content The content area contains a navigation bar which was a black shape with brush strokes on the edges and the planks as titles. The main content which was like the site border, a 1px width border with a texture filling and transparency set lower to make it darker. I used some tape and other graphics to spice up the template. All this can be customized, changed and done to the designers choice. There you have it! A very simple tutorial that goes through my steps, I did not make this very long or in detail as there is the PSD you may experiment with. I do request that under the CC that you may use and modify this to your own liking and game but there must not be any resale or distribution other then free. Please acknowledge my work and if possible, give reference if you use. Me and Dave will now be focused on our free military game, InfantryX so we will not have any time for much of these free tutorials. Thanks, George Oxyden This template is designed under the Oxyden Studio title and contains images that where created by George Liu. Other images include badges and the skull are copyright to their respectful owners. It is suggested to link back to http://oxyden.net/ if you use this template but is not manditory. This design is copyright, all rights reserved to George. You are not allowed to resell or distribute this template unless it is done free with permission from original designer. You MAY edit and use this template with your sites etc. Quote Link to comment Share on other sites More sharing options...
Dave Posted September 15, 2010 Share Posted September 15, 2010 If I have any free time soon I will code this layout up for the community. Quote Link to comment Share on other sites More sharing options...
Guest George || Oxyden Posted September 15, 2010 Share Posted September 15, 2010 My site seems to be down for a bit so I will be uploading the PSD to another site. Bear with me here sorryz. Quote Link to comment Share on other sites More sharing options...
Guest George || Oxyden Posted September 15, 2010 Share Posted September 15, 2010 Ok the link is working now, please comment on what you think! Quote Link to comment Share on other sites More sharing options...
Maniak Posted September 16, 2010 Share Posted September 16, 2010 Looks awesome! If this gets coded up; I might have to use it :P Quote Link to comment Share on other sites More sharing options...
Aries Posted September 16, 2010 Share Posted September 16, 2010 very nice template, you should of released it as a payed template as the quality of it is very good! sent you a PM. Quote Link to comment Share on other sites More sharing options...
Guest George || Oxyden Posted September 16, 2010 Share Posted September 16, 2010 Thanks for all the positive feedbacks guys! I really appreciate it. I just thought it would be cool to release something for free as I have not done that for a while now ;) Quote Link to comment Share on other sites More sharing options...
MrGodfather Posted September 18, 2010 Share Posted September 18, 2010 I'm making a post-apocalyptic game. So this layout would be AMAZING for it. I'd love if you released the code for it. :D Awesome work. Quote Link to comment Share on other sites More sharing options...
Guest George || Oxyden Posted September 18, 2010 Share Posted September 18, 2010 Ya thanks for the complements! I only did this in PSD so thats all I am able to offer but if someone is willing to code it as there are alot of people wishing to have it coded, would be very cool. Quote Link to comment Share on other sites More sharing options...
sho2pro Posted September 19, 2010 Share Posted September 19, 2010 Oh please Oh please Oh please who ever is reading this post and knows how to code, CODE IT now! F*CKING AWESOME work GEORGE. I know how to cut and slice but I just don't know how to get all the other little details. But WO.0AH you smashed IT BIG TIME! Quote Link to comment Share on other sites More sharing options...
CJ - Twitch Posted September 19, 2010 Share Posted September 19, 2010 I have this coded however It's for my engine, Looks great, ;) Quote Link to comment Share on other sites More sharing options...
Dayo Posted September 20, 2010 Share Posted September 20, 2010 i have this coded for mccodes V2 i will release this when i release the template section of my archive Quote Link to comment Share on other sites More sharing options...
W3Theory || Peter Posted September 20, 2010 Share Posted September 20, 2010 Good for a tutorial nice job, just to much like prisonblock.com ! But great for free! Good contribution to the community george. Quote Link to comment Share on other sites More sharing options...
Dayo Posted September 20, 2010 Share Posted September 20, 2010 agreed, i have altered the BG so it dosent look so similar Quote Link to comment Share on other sites More sharing options...
Guest George || Oxyden Posted September 21, 2010 Share Posted September 21, 2010 Thank you Dayo for your help in coding it :) the reward of designing a free template is people using it ;D and yep, as I mentioned, it looks similar to Prison Block. Quote Link to comment Share on other sites More sharing options...
H4x0r666 Posted March 22, 2011 Share Posted March 22, 2011 wowowow :D :thumbsup: Awesome! Soo Dayo :D did you coded the Layout for Mccodes v2 yet? i really wanne use it ! 8o i love this :love: btw i think im going to change the color of the energy and experience bar (blue and red) and maybe later .. adding up 2 extra bars for "Will" & "Brave" ;) i can't wait.. Quote Link to comment Share on other sites More sharing options...
Paul Evans Posted March 22, 2011 Share Posted March 22, 2011 how did you make the barb wire... Quote Link to comment Share on other sites More sharing options...
Dave Posted March 22, 2011 Share Posted March 22, 2011 how did you make the barb wire... Most likely using a brush. Quote Link to comment Share on other sites More sharing options...
Danny696 Posted March 22, 2011 Share Posted March 22, 2011 As he says paul, it was a photoshop brush Quote Link to comment Share on other sites More sharing options...
Paul Evans Posted March 22, 2011 Share Posted March 22, 2011 :P i didn't read that my bad Quote Link to comment Share on other sites More sharing options...
MrAnthony Posted March 23, 2011 Share Posted March 23, 2011 Hmm might give it a go at coding this will post codes if i code it Quote Link to comment Share on other sites More sharing options...
H4x0r666 Posted March 23, 2011 Share Posted March 23, 2011 Hmm might give it a go at coding this will post codes if i code it great i can't wait :thumbsup: gl mate ! Quote Link to comment Share on other sites More sharing options...
Dayo Posted March 24, 2011 Share Posted March 24, 2011 i have the HTML Code but i have to fix the images as i made them smaller when i made it into the FB theme and forgot to make a copy lol Quote Link to comment Share on other sites More sharing options...
W3Theory || Peter Posted March 24, 2011 Share Posted March 24, 2011 Dayo let me know if you got it, if not then I'll do the coding for this. Thanks, Peter Leaman Quote Link to comment Share on other sites More sharing options...
H4x0r666 Posted March 26, 2011 Share Posted March 26, 2011 Peter Good Luck :thumbsup: i will look to this thread everyday 8o im so excited ^^ -P.s How Long does coding normaly take? :thumbup: Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.