The World of Super Mario in Photoshop

 

As a kid, I remember spending hours playing the original Super Mario Brothers on the original NES, with those awkward, rectangular controllers. For many people, these old games bring back a warm, comfortable, nostalgic feeling full of fond memories.



So, for old time’s sake, let’s re-create some of that classic 8-bit artwork from the original Super Mario Brothers. In Part 1 of this tutorial, we’ll take a look at the landscape elements, the building blocks, the skies, the question blocks, the warp pipes, etc. that make up the Mario world. Later, in Part 2, we’ll explore the animated sprites- Mario, Luigi, the goombas, the koopas, the piranha plants, the power up mushrooms, etc.
While this is a Photoshop guide, really, you could do this in MS Paint just as well. All you need is the pencil tool and a little patience. So let’s look at the building-blocks of the Mario world.

The Above Ground Color Palette
The original game h ad a limited color palette that made up the above-ground landscape. We’ll start with the colors from Level 1, since it contains the most basic building blocks of our world. The colors we’ll be using are:
#FFFFFF – clouds, highlights, etc.
#000000 – shadows, outlines, etc.
#5482E4 – sky
#3CBEFC – cloud shadows
#FCA244 – question block base
#E45E14 – bricks, ground
#ECD2BC – brick highlights
#BFCE1C – bushes, warp pipe highlights
#04AE04 – hills, warp pipe shadows, bush shadows
The Basic Brick Tile
All of the tiled textures in the game are 32x32px in size, so let’s begin with a 32x32px square in the brick color (#E45E14).

Now we need to draw our black lines to separate the bricks. Each brick is We’ll start at the bottom and work our way up. Each outline is 2px in width (or height) and each brick is 6px tall. So first, let’s do the horizontals.

Now we’ll do the vertical lines. Each brick is 14px wide. We’ll work our way down from the top row, which contains two full bricks.

Finally, u sing the brick highlight color (#ECD2BC), put a 2px line along the top of the brick tile if the brick is to be in a single row. If you’re tiling bricks more than one tile high, then you wouldn’t do this step.

The Question Block
Remember jumping up and whacking into these to get the coins and mushrooms that lie within?
To draw one, start with the question block base color (#FCA244) and, using either the pencil tool or the rectangular marquee tool, create a 28x28px square.

Now, using the brick color (#E45E14), make a 2px wide border along the top and left sides of the square. Then switch to black and make a 2px border along the bottom and right sides of the square. You should now have a 32x32px square with 4px missing from the top right and bottom left corners, like so.

Next, we need to draw the screws on the brick. These are just 4 2px x 2px blocks, each 2px in from the corners, like so.

Then we draw our question mark in the brick color (#E45E14), and finally, we also give it a 2px black shadow. This finishes up the question mark brick.

Ground Tile
The pattern on the ground tiles is a bit trickier. Once again, we want to start with a 32x32px tile in the brick color (#E45E14). Then we want to go around the inside edges of the tile and add a black border to the bottom and right, and add a border in the highlight color (#ECD2BC), to the top and left sides. Make sure you leave a 2x2px square in each color as the base brick color, like so.

Now we’ll go in with black and draw the outline of the brick pattern. I’m not really sure how to explain this pattern exactly, so it’s probably just best done by example.

Finally, we go back in with the highlight color (#ECD2BC) and draw highlights on the bottom and right sides of the black lines, leaving a few 4x4px squares in the original brick color to add more depth.

The Clouds
Mario clouds have a very distinctive shape, which you’ll see part of repeated later in the boshes. Again, this isn’t a shape that’s easy to explain. Start with a sky blue background (#5482E4) and make your document 60x60px in size, because the cloud takes four tiles to create.
Our basic cloud shape looks like this: Again, if anyone can find a definitive pattern or method to drawing this precisely, I’d love to hear it. I think this is just one of those things that you have to copy.

Next, we outline our cloud in a black 2x2px border, like so.

Finally, we want to take the cloud shadow color (#3CBEFC) and go in and create the shadows on our cloud.

Bushes
As I stated earlier, bushes and clouds share a similar shape, so let’s Ctrl+Click on our cloud to load its selection and then hit Ctrl+C to copy it. Next, let’s create a new document, 128x31px in size and again give it the sky blue background (#5482E4).
Now hit Ctrl+V to paste the cloud into the document. We want to align the top and left edges of the cloud along the top and left edges of the canvas, like so.

Now hit Ctrl+J to duplicate the layer and drag it to the far right of the canvas, like so.

Now hit Ctrl+V one last time to paste the cloud in the center of the document and then hit Ctrl+Shift+[ to send it to the back of the layer stack.

Now select all three layers in the layers palette (Ctrl+Click on the titles of each layer) and hit Ctrl+E to merge the layers. Now take your pencil tool and change all of the overlapping black squares in the middle to white.

Finally, take the pencil tool and draw over all of the light blue squares in the bush shadow color (#04AE04) and then, using the paint bucket, with anti-aliasing turned off, fill the white pixels with the bush color (#BFCE1C).

Warp Pipes
Next, we’re going to make the warp pipes. Remember, a the shortest possible warp pipe is 64px (one tile for the top of the pipe, one tile for the pipe itself), and their height can be as tall as you like, so long as the overall height is divisible by 32. For now, I’m going to create a 64x96px warp pipe.
So start with a new document in the dimensions that you want your pipe to be and fill it with the sky blue color (#5482E4). Then, on the top, outline a 64x32px black rectangle with a 2px wide border. Fill the square with the pipe shadow color (#04AE04).

Next, we want to draw the pattern for our highlights. This is pretty simple, 3 stripes down the left of the pipe done in the pipe highlight color (#BCFE1C). We want a 6px stripe, a 4px gap, a 12px stripe, a 2px gap and a 4px stripe, like so.

On the right side of the pipe, we want to 4px stripe with an 8px checkerboard pattern to the left, like so:

Now, to create the lower part of the pipe, just bring everything in two pixels on each side and continue it on down the length of your image, like so.

Finally, add a highlight, and a shadow, along the top of the pipe to finish it off.

Hills
Moving along, let’s create some hills. Hills are oddly sized, and though they require a 128x60px block of tiles (4 tiles wide, 2 tiles high), they don’t really fill up the space. Still, let’s start by creating a 128x64px image and once more, give it the sky background color (#5482E4).
Next, go in 18px from the left side of the canvas and, using the hill green color (#04AE04), make a 2px high, 92px wide line (this should bring the line to exactly 18px from the right edge of the canvas).

Continue stacking 2px high dark green lines up the canvas, each time shortening the line by 2px on each end, until your hill is 32px high.

On the next row, bring the line in 4px on each side, then 8px on each side, then put a 2x2px black square on the end of each line and at the top of the hill to finish its outline.

Finally, put a couple of trees on the hill to finish it off.


Coins
Last, but not least, let’s make a coin. Start with a 32x32px tile and create a 4x14px rectangle in the coin/question block color (#FCA244). Center the rectangle vertically, and place it 1px to the left of center horizontally.

Continue adding to the coin by making another rectangle 6px wide and 12px high, centered on top of the first one. Place an 8x10px rectangle atop of that, to make the oval shape of the coin.

Next, place a 2px black border on the right side of the coin and draw the inner inset lines, like so.

Finishing Up
Now that we’ve finished creating the basic components of our world, we can build any terrain we’d like using these basic building blocks. So go for it, design your own Mario level! Create a new document, the dimensions of which are divisible by 32 and overlay a 32x32px grid and start creating.




 

Hope you enjoy it & learn something new from this tutorial.

Determine best quality clipping path, clipping path service, low cost clipping path or photo editing & image masking service from Clipping Design. Clipping Design always assure photoshop masking , image editing service at quick turnaround time with Guaranteed client satisfaction on top quality SEO service. You can also discover 100% handmade clipping path & clipping path service in reasonable price.

Thank you…

Reference: freephotoshopguides