Soushi | Tutorials


Royale Casino

View Comments

 

 

Quick Tutorial Stats:
Image Count: 120 Word Count: 3950  Character Count: 21,546 Production Time: 15 Hours

Hello everybody!
So, "brief" introduction. In this tutorial as you probably have guessed by now (since you did click the link to access this tutorial, didn't you?) we will be creating a web layout for a casino. In this case, the ROYALE®Casino (which isn't a registered trade mark by the way, or maybe it is, but i don't own it. It just looks good with that little ®.

So, why did you click to view this tutorial? Bit bored? Looking for free money gaining tips in a photoshop tutorial? Or maybe you genuinely wanted to design a casino layout.
Wanted to create something which looks like this maybe?
As i'm pretty aware, most of you (ok, all of you) do not own an online casino. So it's a pretty pointless tutorial you may say? Well i'll reply to you and say no. Why? Because you will be learning how to use photoshop, using various tools, and techniques. That's what tutorials are really there for. When you see a tutorial on a website for a "Web Design Website Layout Tutorial" or again "Web Host Layout Tutorial", they're putting into context a tutorial to show you how to use photoshop, what techniques are used. They're not telling you how to set up a web host. Maybe some do, but i'm not here for that. I put into context my tutorials so that you can learn photoshop, but also learn and experiment the different aspects of the genres. I mean in this tutorial you will be working and creating things which you'll see a lot at online casinos. (Flashy text, crisp design, etc).

So yeah, you should learn a few things or two if you're not super advanced in photoshop. The tutorial is relatively easy and shouldn't give you too much trouble. Of course i can't tell you how to do everything, so you'll have to get creative and do your own things at certain moments, let's get started and hopefully we'll all be spending our money in your new online casino! (only joking)

  THIS IS THE PART WHERE THE TUTORIAL BEGINS, YOU CAN SKIP WHAT IS ABOVE?!
  1. Step one, the canvas. We're gonna be working on a slightly larger than usual canvas than for my other web layout tutorials, so let's get a nice 850x650 px canvas up on our screens.
    You can have a transparent or coloured background it doesn't matter.
  2. Create a new Group, and name it Header.
    Also create a new layer in that group and name it Header.
  3. Grab your rectangular marquee tool and use these settings.
  4. Now click on your canvas to bring up the selection, and fill it in with any colour (CTRL+Backspace,  or use the paint bucket). Deselect (CTRL+D)
  5. Grab your move tool and move it to the top of your canvas. It should be touching the top. Also at the length should fit perfectly inside the canvas too.
  6. Now go to the blending options for this layer and use these settings.



    Your canvas should look something like this now, with your header at the top.
  7. Create a new canvas, with a height of 1 px and a width of 40px and a transparent background.
  8. Zoom in a little, grab your rectangular marquee tool, and set the width to 20px. (just put 1 or more for the height).
  9. Click on your canvas, and move your selection to the right. Fill it in with black.
    You should have something like this.
  10. Next go to Edit > Define Pattern... Name your pattern as you wish.
  11. Let's go back to our casino canvas! Create a new layer and name it Pattern. (still in your header group).
  12. Set  the opacity to 20%. Now CTRL+Click on your header layer to bring up a selection. Grab your paint bucket tool.
    At the top left you'll notice a drop down menu which says Foreground. Click that and choose pattern. Now click on the little box and choose the pattern we just created.
    Now fill in the selection with the pattern, on your pattern lay, but don't deselect just yet.
    With your selection still active (and your pattern layer active), grab the rectangular marquee tool. Now press on your down arrow key once, to nudge the selection down 1 pixel. Now hit CTRL+SHIFT+I (or go to selection > inverse) to inverse your selection. Now hit delete or backspace on your keyboard, deselect. What we've done is cut off the pattern at the top so that it doesn't overlap the inner shadow we put on the header layer.

    Your header looks like this now, doesn't it?
  13. Still working in the header group, create a new layer and name it gradient.
    Set your foreground colour to #1e1e1e.
  14. Grab you paint brush tool, and use a nice big brush, like 100px smooth brush.
    CTRL+Click     your header layer again and now what you want to do is draw a nice line at the top of your header layer. Start otuside of your canvas (in the grey area) and while holding shift and start draging right (or left if you started from the right ;-)). It's up to you how you want it to look, so play around a few times with how much you paint on and at what height.

    Mine ended up looking like this.
  15. I've already done it in the picture above, but once you have brushed and you're happy with it. Deselect. Now just grab your move tool and press your down arrow on your keyboard once to nudge it 1 pixel down, so that it doesn't overlap the inner shadow again.
  16. Create a new layer (in your group) and name it Gold bar.
  17. Take your rectangular marquee tool and use these.
  18. Click on you canvas, fill it in, deselect, and use these blending options.


    (On the gradient, i put reverse, but maybe you don't have to. Just make sure the dark side in to the right).
  19. Grab your move tool and move the bar at the bottom in a fashion that it overlaps the bottom of the header layer.
    You should aim for something like this.
  20. Phew, that's the header done, tap yourself on the back! (and close the header group(click little arrow)) We've got a lot to do still! :O!
    Create a new layer, name it, uh.. Promotions. We're done with the header, so move this layer outside of the group, and move it under the group, too.
  21. Set? You've guessed it... grab your rec. marquee tool. Use these if you wish.
  22. Now just click your canvas, fill this in, with white so we can see it, doesn't matter... deselect.
    Actually for this step you might want to disable to gold bar layer, and the drop shadow on the header layer. Because we want to move this (move tool) promotions layer right under the header. So that it looks something like this (without shadow/bar)

    and with:
  23. We'll come back to the header later, for now we're working on the layout of the.. layout. So create a new layer, under your promotions layer. Name it Background.
    Grab your rectangular marquee tool and use these.
  24. Click your canvas, and fill in the selection with #121212. Deselect and move this right under your promotions layer. That's easy, no screen shots ;)
  25. Create a new Group. Name it... suspense... Footer.
  26. In group. Create New layer. Name: Footer. Grab: Rec. Marquee tool. Use: These settings.
  27. Click canvas to bring up selection, fill it in with #0d0d0d. Deselect. Move it right under the Background layer.
  28. Your canvas should look like this now (albeit zoomed out :P )
  29. Go to your footer layer and use these.

  30. Now create a new layer, name it pattern, opacity 20%. And do these same as for the header. Ctrl+click footer, paint bucket, paste pattern, keep selection, cut off the top for the inner shadow, deselect, etc.
  31. Same again, create a new layer, foreground colour #1e1e1e. CTRL+Click footer, Brush tool, (bit smaller... 65px), deslect. nudge down 1 pixel.
  32. Handled that alright? It's just the same as for the the header, so if you're stuck just use the steps for the header.Your footer should look like this now. You can close your footer group for some space now.
  33. So. OK. Now let's get started. For the purpose of this tutorial, we'll be using images i give you :) So download this image to your computer.
    Download first image
  34. Open this image in photoshop. Now we're gonna make it slightly more lively, just in colour. Nothing much.
    In the layers palette, click the little black & white circle and create a Color Balance layer. Use these.

  35. Now your image should look more colourful and lively, merge the two layers (CTRL+E) and save it (CTRL+S). Now select all (CTRL+A). and copy (CTRL+C). (yes, lots of control.)
  36. Go back to your casino layout. Click on your promotions layer to make it active. Now CTRL+click on your promotions layer to select it.
  37. Now press CTRL+SHIFT+V or Edit > paste into. This will paste your picture into the size of the promotions layer.
  38. This is the tricky part, to explain at least. Hit +CTRL+T on your new image layer to bring up the free transform. Now grab a corner, and while holding shift start dragging it inside to make it smaller. Don't make it too small. For the purpose of this tutorial, you should definitely re-size it to about the size i'm doing. Here's what  re-sized it to. Note how i moved it to the right (do that). To move it, just grab your move tool and in the layer palette, click the image of the image (lol), not the mask.

    So, you should aim for this. Note the white space on the left, that's the rest of the promotions layer which we're gonna fill with another picture now.
  39. Okay, we've got space now on the left. Or we should ;) So. Download this picture.
  40. Open up the picture in phtoshop, and add a color balance to this one too.

  41. Merge it. Save it. Copy it. Go to your casino. No wait don't, stay here and do the tutorial!
  42. Again CTRL+Click the promotions layer, paste into. Now you can resize this one too (CTRL+T), but just a little.
    Place it to the left. You should aim for something like this. (trust me, you should.)
  43. Ooookay. Now. First things last™. Move your Background layer above your promotions, and your two images.
  44. Create a new layer, above your images, but below your your background. Name it Top 10.
  45. Take your rec. marquee tool and use these.
  46. Click canvas to bring up selection and fill it in with anything, deselect. Blending options:


    (Again, some gradients show Reverse on, maybe you don't need it. Just make sure they look like the ones in the screens. ie: the dark colour on the right, the light on the left, etc.)

  47. Just take your move tool and move this fella over the top pictures, where they meet each other. You should have something like this.
  48. Now create a new layer, don't need to name it. Grab your rectangular marquee tool and use a length of like 300px and a height of 15px. Fill in the selection with #3b550c. Create a new layer, and draw a straight line with the pencil tool (hold shift). Move it to the top of that green rectangle you just created. Create another new layer and use the same rec. marquee settings and fill it in with #d5fa70.
    Move this lighter green layer right under the dark green one. Everything should be touching each other. Now merge these layers.
    Set the opacity of this new layer to 30%. Now what you want to do is duplicate this layer and move it right under the first one so that they're touching. What you want to have it 10 lines (hence the Top 10). When you have 10 lines, merge them together Move them over your Top 10 layer and CTRL+Click your Top 10 layer. Not hit CTRL+SHIFT+I to inverse the selection and hit delete/backspace. This will delete what's outside of the top 10 layer. You should have this.
  49. Create a new group, name it Red Bar, also create a layer called Red Bar inside the group. Place the group above the Background layer. Select the Red Bar layer Grab the rec. marquee and use these.
  50. Bring up the selection, fill it in and deselect. Use these.

  51. Now we'll add that pattern again. So create a new layer, name it pattern. Set the opacity to 30%. CTRL+Click the red bar layer. Fill in the selection with pattern, deselect. But you don't need to chop off the top this time.
  52. Create a new layer again, name it gradient. Now set your foreground colour to#211c1c (for the luls). CTRL+Click the red bar layer again.  Grab a smaller brush, like 13px. and use the same technique as the footer and header.
  53. Now go to the blending options for the gradient layer and use these.
  54. Move this group (with the red bar, pattern, and gradient layers inside) so that it sits on top of the background layer and the two images. Like so. Also note how your red bar should look like. You can close the group.
  55. Alright now we're gonna be doing the menu. This may get tricky for the ones who are  not too good with photoshop. I'll try and explain what's happening here. Okay.
    Create a new group, name it. Menu.
  56. Create a new layer and name it Red. Take the rounded rectangle tool and use these.

    Now click on your canvas to bring up the shape. Take your Direct Selection Tool. (It's the one which looks like a white arrow, after the text tool).
  57. Bit of shape shiftingz now. So. With your direct selection tool, click the shape. And then click the point right to the left, in the middle.
    Hold shift and hit your left arrow key one time. To nudge it left 10 pixels.
  58. Now click the point right above it, and while holding shift, press your left arrow key 5 times.

  59. Do the same for the right hand side, except you nudge them with your right arrow key.
  60. When you've done that and have your shape, with the direct selection tool, right click inside the shape and select Make selection. Press OK on the next dialogue.
  61. Fill this in with white, and deselect. Grab your move tool, and move this at the top, but not exactly centered. Now, uh. You need to nudge it up (top arrow key on your keyboard) so that 3 pixels are outside of the canvas. I'll take two screens to show you how it is when it's fully inside the canvas and when 3 pixels are out (like we want it).Inside:

    Outside:

    Uh, yeah so the screens don't help much... so.. JUST NUDGE IT UP THREE PIXELS OUTSIDE, OKAY!? giggle

  62. Go to blending options and use these.


    To get this.

  63. Now create a new layer and name it gradient. You've guessed it. Get hold of your brush tool. Size 35px. Also set your foreground colour to #b72736.
  64. CTRL+Click your Red layer to select it, and then draw a straight line with your brush (hold shift).  You want something which looks like this.
  65. When you're happy with your "gradient". Go to the blending options for the gradient layer.

    This should add a nice effect to your menu, which in the end should look like this.
  66. Now you do the menu like you wish. I'm just going to show you how to do the other part of the menu to the left (the gold one). The technique is the same for the blue and green parts of it.
    Duplicate your Red layer and name it Gold. Move this layer under your Red layer, in the layers palette.
  67. Go to the blending options and use these.

  68. Duplicate the gradient layer. Name it Gradient Gold. Move this under the Red layer but above the Gold layer.
    Go to blending options.

    (Note that i didn't include the inner shadow, because we duplicated the gradient layer which already had it. Keep it on.)
  69. Now grab your move tool. Select your Gold layer, hold shift and press on your left arrow key 8 times to move it left 80 pixels. Do the same for the Gold Gradient layer.
  70. Now CTRL+Click your Red layer to select it. Click your Gold layer in the layers palette to make it active. Now hit delete or backspace on your keyboard to delete what's not visible. We did this so that the drop shadows don't overlap. Notice how it's darker before we deleted the hidden parts of the Gold layer.
    You should have something close to this now.
  71. So just use the same techniques if you want to add more 'tabs' to the menu, like i did.
    Okay now we're just going to create some boxes where online casinos usually put some things such as "How To play", "Most Popular Games", "Download Client", etc.
    So create a new group and name it How2Play.
  72. Create a new layer, name it how2play. Now take your rec. marquee and use these.
  73. Fill this layer in with any colour, and go to the blending options. (I'm not going to repeat to "click canvas, fill, deselect, etc for all these boxes...)

  74. OK. Now, as seen in my other tutorials, notably in my simple portfolio tutorial, we can see that stroke is not perfect. (hmm... what?). Well, zoom in on your box, to one of the corners. What do you see? Wait i'll show you.
  75. See that little dark pixel? We don't want that. When zoomed out, it looks like it's not a sharp edge. So. stay zoomed in. Create a new layer, name it Fix, or whatever floats your boat. Now take the Eyedropper Tool (I) and select that light yellow colour next to the dark pixel. Next grab your pencil tool, get a 1px brush and click on that dark pixel. You should now have this.
  76. Do this for all other 3 corners!
  77. Now close the group, and click it to active it. Grab your move tool and move it so that is it 10 pixels from the left, and 10 pixels from the Red Bar. As so :)
  78. New group, name it Top Games. New layer, name it Top Games. Rec. Marquee, use these.
  79. Fill this in any colour and hit us up with the blending options.

  80. Now same problem again. Zoom in, but this time we also have the inner shadow to fix.

    So using the same technique as before, create a new layer and get your eyedropper to select the light grey inner shadow and fix it. Also fix the stroke of course, all corners, please.
  81. Now is the time to add some lines using the same techniques i showed you for the Top 10 layer.
  82. Close the group, and grab your move tool to move this 10 pixels to the right of the How2Play box and 10 pixels from the red bar, as so.
  83. New group, name it Win Rate. New layer, name it Win Rate. Rec. Marquee, use these.
  84. Fill this this any colour, copy the layer style of the Top Games layer. (Right click on it in the layers palette) And paste it onto the Win Rate layer (Right click on it in the layers palette).
  85. Zoom in, fix the corners. (hahaha)
  86. Move it 10 pixels to the right of the Top Games layer. It should sit perfectly 10 pixels away from the Top Games and the right edge. As so.
  87. Create a new group ( :| ) name it Download, new layer... rec. marquee... (yes i'm as tired as you :$ )
  88. Fill it in and use these.

  89. Don't go yet, you don't want to forget to fix the corners. ;)
  90. Move this to the right of Top Games and under Win Rate.
  91. Phew! That's done.. thank god for that. Well.. at this stage the layout is pretty much finished. All that's needed now is to add some text, some other little details etc and it's finished!
    I'll be guiding you through a few of them, but you'll have to do the rest yourself! As always, experiment!
    So, the most import part... what's that? The logo! Create a new layer, above everything else.
  92. So basicaly it's up to you. You have to get creative. Get a suiting font for a casino. I used Century Gothic. Play around and place it like you wish. I'll show you mine now so that you can get some ideas.
    Put a little tag line under it to make it look professional, and you're done! You can also add a line a the bottom. I'll tell you how to do that too.

    So to achieve that effect, use these blending options on your text.

  93. To draw a line like mine under the logo. Draw a selection a few pixels high and about the same length as the size of your text. Then add a layer mak to that layer. Fill in the mask with black so that the layer isn't visible anymore.
    Now grab your gradient tool and use these.

    Remember where the centre of your line was and click there, holding shift drag the gradient towards the right or left, but not too much. The more you drag the less the bar will be faded out. Play around till you find something you like. Use the screenshot of my logo for reference.
  94. Once you have your logo done, you're basically done (yes, you can be done twice, or more). I put a bit 98.7% in the Win Rate box.
    Just copy the layer style of the logo i just gave you, and add an outer glow.

    To get something like this in the end.
  95. Add some text and a promotion on the Roulette. I again used the same style, and gave an outerglow. The text at the top if simply a drop shadow.

    Also the picture with the people is a comon one in online casinos to show offers.
    I used the same style again, but changed the colours of the gradients and gave them outer glows.
  96. You can also seperate the links on your menu with trendy inset seperators. To do this zoom in your menu. Create a new layer, grab your pencil tool and draw two lines like this.

    The first line is #5d1017 and the second i #a63d48
  97. Merge the two (if you drew them on seperate layers) and add a layer mask. use the same technique as for the line in the logo. Fill it in with black so that the serpator is not visible anymore. Use the same gradient i showed you. Start from the centre and this time drag up or down. You want something like this.
  98. Type in your menu links, leaving some space. Then duplicate the seperators and place them in between. Your menu is done!
  99. Next continue filling in your boxes and your layout with various props. It's up to you if you want to fill them. I usually do it because it just looks better, and it also gives me an idea of what it could look like if it really had content inside.
  100. Looks like we've reached the 100th step! Well this is fake, because i'm just showing you what i came up with! Ah but wait! It's a valid step, because it can help you determine what you want to put on the layout, where to place it, etc!
    Click for full size!

    There you have it! Your very own online casino layout! I hope you enjoyed this tutorial! I certainly put a lot of effort into it.
    It took me a good 10 hours (including toilet breaks ;P ) to do create it. And well 5 hours to type it all up.. so! I do hope you can put all this to good use, and that you've learned something!

    Have fun, and hope to see you again soon for some more crazy tutorial action! :D

    Copyright notice: I do not claim ownership of the images of the roulette (royale roulette) and the people at the table (€1500 free) used in this  tutorial. These images are copyright of their respective owners. The name "Casino Royale" is not a registered trade mark that i claim to own, its sole purpose in this tutorial was for example purposes. 

blog comments powered by Disqus
back to top