Ramadhan Design Case Study/Tutorial

Posted by on Jul 13, 2012 in Tutorials & Walkthroughs | 4 Comments

 

 

If you go to this link you will find the posters I have done to welcome the blessed month of Ramadhan (رمضان‎ ). I have been designing them since four years ago which makes this year 1433 H being the fifth year. I realised that I have come a long way since then in terms of figuring out my style, and I realised I am better at hand rendering typography and flourishes. It’s something I always wanted to try but never really knew how to go about it. Being on dribbble  has really got me inspired,  also browsing around online and looking at how some other designers and typographers create their pieces. So with the little bit of stuff I have picked up on, I’ve been practising typography whenever I can, and practice does make you better. I wanted to show you guys my process behind creating this piece from the initial sketch stage and hopefully teach you along the way if you are new to designing and typography.

The image above is a rough sketch I did while I was making tea a few mornings ago, initially I started thinking about flowing type and script but ‘Ramadhan’ is such a long word to me, I found it difficult to render the letters to form a nice flowing word. I began toying with the idea to fit the word ‘Ramadhan’ in an arc shape, so I sketched the arc out and filled it in, then added the henna inspired flourishes to frame it. I have been really inspired by vintage typography lately with the beautiful ornate stylisation and the letters so I guess my inspiration came from there.

 

I used an H pen-pencil to draw my base sketch, try to use good quality paper for artwork, I find that paper with bad quality tends to be a hassle when you are erasing, you might end up with a big hole through the paper and lots of indented marks.

At first I wanted to hurry things up and just free hand the arc and go from there. I later realised that it wasn’t a smart idea because I would end up with an unbalanced design. I recommend using a book that has small grids like a graph book to make things much easier but I didn’t have any. There is a nice one you can get that was created by Behance called Dot Grid.

I marked out a frame using a set square and measured equal points from the centre to the outer areas. I also measured how far down I wanted the arc to be. I used the centre as a guide and used 1.5″ as my height. If you look at the first point on the right I left a space of about 0.25″ inches from the top so I knew that I would add another 1.5″ vertically in height to make up for it and the same thing goes for the points on the far left and far right, I just added an extra 1.5″. This way both sides were equal.  Then I free handed the arc from the points I marked out.

Keep a long line marked down the centre to act as guide for the other words that will follow.

 

Using the middle point as my guide I drew a second arc under the larger one.

 

Now the fun part! Not really, this can be a bit of trouble trying to get the right space between the letters. For the word ‘Ramadhan’ what I did was position the ‘A’ and ‘D’ in the centre first because they are the two middle letters. I didn’t place them directly in the centre because I knew that the letter ‘M’ will be a bit chunkier so I tried to compensate for it by placing the ‘A’ right after the middle point, I then placed the ‘R’ and ‘N’ so I have my ending points. I did the same for ‘Mubarak’ placing the ‘A’ first while compensating for the other letters. By the way when I started drawing one letter inside the arc I realised that the height I measured was a bit too much and I would have ended up with narrow letters so I drew another line under the top arc to use as a frame to fit the letters.

 

I got frustrated at this point because I had no idea what style I wanted the typeface to have so I had to put it aside for a bit. After a while I started playing with the letters to create thick and thin stems untill I was comfortable that it was direction I wanted to go in. I thought to add a focal point in the centre so I elongated the stem of the ‘A’ and created a tail out of the ‘D’ so they both intersect the beginning and last letters in ‘Mubarak’. The reason why it worked was due to my realisation that there was a diagonal stroke in the ‘M’ and a diagonal leg in the K, I was quite thrilled that I could make it work. If you have no idea what I mean by the typography terms take a look at Playtype’s Typeface Glossary. I also added the top flourish to half of the design this is because I wasn’t sure if I was going to free hand both sides or reflect the flourishes when I move on to digital.

 

I started to refine the letters more in terms of thickness of the strokes and the stems using an HB point. Be sure to keep a paper under your hand to cover the working area or you will have lead all over your design, even with the paper covering the surface I ended up having a smudgy mess which I dislike. Maybe a paper towel might be a better alternative.

 

Shaping out more of the letters. After drawing the serif/ear (not sure what it’s called haha) on the ‘D’. I wanted to fill the space between the ‘A’ and ‘D’ which made me extend the cross bars in the letter ‘A’ to counteract the empty space which would have been there. I liked the playful vibe so I also extended the crossbar in ‘H’ which flowed into the ‘A’. I didn’t use a ruler for the angles of the letters or for the Apex, I eyeballed it. A point to note is to try to make all the letters have the same width so they look even and proportionate.

 

See I have lots of smudging? I finished up the letters and also created some interest between the ‘R’ an ‘A’ and to complete the design I also extended the serif/ear of the ‘R’. ‘Mubarak’ didn’t turn out too great as some letters were too thick and others too thin. It bugged me a bit but I decided to fix up some mistakes when I moved on to inking.

 

I love to see the shadows on letters just by simply adding lines, it creates a little depth to flat lettering.

 

Tracing paper! It has the best absorbency when you apply ink to the surface and there is less bleeding. I like to trace my designs onto this paper because the scanner reads it better. I used my staedtler pigment liner pens 0.05, 0.1 and 0.3. My hands tend to get shaky and sometimes I think I hold my breath while drawing a line so I don’t mess up, but a trick is to not draw the full line at once but to draw it as though you are slowly sketching , try to draw the beginning and the end of the line and meet the points in the middle.  I used a transparent ruler to trace the solid lines.

Make sure you have good lighting and if you can try to draw on slanted surface it would be much comfortable and less painful on your neck and back.

 

The thinner lines I drew by going over the line next to one I previously made to get a nice stroke weight. The bowl of the ‘R’ and ‘D’ are already filled because I went over the lines to get a feel for the thickness, it couldn’t be too thin like the other thin strokes or the balance would look off.

 

Fully shaded letters. I sometimes like to leave a tiny space under where a swash intersects a letter so the letters wouldn’t look too flat. Here I filled in the letters with a staedtler marker to avoid wasting the pen ink, I guess it wasn’t dry enough because I got even more smudges all of the the tracing paper. The thickness of the tails in the ‘A’ and ‘D’ was done due to the ‘K’ because the letters in ‘Mubarak’ are a little bolder than the thin strokes from ‘Ramadhan’.

 

I used the finest pen tip (0.05) for the shadow lines but ended up with some shaky lines. The ‘M’ in ‘Mubarak’ still looked too thick for my liking.

 

Here is a scan of the design. Tracing paper will have a transparent background when scanned, see how clean it looks, well except for the bits that I got smudged.

 

I cleaned up all the messy lines and smudges in photoshop. I outlined the flourishes with a lasso tool, duplicated the section and reflected them. However with the top flourish the moon and star remained on the left side and I erased that bit from the right side along with the top middle line. I took out the small circles from the top since it didn’t fit well with the moon around it, I also set the blending mode of the flourish that I reflected to ‘Darken’ to get rid of the white space. I made the bottom flourishes a little smaller and fixed the kerning between ‘1433 AH’. I also finally got to refine the letters in ‘Mubarak’ even though I still feel the ‘M’ and ‘U’ looks a lot bolder than the others.

 

In colour! I wanted to make this in to a vector using live trace in illustrator but that wasn’t working out too well, so instead I made a brush out of the design (if I wasn’t worried about time I would have rendered this in illustrator with a pen tool for a full vector but being that I’m only using this for screen and not print I’m not too worried about the edges and resolution). You can see how to create a brush in my previous Flourish Design Tutorial. You can trace this in illustrator with the pen tool, but I am a bit short of time since the month is fast approaching.

To separate the  letters and flourishes, I selected the parts with the lasso tool and duplicated the sections on to another layer I did this for all so that they would all be separated. I used colour overlay on the sections because it was easier for me to play around with colour.

 

I added a glow on a separate layer above the background by filling it with a soft white airbrush on a low opacity and setting the blending mode of the layer on ‘Overlay’.  I used a big brush size to fill the centre, I then I built up on the glow by decreasing the brush size and applying the brush to the centre to create the gradient like effect. I also increased the opacity and applied it behind the moon and star. You can also create this effect by using a gradient, to me this way gives me much more control.  I rasterized the layer with the words ‘Ramadhan Mubarak’ to set the colour to the layer in order for me to apply a gradient over the type, I used a desaturated gradient set on soft-light with a 45% opacity. I like to duplicate any layer I want to make changes with just in case I don’t like the end result.

I also darkened the edges of the dark blue background with the burn tool with a very low exposure, you can always build up and go over areas to make the outer edges darker.

 

And here is the final piece! I started toying with the idea of making some parts glow especially with the star burst and the moon and star. I got this effect the same way I added the glow in the background. Use a light colour from where you want to apply the glow, set a large brush size on low opacity and apply it, then decrease the brush size a bit, apply it to the centre, and keep repeating the steps until your centre has a solid colour.  Duplicate the glows and apply them to where you think would be best but don’t over do it. The cream/yellowish glows don’t have any layer blend settings but the light blue glows on ‘Ramadhan’ has a ‘Screen’ blend applied to it.

I do hope you enjoyed this mini case study/tutorial. Please feel free to ask questions, leave feedback or correct me if I made any grammatical mistakes.

 

4 Comments

  1. Nadia
    July 13, 2012

    MashaAllah! You have so much talent and creativity. You are just so good at what you do! Thanks for sharing how you did this wonderful piece! Love it!

    Reply
  2. Naeem
    July 14, 2012

    Love seeing your sketch work. Inspiring to see the whole process. Thanks.

    Reply
  3. Suleiman Leadbitter
    July 15, 2012

    Amazing design, mash’Allah.

    Have you considered importing over to Illustrator and manually drawing it using the pen tool. I know it would be time consuming but having a super clean vector output would make it much more versatile.

    Reply
    • Faheema Patel
      July 15, 2012

      Thank you!

      I usually would have done so but I wanted to finish it up quickly due to the short time. You can’t really see the edges here since I really needed it for web preview, if it were for print I think I would have made this into a vector.

      Reply

Leave a Reply to Faheema Patel

Cancel Reply