Create a social blog design with Photoshop and Illustrator
Blogs allow viewers to gain a closer, more intimate look at its content. It also tends to be a perfect outlet for creative expression and conveying some vital personality
The inspiration behind this tutorial comes from the chatty frenzy and on-going activity in ‘social land’ that’s so prevalent today (think MSN, text messages and Twitter). A mixture of plant-like drawings and geometric shapes suggest a festive mood, while the speech bubbles reinforce the theme of conversation. The colour palette evokes a sense of zaniness like the antsy feeling from reading a juicy story or hearing the breaking news from a trusted friend. Bright pink, red and moss green add to the craze, while a navy blue background sets a more stable tone so things don’t get too crazy.
The first part of the tutorial is created in Illustrator and the second in Photoshop. Although the final working file is a .psd, both the .ai and .psd files are created in a way so that each layer contains one element and is named according to its content. Some of the resources we’ll use along the way are from www.mayang.com/textures and www.cgtextures.com.
The article was originally authored by Wendy Ding and printed within Web Designer issue 168. You may download the companion project assets by clicking here
01 Background begins
In Illustrator, create a new document at 8.5-inches by ten inches. Use the Rectangle tool to create a rectangle in the same size in a navy blue colour – this will be the background. Add a new layer above and create a thinner rectangle in beige – this will be the ‘paper’ that holds the main content.
02 Bubbles in the head
On a new layer, draw a speech bubble with the Pen tool and hit Alt/Option+Drag for numerous duplicates. Resize and rotate each one so none are identical. Right-click>Transform>Reflect to flip horizontally or vertically. Apply colours in red, burgundy, pink and mauve. Make sure they overlap to create a sense of overcrowding.
03 Bubble patterns
Turn the grid on with Ctrl/Cmnd+“. Zoom in very close. Next, create a square spanning across four grids with the Rectangle tool. Click Shift while dragging to make it completely square. Create a circle using the Ellipse tool on the centre points of the first and fourth quadrants inside the square.
04 Colour the circles
Decorate each circle with different colours and apply no fill and no stroke to the square. Select everything and drag it into the Swatches panel to make it a pattern swatch. Click on a bubble and in Window>Appearances, add a new fill and select the pattern swatch. This remains editable in the Appearances panel.
to find out about all the latest web development,
news, reviews, previews, interviews, features and a whole more.
Is there an easier way for Step 12 – Copy into Photoshop?
This is one of the most comprehensive tutorial I have ever read online, thanks a bunch!
It would be nice to know where all the brushes etc came from? Well put together tutorial though.
First time reading a tutorial here! Very informative and look forward to more posts.
Interesting tutorial, but the need for a tablet will exclude some readers.
This was helpful for design, but how do you go about getting it published on to a blog site such as blogger?
Thanks
this is a really helpful tutorial . thanks a lot!!
Very Very Nice……
This surely beats the stock layouts that blogging softwares are packed with.
I am a Novice with Photoshop & I wish to learn how to make use of it. I’ll be glad if you can help me with a step by step guide on how to make use of Photoshop mainly for photo effects.
Thanks
this is a great guide man, I love finding really good step by step guides like this, it just makes everything so much easier! Thanks a bunch man
Very good ! Thanks!
Is there a link for the brushes that were used?
Is there a reason why you continually promote the wrong tools for the job of website design (Photoshop and Illustrator) in preference to the tool designed for the task; Fireworks.
uhm…could it be because Fireworks just sucks?
Great tutorial! Very useful. Thanks :)
Very interesting tutorials easy to learn…
Your blog is really helpful for photoshop tutorial & lots of tips!
many many thanks for sharing this nice post!
Thanks so much for the list, i’m going to use this on a few projects of mine
thank you for sharing. it is helpful!
Is there a reason why you continually promote the wrong tools for the job of website design (Photoshop and Illustrator) in preference to the tool designed for the task; Fireworks.
I got some really good ideas from looking at some of the blogs. Thanks for sharing. We are best web designers cambride.