[Behind the Scenes] How Productive Muslim Doodles Are Developed

I thought I would write this post in case anybody might be interested in the process behind the informational doodle posters I design for Productive Muslim. It’s not quite a tutorial or guide, because I am just making things up as I go along. Since the bulk of the work is drawing the little graphics/icons, let the video first introduce you to something called a Wacom tablet:

My tablet is not of the Bamboo models shown in the video, but a much older one called the Graphire3. It works the same way, though it just doesn’t have any buttons or fancy finger-scrolling. I have had mine since I was 15 years old so Alhamdulillah, using it is as a mouse is second nature to me.

[Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim

Now, many designers and artists work just fine using a mouse. Drawing vector graphics, for instance, probably works fine without a tablet. But you might find that a tablet is much kinder to your wrist and fingers, and also certain styles (doodles/hand-drawn/traditional-look) are more difficult to produce without a tablet.

I will be taking you through a few examples of the doodles I have done so far and mentioning whatever I think might be helpful.

Doodle #02: Commuting

[Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim
Commuting Doodle – Animated walkthrough.

[Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim

It always starts with the written article and the text extracted from the article. I do this because text takes up space, sometimes a lot of space, and so they dictate the layout, more or less. In this case I already had a “Venn diagram” concept in my mind, based on how the article was structured, so I arranged the text to correspond to such a diagram.

[Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim

As I wrote on Facebook, “Feedback and rethinking/revising is quite important. I guess there is an intelligence to knowing when to pause, continue, or stop the design process. I’m still learning a lot with each attempt.”

I cannot stress enough, the importance of feedback and comments. It is OK to not be sure whether this is right or if that is clear enough, just finish up the option (or make several options) and have others take a look, something learnt in Architecture. I have read that it is important for the designer to step back and away from the piece for a little while too, before working on it again. Most of my doodles are done in at least two sessions, which could be two separate days, or two nights, or two chunks of several hours of work.

Doodle #04: 7 Spiritual Productivity Habits

[Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim
7 Spiritual Productivity Habits Doodle – Animated walkthrough

[Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim

I always pretty-up the title first. The layout was just a floating mind-map style. This doodle was after I discovered the wondrous works of graphic facilitators such as Brandy Agerbeck, and I took some pointers from her style of work.

[Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim

Here is another not-so-secret in the designing world: Google Images. Now, it is never okay to simply take photos from Google (or Flickr, Facebook or deviantART unless the picture is specifically stated to be stock photo or licensed to be freely used) and stick it into your poster/work/piece, but I have always believed that referencing is okay and good. I am not producing original artworks but drawing icons to visually express some points. So what I did was just open the image side-by-side with Photoshop and draw the graphic I want based on the pose of the reference image. The reference image never makes it into the final piece.

 [Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim

Then I sent a draft for comments. Figuring out the icons for each point is sometimes simple, but other times not so straightforward. I am sure icon-making is another science altogether, so for now I am just learning by doing (and by Google-Images-ing), or adapting the doodle based on how “graphical” the article can be converted to.

 [Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim

One of the comments from Abu Productive was to discard some chunks from the “Recite one hour of Qur’an” point, so that necessitated a layout overhaul to fill in the gap and make things look balanced again. I still don’t think the overall composition is as nice as the unedited draft. Usually with this “floating” style, the stuff you draw sort of naturally fits like a puzzle the first time around, but it is okay.

Doodle #05: 8 Easy Steps to Finish Qur’an

[Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim
8 Easy Steps to Finish the Qur’an – Animated walkthrough

Animated walkthrough. This time I sketched the title first before drawing it, which is rare for me.

[Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim

These are the three common Photoshop Brushes I use. The ones I call “pencil” (textured, looks like crayon) and “brush” (smooth) are default Photoshop ones while “dots” is probably a modified default brush with adjusted spacing. If you have been dabbling in digital drawing/painting you ought to have your own collection of brushes that you often use. There are tutorials out there about the organisation of brush presets and making your own brushes and such.

[Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim

I want to stress the importance of keeping your workspace and layers organised, particularly using Layer Sets and labels. This screenshot shows me converting that green ribbon with text into a Smart Object, a feature in the newer versions of Photoshop. You edit it in a separate file, with the layers in it, so if there are multiple copies of the object in your main canvas, they are updated automatically. Also, smart objects appear as one layer in your main document so that simplifies things. One more point — you can transform (rotate/shrink/flip/etc.) smart objects multiple times and it will re-render itself nicely without going all fuzzy and compressed. However, Smart Objects do significantly increase the file size.

[Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim

List-style points and sketched icons. Some of the ideas for icons were changed afterwards.

[Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim

Google Images galore.

[Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim

Finished version.

Doodle #06: Iftar Party

 [Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim
Iftar Part – Animated walkthrough
This doodle has a bit of a spelling inconsistency (the article given to me had the title spelled “iftaar” but contents as “iftar”), but that aside, the layout went through a total overhaul halfway because the vertical timeline with lists was not working. There were no space for images, and in fact not many points were able to be converted into images.

[Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim

This was the point where I stopped and decided it was not working. Abu Productive had a good idea: “the only potential difference I see is to have a massive clock in the center and the different things you would do around it?”

[Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim

So I adapted the idea and made a rough layout.

[Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim

The style of the outer points was inspired from a brilliant infographic. I not only Google for specific images but for mindmap/infographic resources too. I save them on a folder on my computer, sometimes categorised according to the style of diagram I need to do. I also learnt this from my studies in architecture: ideas don’t come out of nowhere. And you don’t have to reinvent the wheel.

 [Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim

As you can see, there was a bit of a colour issue, which then drastically changed.

[Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim

I was a bit concerned that I went too “wild”, but they said it suited the party theme, so Alhamdulillah.

Doodle #07: Tips to a Productive Eid

 [Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim
10 Eid Tips – Animated walkthrough
This one went fairly straightforward once I decided on a traditional geometrical star design, after Googling for inspiration in the form of greeting card designs. The only tricky bit was the last part with adding numbers.

Doodle #08: Eid Mubarak

[Behind the Scenes] How Productive Muslim Doodles Are Developed | Productive Muslim
Click the above image to enlarge.
Very simple one consisting of recycled icons. The feedback from Sister Hafsa was to “messify” the doodles a bit to suit my usual style. I downloaded a Photoshop script that scattered the layers randomly for me. Ah, how I love shortcuts.

Finally, just to make it clear how parts of the doodle are “hand-drawn”, the second video is a screen-capture. I was really reluctant to record my screen in any of the doodles, because 1) it will make me super self-conscious and probably mess things up more than I would do normally and 2) I am not an “artist”, I am not proud of how I abuse the Ctrl+Z shortcut. This is me drawing out the title for the above doodle, but at 4x the actual speed. Manually, without guidelines, just by eye. Later, I copied each letter on its own layer to rotate them.

I sincerely hope this was at least a little beneficial in one way or another. I have only been doing this for five months at the time this is being written, but am very thankful for the opportunities and for the crazy support so far, Subhanallah wa Alhamdulillah. All this stuff works in whatever media too, really a simple pen and paper are perfect for some people!

Please feel free to add on your comments below!


25 thoughts on “[Behind the Scenes] How Productive Muslim Doodles Are Developed

  1. Thank you so much for a behind the scenes look!! I’m a big fan of all your doodles! Is there any place where I can view every Productive Muslim Doodle so far, like a Pinterest board or something?

  2. The article is a bit long. How I wish you would have doodled this too. Overal, informative.
    “Doodles aid memory, prevents daydreaming, thinking too much or too little, and helps one foicus on the present.” Wikipedia
    I also like infographics.

  3. Cool article, it’s different from those we’re used to, but diversity doesn’t hurt. it’s very interesting to see how the doodles are created. It must represent hours of work!

  4. Jazaki Allah Khayr Aneesa for giving us a peak into how things work. I have always been a fan of your doodles as well and wondered how they all came together so its nice to see the process.

    Anyway, keep up all your doing! May Allah accept from you and make these works a source of sadaqal jaariyah.

    -Mifrah

  5. Really sweet of you to share this info with us dear sister, may Allah grant you the best always! Will try to learn from your article.
    JazakAllah khair!

  6. what a wonderful process – extremely well thought-out and the professionalism behind the layout methodology is truly exemplary – well done!

  7. MashaAllah great work, I simply love your doodles..I was particularly attracted towards this website and community because of these Doodles! Keep up the awesome work and wish you all the best. May Allah reward you all immensely for Productive Muslim.

  8. MashaaAllah sister! Thanks for posting this– I’m currently tapping around in graphic design/ computer art as a hobby, and you just gave me so much inspiration to start some doodles on my own! JazakullahuKhairan! :D

    1. Wa’iyyaki Rawda! I used to hang around deviantART a lot as well, to learn from other artists’ works and processes. :) May Allah bless your efforts and grant you joy & benefit from your hobby!

  9. MA SHA ALLAH! I didn’t realize the kind of work you have to put in for these infographics that I happily shared around on pinterest.

    On a separate note, a few years back. I was asked to write a review of productiveMuslim. This was a world before social media, and before facebook became the sharing and like giant that it is today. We were seeing the humble beginning of what would eventually be the internet of today, an almost seamless and integral aspect of our social networking lives.

    In my review, I mentioned that for productive Muslim to maintain its presence for the next 2-3 years, it had to build its social worth. The world was no longer about one blogger dispensing information to the masses. Information was beginning to be a lot more sophisticated than that. In fact, having a huge following alone was not going to secure ones social net worth. Social net worth had to do with the value of information back and forth between the follower and the followed.

    I’m not sure if productive Muslim read that review or if it was ever publised. Lol. But alhamdulillah, I’m glad to see Productive Muslim grow and blossom despite such a niche segment – “productivity” in the Internet based Islamic Information world. I really think aside from quality of content, Productive Muslims continous venture to go beyond simple text type information and to embrace the changing times, such as tapping on your talent to produce info-graphic, production of web based cartoons, is key to this success as it eases sharing and as a result net visibility for productive Muslim. I can’t wait to see productiveMuslim continue to grow and maintain its online presence in an ever changing and dynamic environment.

    May Allah Bless the team in all their endeavors and reward you and your followers for your efforts.

    Salaammualaikum.

      1. Hi, Abu Productive! Will you please add a Facebook ‘Like’ button after the articles? Coz, you know, people don’t wanna ‘share’ everything they come across, sometimes a ‘like’/’recommend’ button is preferred.

        I know this isn’t probably the place for such a request. Was too lazy to write an email :$

Leave a Reply