Category Archives: Blog

  • 0

Introducing you to the new Circlebox Blog Redesign!

Category : Blog

As many of you know, Circlebox Blog, since birth, has been using a premium theme. Although it was a great theme, with the blogs recent success it was time to put some time aside to design my own theme and raise some money to get it coded up. So lets call this post an introduction to it!

The new theme, as you should be seeing on your screen as you read this (unless of course you’re in a feedreader, in which case get your ass over here!), is modern, clean and quite minimalistic. I wanted it to be stylish, but at the same time I want you to be able concentrate and appreciate the content the blog has to offer instead of just it’s theme.

So… what’s new?
Improved Headings
We have much improved headings; orange ones, green ones, gray ones, italic ones, bold ones… you name it! These will be put to good use to help organize different types of posts such as round-ups and tutorials, all-in-all meaning they’ll be much easier to navigate and skim through.

Guest Authors
Within the past few months I’ve experimented with guest authors; some good and some bad. I’d like to experiment some more. With the new Circlebox Blog theme, I’ve added an authors page, meaning every author with 5 posts or more will get a permanent spot on our authors page. Each author will have an ‘about’ page with some information about themselves, a link to their website and Twitter account and a list of articles that they have previously published on the blog.

For the time-being, posts will be contribute-only and I’ll be manually accepting and publishing posts, but maybe sometime in the future, when things pick up a little more, I’ll be able to offer a competitive rate and authors may be able to access the admin interface using their own log-in details. More to come on this in the next few months!

Twitter Links
Twitter is huge, especially within the online design community. Because of this I have added the option to include your twitter username (i.e. “callumchapman”) in comments, meaning people will be able to directly visit your Twitter account as well as your website every time you leave a comment.

A Footer!
A footer is something the previous theme didn’t have; but now we have one! I won’t be using the footer too much, but have decided to include a ‘top posts’ and ‘flickr feed’ section, which I’m sure will come in handy for new readers of the blogs, or for people who just want to know what the top posts are.

A Flickr Group
A Flickr Group is something I have been meaning to do for a while now, so I though I may as well introduce it with the new theme. Nothing too special, but it allows users to upload their work to the group and possibly have it seen by thousands of people! Another possibility, if the Flickr Group really takes off, is to have a monthly collection of the best user submissions every month – so join the group and get uploading! You’ll find the Flickr Group link in the top right.

Advertisement Spots
We have new advertisement spots which I hope to get filled some point soon. We have a range of ad spots to our right in the sidebar, and a banner on top of every post page. We also loads of icon ads at the bottom of the page (in the footer) for those that want a cheap method of advertisement. I’ll also be accepting link advertisements, see the advertise page for that!

And that, ladies and gents, is pretty much it!
Please bare with me over the next few days as everything is finalized – as always, there may be a thing or two that might need changing. If you spot anything that doesn’t seem right, please let me know!

  • 0

InDesign Workflow Tips: Improving your Workspace and Working with Master Pages

Category : Blog

Covered in this InDesign article/tutorial are some superb tips on how to set-up your Workspace for the fastest possible workflow, and how to work with Master Pages.

Setting up InDesign

So this is your first time using InDesign? Not to worry, I am going to include some bonus tips and tricks in this tutorial. These tips will all be based around Preferences and Workspaces and will allow you to streamline your workflow in InDesign as well as teach you new skills.

When I first used InDesign around twelve months ago I didn’t really know where the tools were located, this was because of the standard workspace called essentials. The title of the workspace “essentials” is also included in all the other Adobe Apps – of course they all have different tools.

Looking at the “Essentials” workspace it has all the tools that you could call the essentials; but for me personally there was a large selection of tools missing. For months I struggled to get the tools I wanted to use and got ever more frustrated with InDesign and even got to the point of using MS Publisher (bad mistake but won’t go into that). Then one day, I noticed Workspaces!

Finally I could find tools I needed in the other workspaces however I often found myself switching in-between workspaces. I accidentally created my first workspace one day even though it was a rename of the workspace Typography. You know how they say “Google is your best friend when you want to know things”? Well it is true for times like those.

Above you will see my InDesign workspace which is very much like one of the workspaces that I have already mentioned called “Typography.” I found that the workspace had most of the tools that I needed so I decided to mod it and added the Preflight Panel and took away the Gradient Panel and the Paragraph Panel (both tools I rarely use).

Step 1 – Setting up a workspace.
To add a panel to the workspace all you need to do is select the Tools/Panels you require. For example I need the Preflight Panel, so I go to Window > Output > Preflight (Option, Shift, Cmd + F) or (Alt, Shift, Ctrl + F). The panel will now appear in your InDesign window. Click the top of the panel and drag to the right of the screen until it appears in the sidebar.

To delete a panel drag it from the right to the centre and click the left hand corner of the panel and poof, it’s gone in a flash! You can now repeat the first step to add or delete tools/panels from the sidebar in InDesign. Once you are happy you can now save the workspace. To do this click the Workspace Title > New Workspace and you will have a box to enter the name of the workspace, then press OK. You have created your very first workspace. This concept works the same in most Adobe applications so try it out in any other applications that you may use.

Step 2 – Setting up a default document.
Setting up a default document will save you plenty of time. All you need to do is open InDesign and go to the Document Setup which is located under File > Document Setup (Option, Cmd + P or Alt, Ctrl + P).
Change the paper to the size that you use the most, for me this would be A4. You can also define the orientation of the page, add a custom size, add bleed and slug to the page (I wouldn’t worry about these at the moment).

Bonus Tip
As long as you don’t have a document open, any changes you make to any of the tools, for example you don’t like the default font, you can change it by switching to the Type Tool and changing the size and font if you wish too.

Step 3 – The Preference Panel
I am not going to go into much detail about this panel because it is very much self explanatory and the only things that I am going to change, which is a personal preference, would be the units that InDesign uses. InDesign uses pica’s as a default which I am not really familiar with whereas millimetres is my chosen increment in InDesign (pixels in Photoshop). To open the preference menu simply press Cmd + K or Ctrl + K on a Windows based PC.

Have a look through the preference panel and change the units and increments. To do this click it in the side bar as so and change the preference.

Now you have a set of custom preferences that should increase your workflow in InDesign. Remember these tips can be used to the same sort of effect in all the other Adobe Applications such as Photoshop and Illustrator.

The Nitty Gritty of Master Pages
What is a Master Page?
A Master Page holds and displays elements that you want to appear on every single page of the document, it’s kind of like a template within a document. Master Pages are extremely helpful when creating a multipage document such as brochures, magazines or newspapers. You can have as many master pages within a document so effectively you could have a master page for a contents page and a standard page which may contain different elements. This allows you to keep things organised in InDesign.

Why Would You Use a Master Page?
I have already mentioned the purpose of Master Pages but I haven’t really explained why they are used. Think of it like this; you have a 100 page brochure for a client to finish up and they want 86 of these pages to have pure content, one for the cover, one for the back of the brochure and eleven advertisement pages. The advertisement pages will contain no specific styling and will display just the advert, so straight away these pages don’t require a master page (unless you want to number the advertisement pages).

The front cover and back cover also don’t have to have a Master Page but the remaining 86 do. The brief may state that these 86 pages need to have the company logo, section name and page number. The other 1 is to be the content page which also needs to include the company logo and section name, but doesn’t need to have page number. If you have a recurring client, keeping master pages stored can save a lot of time for future projects, ultimately earning the designer the same amount of money in a shorter period of time (in other words, a higher hourly wage) – no one can complain at this!

The point that I am trying to get across is that no matter how many times a logo or any other element needs to appear on several pages you don’t have to create extra work by placing the element in the same place as it is in other pages. This could take a lot of time which could be better spent refining the design or even getting the job done on time rather than later than expected.

Bonus Tip
Never send a project off early to a client. It sounds awesome and feels awesome to get a project done earlier than expected but hold fire, soldier! Check through the files again to make sure everything is top-notch and when the deadline looms send it and be on time with the deadline, rather than early. The reason for this is if you get it done early the first time they may expect the next project to be early, too. This happened to me within the first month of my freelancing.

It’s time to create the Master Page
The Brief

I have made up a brief for this project just to make things a little easier for you to follow.
• 4 pages
• All pages must include logo
• Pages must be numbered (except cover)
• Have a well presented footer with email/web addresses.

This is a very limited brief. The brief doesn’t have to be complex because its a very small brochure to complete.

Step 1 – Create the document
I have created a document ready for an A5 brochure (see the settings in screenshot below).

Click OK and you should now have the document set up and ready to go ahead and start dropping some elements in to place.

Step 2 – Placing Elements into the Document
To place an element into the document either go to File > Place or CMD + D (or Ctrl + D on a Windows based PC). This then brings out a window allowing you to insert a logo. For this tutorial I have created a company name called “InTut Design” and have produced a simple text-based logo purely for this article.

Now we have a logo in place, we need to make it a master element.
Go to the pages panel which is located on the right hand side of InDesign. If you can’t locate it you’ll need to go to Window > Pages. Now you will see this:

As you can see on the pages panel, I have four pages set up and they have the letter “A” in the right hand top corner, this letter corresponds to the master page that it is set up on. At the moment there isn’t a master page but it always defaults to “A”. Now double click on “A-Master”, this brings up two pages, and all you have to do is set up the elements you want to appear.
Now let’s import the company logo into the document on a master page. With “A-Master” double clicked go to File > Place or Cmd + D (Ctrl + D on a Windows based PC) and select the image.

Step 3 – Adding more elements to the document
So you now have your logo in the master page. If you click out of the master page by clicking one of the spreads/pages in the panel you should notice that the logo is on all 4 pages! Now go back into the master page by double clicking “A-Master”. Grab the Type Tool (T) and insert some text for the footer. Don’t worry about numbering the page we will cover that in the following step.

Bonus Tip
You will notice that the logo’s appear differently on different pages. This is because I have facing pages on therefore the right hand side page controls the right hand pages such as the cover and the centre right and the left hand of the screenshot covers the left hand pages and the back cover.

Step 4 – Page Numbering
Our master pages are almost complete, meaning it is almost time to get on with your project and start adding non-master content such as text and images. Before getting on with that however, we need to number our pages and to do so we need to make a new master page called “B-Master”. To create a new master page simply right click on the pages panel and select New Master. Give it a prefix of B – this should be the default anyway, and then click OK. Now you will see an A-Master and a B-Master. So far we have set up the A-Master which is currently set up to all 4 pages. Drag the B-Master from the master page panel to the first page. The reason for this is our brief states that the cover is not to be numbered and the easiest way to do it is make another master page. You should now have something like this. (I have re-placed the logo into the B-Master using Cmd + D (Ctrl + D on Windows based PC).

Next we need to open up the A-Master and insert all the text that is required by the brief. If you look back at the brief it tells us that the Web and Email addresses need to be put on there along with the number of the page. Simply grab the Type Tool and type ‘ /’. Now make another text box, this time with the word ‘page’. To number the pages stay in the text box and go to Type > Insert Special Character > Markers > Current Page Number.

It should insert the letter A. Copy and paste the text and take it to the other page. If you now come out of the master pages you will see that the pages are numbered and start from page two and finish at page four.

Now we have the document set up, what next?
So you should have everything set up and have a blank template to work with. All I have done is added some text to the Front cover and a stock image from Computer Arts Issue 170. On the centre pages I have added some lorem ipsum dummy text to add a back bone to the brochure, and then added a large stock image once again from Computer Arts Issue 170. On the back of the brochure I have just put some basic contact details to add some content to the back.

Now you should have a completed document – if you have a question to ask about this tutorial or about me please feel free to leave a comment, email me at or drop me a line on Twitter.
Thank you for taking the time to read this post and hopefully there will be more from me to come!

  • 0

Happy 2010

Category : Blog

There’s something about a new year that rings joy in the heart. Maybe its the opportunities we anticipate in coming months as we clink glasses. A new beginning where anything is possible. New optimism that lights the path.
Eager anticipation of better things ahead is one thing. Making them happen is another. One way to jumpstart your success is to create a one-page plan that crystallizes what you want for yourself. Clarity, focus, will, support and a written plan are 5 ingredients to making things happen.

One page is all it takes. Just like any business plan, start with a bold vision. Be honest with yourself. What is it you really want in 2010? Give it heart to make it come alive. Then state your bravado. What do you stand for? Be bold. Be genius.

Follow through with your Annual Objectives. What are you aiming to achieve? The end result. 3-5 maximum. Any more and you might find yourself become scattered and living in overwhelm. Don’t be disconcerted. Once you attain your goals, you can set new ones.

Then follow through with well documented Strategies (how your going to attain your objectives) and your weekly or daily, Actions. Remember the law of attraction includes the word “action”. No movement, no gain.
Remember life happens in moments. So does achievement. Success is NOT by accident!
Wishing you a joyous, abundant, peaceful, healthy, spectacular .. fireworks! kind of 2010.

  • 0

Get Useful Info About Why Lack of control leads the brain to create non existent patterns

Category : Blog

In the absence of control and understanding of the things around us and in our environment can lead the brain to creating its own set of rules for finding patterns in alphabet soup of disorder in the world. Even the most laid back and easy going among us crave some control, and when we feel lost we scour everywhere for anything that will reinstate predictability. The brain is no less detached from the physical world around us in its desire for order rather than chaos.

A brand new study exposes when we lack restraint we don’t always continue on our merry way, waiting for order to resume, but instead, force it to happen ourselves; we inflict it, if nothing other than solely in our own minds, by imagining patterns and trends where none exist. Over a series of psychological tests, psychologists Whitson of the of Texas at Austin and Galinsky of Northwestern University manipulated their subjects’ understanding of facts. The article can also be found in the Mind section of Scientific Americanunder the title of Finding Control in Chaos.

Questions arise such as, how do you control your thoughts in times of doubt or confusion, or what defines the line between order and chaos. The mind can be brought under control through practicing meditation, even passively, and through dispassion. Many people actively practice yoga or tai chi, both of which are repetitive. The mind is hard to control and is always churning. Many people actively practice yoga or tai chi, both of which are repetitive. Depending upon how you look at it, these ideas spell out a road map for spiritual growth, regardless of ones religious belief system.

Sometimes, the test-subjects were given either random feedback or no feedback at all on a dodgy data intensive chore; in other situations, they asked their captive audience to think of a memory or situation where they lacked control or where they had good control. The results showed that not having command caused see things in nothingness or see a picture in an image of static, to sense contempt in other people’s regular behavior.

In other experiments, individuals actions shows signs of belief in superstitious beliefs and to perceive some sort of weird patterns, on purpose in the data. These fake perceptions disappeared once the test subjects were dejected but then told to write down their most deeply held beliefs. This opportunity to spell about their crazily profoundly held values represented an activeness that supported psychological well being and staved off the out-of-control feelings. The human mind simply wants to maintain order out of the chaos and for a perception of everything being under control. See more about this at rootninja mind studies and other topics in science and psychology at psychology of the mind

For the science combined with gambling – read the info about poker hand calculator.

  • 0

Five virtues of user interface design

Category : Blog

UI design is by no means easy, but it is incredibly fun. You get to use your imagination to create new or improve upon pre-existing site and app user interfaces. However, being a UI designer does come with a few governing virtues that all designers should follow to produce great interfaces. The 5 virtues that all UI designers should live by include:

You are not designing a site to look flashy and show off your mad skills; you are designing a site to enhance the lives of your users. For each design you create you must always keep your users in mind. Not everyone is a developer, and forgetting about your audience can cause you to create a site or application that is beyond their reach.

There is a reason why most sites and apps follow a specific pattern – it is because it is what users are used to. Creating a completely new site design with common features in new areas will only confuse your users and deter them from coming back to your site. Unfortunately, people like to stick to their usual patterns. If you change it up too much on them, they will find it jarring and uncomfortable.

When you walk onto a StorageMart site, there is nothing fancy about it. It offers nice, clean storage units that are easy to use and self-explanatory. Your UI designs should be the same way. The more things you add to a site or app, the more difficult it becomes to use or follow. In design, simple and straightforward is always better.

Your site or application should always empower your user. Never dumb something down so much that your user feels as though they are being mocked. You want them to be able to use your design in a way that will enhance their lives, without feeling dumb for having to use it. Make sure you create a site or application that reinforces that.

Ver-what? Exactly. If you want to provide a design that is understandable and easy to use, then you need to use language that is conversational and easy to follow. Just because you have a great vocabulary doesn’t mean you need to use huge words all the time. Use words that are common to the way your audience speaks.

  • 0

Designing for the Apple iPhone: Six top tips

Category : Blog

#1: Wireframe, wireframe, wireframe!
I honestly can’t stress enough how important this one is. Do not, I repeat, do not attempt to design an iPhone application without wireframing first. Even if you have a really clear image in your head about what you want your app to achieve and what you want it to look like, you still need to spend some time wireframing, even if it is a short 10 minutes for a very small iOS app.

Opening up a blank canvas and starting from an image you’ve only seen in your head is very tricky, and you’re bound to run into user experience problems if you rush into things. Scribbling your ideas down onto paper will allow the errors to jump out at you; that button is out of place, that image won’t fit there, this needs to be on a different screen, that screen doesn’t need a back button… the list goes on. Designing your applications user interface is also a great deal easier if you have wireframes to refer back to throughout the process.

#2: Use LiveView Screencaster
To be totally honest I haven’t a clue how I coped before finding this incredibly helpful Mac/iPhone/iPad application created by Nicholas Zambetti. The concept is simple: your iPhone (or iPad) replicates what is on your screen.
The set-up is extremely simple; download LiveView on your iPhone or iPad, andLiveView Screencaster on your Mac. Once you have downloaded these you simply run LiveView Screencaster and an iPhone or iPad frame will appear on your screen, just position this screen over your canvas in Photoshop (or your design software of choice). You then simply open up LiveView on your iPhone or iPad and select your Mac’s name to replicate your screens.

This allows you to repeatedly check how your design looks on your iPhone without having to export images and send them to your iPhone. Before using this application I was saving maybe 5-10 images from Photoshop per day, and then sending them to my iPhone via Dropbox. After a quick calculation, I estimate that I was spending up to 20 minutes per day waiting for files to save and transfer. This app allows me to spend that 20 minutes per day designing, that’s 100 minutes per week and 5200 minutes per year, which is a whopping 86 hours and 36 minutes that I save per year from using this application alone, equivalent to £2,150 wages!
I almost forgot; LiveView is a completely free application. There are absolutely no charges, which surprises me as me and many others I know would happily pay a few bucks for this!

#3: Make use of Vector images
Once upon a time this was never really all that important when designing for iOS devices, but now we have different resolutions to think about (iPhone [All Models] vs iPhone 4) it is very important you use scaleable vector images as often as you can. It isn’t essential, but if you don’t have lots and lots of time to completely redesign an app at a different resolution, it’s important, not to mention much easier!

I’m not saying use a vector-based application like Illustrator here, I’m just stating that you should use vector-based elements. In Photoshop for example, make use of Shape Layers (which are vector, by the way)! Shrinking a rasterised element can cause blurry edges, where as upscaling a rasterised element will just create a pixelated mess. Now replace the word rasterised with vector, and we avoid all of those outcomes. Make it smaller and it will stay perfectly crisp, make it larger and, again, it will stay perfectly crisp.

Sticking to this rule will save you a lot of time in the long-run, and will also produce much higher quality results, which is ever-so important with the mass of upcoming iPhone designers if you want to either stay at the top of or climb the ladder to become the top of the iOS design market.

#4: Snap to Pixels!
Here’s another important Photoshop tip, which won’t necessarily save you time, but will make your designs much sharper and, well, sexy! The most common use of snap to pixels is when using shape layers. It allows your shapes to be the same on each edge. This is a tricky one to explain, but the screenshots below clearly demonstrate what it is I’m blabbing on about.

It’s a super simple tip, and once you’ve ticked that “Snap to Pixels” box (which is hidden away in the menus) you’ll never have to do it again, so it is highly recommended if you don’t already use this hidden gem of a feature! To turn the feature on, simply click on the arrow next to your shapes in the shape layer tool bar, and check the box! Simples!

#5: Familiarity is key!
There is nothing wrong with thinking outside the box and creating something stunning that doesn’t resemble Apple’s default UIKit – but sometimes there is simply no need to. For simple and large applications alike having a familiar interface isn’t a bad thing – there is nothing wrong with using elements from the default UIKit and grooving them up a little with new colours and applying a texture here and there.

The main reason for keeping your application familiar is that the user immediately feels comfortable with it. Although the user has never used the application before, they know what this button and that toggle does, even if they are sporting a different colour. Other actions that are good to stay the same are swipes (i.e. swiping through images or swiping on table views to reveal delete buttons) and pinches (to zoom in and out). This creates a brilliant user experience, and is definitely recommended – although there is nothing wrong with going all out and creating something brand new, just make sure its buttons and actions are instantly recognizable!

#6: Get good feedback!
It’s important to get good feedback on your work, an opinion from someone who isn’t directly involved in the project you are working on. Make sure you are allowed to share your work though, as some contracts may state you’re not allowed to show the general public the work until it has been approved and/or released. I recommend using Dribbble, an incredible community which focuses on interface and graphic design. I also find myself using Twitter a lot, posting TwitPics of my designs to get direct feedback. Sometimes I have what I like to Twitter design sessions, posting 10 minute progress updates (with screenshots) of the design I am working on. This is a great way to get people involved in my work, receive constant feedback and also improve your social networking skills!

  • 0

Design Trends Used In Action Movie Posters from 1960-2010

Category : Blog

Movie posters are one of my favourite sources of inspiration, and I love to look at how they have developed over the decades. In this post, we will be looking at how the designs of action movie posters have changed since the 1960′s. You’ll find one poster per year so we can closely monitor the changes, and a small selection ofcurrent trends that we’re going to be seeing over the next year (2010) or so.

Action movie posters in general are typically very interesting – captured images offight scenes, guns, explosions and of course the odd flash of naked fleshare all things that express action films well. The design of a movie poster is commonly underestimated – even with the internet and social media sites, posters are still one of the most effective ways of advertising a new blockbuster film.

The 1960′s
The 60′s saw lots of washed-out colors and off-whites, which is actually inspiring thousands of graphic and web designers in this modern tech world. With hundreds of high-quality textures available on the net, ‘vintage’ effects like the ones seen in these posters can easily be recreated.
There is a lack of photography in the posters from the 60′s for obvious reasons – but paint and various printing techniques were so good that, to us modern day designers, it’s incredibly inspiring.

The 1970′s
Painted posters were still a big thing in the 70′s, although we do a see several more photos being used in ‘The Towering Inferno’ and ‘Rocky’ as technology progresses. Bordered posters, especially thick, off-white ones, were still be used regularly in the 70′s, a trend that had been used for decades already.
The use of white space is also something that was developed and put into practice in the 70′s, which is still a huge aspect of design to-date.

The 1980′s
The 80′s seemed to see several hit sci-fi action movies, bring along with them plenty of awesome effects which, at the time, were very futuristic. In fact, a couple of the sci-fi action posters such as ‘Star Wars Episode V: The Empire Strikes Back’ and ‘Aliens’ saw effects being used that still feel relatively modern almost thirty years later.
Three-dimensional and stroked typography (titles) is also something that the world saw more of in the 80′s as the digital world started to come to life.

The 1990′s
The 90′s was the, to most of us, the beginning of digital technology. Although computers and digital editing software was previously available, it was incredibly expensive and most people wouldn’t even know where to start. Because of this, the 90′s saw some terribly designed movie posters, especially from the very low-budget films. The selection of 90′s action hits below, however, had a slightly larger budget than most and therefore a better range of posters. I especially like the ‘Independence Day’ and ‘The Matrix’ posters.

The 2000′s
The millennium. The future. The birth of affordable yet brilliant digital technology. The year kick-started with a great grungy-style poster from the ‘Gladiator’ movie. The joys of photography and realistic photo-manipulation skills brought us some incredible posters, some of my personal favorites being ‘The Day After Tomorrow’, ‘The Bourne Ultimatum’ and ‘The Dark Knight’. All of these posters are easily reconizable, achieving exactly what a poster is set out to do – promote.

2010: Current Trends
Ten years on from the millennium and maybe we’re pushing it a bit and relying far too much on the likes of Adobe Photoshop. Although the composition of the posters are good, as can be seen from the posters ‘The Bounty Hunter’ and ‘Takers’, manipulation skills, especially those used on the heads of characters, are quite obviously faked. In ‘Takers’, some of the actors heads are clearly oversized.

Surely setting up a studio to take professional photographs doesn’t cost too much more than getting professional editors to manipulate them, especially when a scene is actually more than possible? Manipulation as severe as this is fine if you expect a dragon to have a human head whilst flying through bursts of flames, but they’re not! Let’s hope these ‘trends’ or rather ‘faults’ don’t stick around too long!

  • 0

Design a Grungy Minimalistic Poster in Photoshop

Category : Blog

In this tutorial we will be making use of simple but very powerful Photoshop tools to create a grungy minimalistic poster. We will be combining triangle shapes, textures and lots of blending modes to create what you see below. Let’s not waste any more time and get started!

Tutorial Outcome
This is what we will be designing – the full poster followed by two close-ups.

Step 1: Setting Up The Document
As with all tutorials, the first thing we need to do is open a new document. Open Photoshop and create a new document (File > New). I’m using a preset size ‘A6′ under ‘International Paper’. I’m using the RGB Color Mode as I don’t plan on poster printing Sydney, however if you are planning on sending the file to press I recommend designing the poster in CMYK.

Step 2: Changing The Background Color
Select a light coffee color (I used #f1f0e4) and fill your background in using the Paint

Bucket Tool

Step 3: Creating Your First Triangle
Make a New Layer and call it ‘Big Triangle’. Pick the Polygon Tool. Change the amount of sides the tool has to three.
Select white as your foreground color and drag out a selection with the tool; it should make a perfect white triangle.
This should have create a new shape layer, right-click on it and select Rasterize Layer. This makes it easier to work with.

Step 4: Rescaling Your Triangle
To scale your triangle up and down, go to Edit > Free Transform or hit the shortcut combination Cmd+E. Whilst holding the shift-key, drag one of the outer corners to the center of the document to make it smaller, vice versa to make it bigger.
Make your triangle smaller, and place it somewhere in the middle of your design.

Step 5: Duplicating Your Triangle
Our poster design is going to be made up of triangles, and therefore we’re going to need a lot of them. The triangle we have just placed is going to be our biggest triangle, so we will only need to scale it down. Select your triangles layer and either go to Layer > Duplicate or drag the layer onto the New Layer icon in your Layers Palette (this also duplicates the later). You should now have two triangles – rename the second triangles layer to ‘T2′; all other triangle layers from now on will be called ‘T3′, ‘T4′ and so on.
Scale your new triangle down, making it overlay your big triangle as seen below.

Step 6: Repeat, Repeat, Repeat
We now need to create lots more triangles. Duplicate the layers, rescale your new triangle, and move its position. Keep at this until you are happy with your composition.
Keep adding…
Try to include some really small triangles to add depth to the final piece…
When you have a document full of triangles of all different sizes, it’s time to move on.

Step 7: Adding Color
It’s time to add some color. Choose a color scheme for your poster – I’m going for a scheme based on this image – in other words, a vintage-style blue. You can paste an image of your choice into Photoshop, select colors from it using the Eyedropper Tool and create a new custom swatch specifically for this poster. If you’re too lazy to do this, check out Color Lovers for some awesome pre-made swatches.
When you have a color scheme sorted, it’s time to start applying different colors to your triangles. The easiest way for you to do this is by selecting a color and clicking on a triangle whilst the Paint Bucket Tool is selected.
Repeat the step over and over until all of your triangles have some form of color. I’ve decided to add a little hint of bright pink in with the blues and greens to spice things up.

After what feels like hours worth of coloring triangles I have finally finished. This is what I ended up with…

Step 7: Playing With Blending Modes
To add much more interest to our design we’re going to make the triangles interact with each other by changing the Blending Modes of each one. Select a triangle (what one you select doesn’t matter) and experiment with the different modes. You can also change the Opacity of some triangles if they’re too vivid.

My pink triangle, for example, is set to Linear Burn.
Carry on applying different Blending Modes to your triangles.
Our poster is beginning to look pretty abstract, yet still fall under the minimalism style because of the very limited amount of shapes.

Step 8: Adding 2-3 More Triangles
Reselect the Polygon Tool and drag out 2 to 3 more triangles on your canvas – make sure they’re all on new layers. Color the triangles with colors that we have already used in our poster.

Right-click on the three new layers and click on Rasterize Layer. Change the Blending Mode of all three layers – use what works best with your poster. From top to bottom, I used: Color Burn with 30% Opacity, Hard Light with 5% Opacity and Normal at 20% Opacity.

Step 9: Blurring
Our poster is quite sharp, so we’re going to add some blur. Put all of our layers (apart from our background layer) into a folder named ‘Triangles’. Duplicate the whole folder by dragging it onto the new layer icon in the layers palette. Select all of the contents within our original folder, right-click and click Merge Layers. With the new combined layer selected, go to Filter > Blur > Gaussian Blur and enter a radius of 20px – hit OK.

Lower the opacity of the blurred layer to 5%. This’ll make the poster a little more dreamy than what it previously was.

Step 10: Applying A Photo Filter
Go to Layer > New Adjustment Layer > Photo Filter. Select a Warming Filter (85) with a density of 30%.

Step 11: Adding Some More Color
Make a new layer and fill it with white, go to Filter > Render > Lighting Effects. Select RGB Lights from the drop-down menu and hit OK.

Go to Filter > Blur > Gaussian Blur and enter a radius of 250px. Set the layers blending mode to Vivid Light with an opacity of 20%.
This just adds a little more color the design, making it more interesting.

Step 12: Adding The Ever-So-Important Texture
Pick one of these textures and insert it at the top of your layers palette. Change the blending mode to Multiply and lower the opacity to 25%.
Repeat the step again with a differente texture.

Step 13: Adding A Border
Make a new layer and hit the Cmd+A combination to select the entire canvas. Go toEdit > Stroke and enter a stroke width of 40px, pick pure white as your color and hit OK. Select the Rectangular Marquee Tool and make a selection at the bottom of your poster – fill it with white on the same layer.

Change the layers blending mode to Soft Light. Make another new layer and select the whole canvas again. Go to Edit > Stroke and enter a stroke width of 15px, once again with white selected. Hit OK.

All done! We now have a pretty awesome abstract poster, made entirely out of triangles and simple blending techniques. Take a look at the final piece below, a long with close-ups and different colored versions.
If you liked this tutorial, please subscribe to the RSS Feed or Email Feed to keep up to date with the latest tutorials and design news. Also, please help promote the post by using the bookmarking buttons below!

  • 0

Design a Clean & Tidy Blog Layout Mock-Up in Photoshop

Category : Blog

Step 1 – Setting up the document
Create a new document in Photoshop (Ctrl/Cmd + N) with the dimensions 1920px by 1100px. Then fill the background with the color #dbdbdb using the Paint Bucket Tool (G).

Step 2 – Creating the background of the content
Select the Rectangle Tool (U) and create a rectangle in the middle of your canvas with the width 940px and the color #f8f8f8. Then double-click on this layer to open the Layer Style window and use the settings from the following image. Name this layer “layout bg.”

Step 3 – Creating the header
Create a new group and name it “header.” Then select the Rectangle Tool (U) and create a rectangle with the height 15px that goes from the left edge of the canvas to the right edge. Use the color #90999b. Name this layer “top bar.”

Step 4
Select the Line Tool (U) and create a line with the weight 1px and the color #848d8f. Put this line at the bottom of the rectangle which you have created at the previous step. Name this layer “1px dark line.”
Duplicate this line (Ctrl/Cmd + J), change the color of the new one to #acb7ba and move it one pixel up. Name this layer “1px light line.”

Step 5
Select the Rectangle Tool (U) to create a rectangle with the dimensions 940px by 100px using the color #f2f5f5. Double-click on this layer and use the settings from the following image. Name this layer “header bg.”

Step 6
Use the Type Tool (T) to write a name for your layout in the header. I have used the font Adobe Garamond Pro and the color #9da6a7. Double-click on your text layer to open the layer style window and use the settings from the following image.

Step 7
Create a new group and name it “subscribe.” Download these social media icons and move the rss, email and twitter icons into your document. Put them in the right side of the header and write the name of each icon beneath it using the font Georgia and the color #909b9c.

Step 8 – Creating the navigation bar
Create a new group and name it “navigation bar.” Then select the Rectangle Tool (U) and create a rectangle with the height 40px beneath the header using the color #afbbbc. Double-click on this layer to open the Layer Style window and use the settings from the following image. Name this layer “navigation bar.”

Step 9
Use the Line Tool (U) to create four lines with the weight 1px – two at the top of the navigation bar and two at the bottom. Use the color #9aa4a6 for the dark lines and #bdcccd for the light ones. Take a look at the following image for reference.

Step 10
Select the Type Tool (T) and write the name for your navigation menu items. Use the font Georgia and the color #ebf3f4.

Step 11 – Creating the featured area
Create a new group and name it “featured.” Then select the Rectangle Tool (U) and create a rectangle with the height 180px beneath the navigation bar using the color #ddeaeb.

Step 12
Create two lines with the weight 1px and put them at the bottom of the rectangle which you have created at the previous step. Use the color #becacb for the dark line and #e0f0f1for the light one.

Step 13
Select the Rectangle Tool (U) and create a rectangle with the size 240px by 140px. Double-click on this layer to open the Layer Style window and use the settings from the following image.
Duplicate this rectangle two times (Ctrl/Cmd + J) and arrange them as you see in the image below.

Step 14
Select the Ellipse Tool (U), hold down the Shift key to maintain the proportions and create a small circle in the right side of the featured area using the color #c3d4d5. Name this layer “right circle”, double-click on it and use the settings from the following image.

Step 15
Use the Custom Shape Tool (U) to create an arrow inside the circle with the color #edf6f7. Name this layer “right arrow.”

Step 16
Select the “right circle” and “right arrow” layers and drag them over the ‘Create a new layer’ button from the bottom of the Layers palette to duplicate them. With the two new layers selected go to Edit > Transform > Flip Horizontal. Then move them in the left side of the featured area using the Move Tool (V). Change the name of these layers to “left circle” and “left arrow.”

Step 17 – Creating the content
Create a new group and name it “content.” Then use the Rectangle Tool (U) to create a rectangle with the dimensions 600px by 160px. Then copy the layer style of one of the rectangles from the featured area and paste it to this layer to get the same double stroke effect.
Use the Type Tool (T) to add some text beneath the rectangle. I have used the font Georgia Bold Italic for the headline (#555858) and Helvetica for the block of text (#525757).

Step 18
Create a new rectangle with the dimensions 290px by 100px. Right-click on this layer and select Paste Layer Style to add the double stroke effect. Then select the Type Tool (T) and add some text beneath this rectangle.
Select the two layers and duplicate them three times by dragging them over the ‘Create a new layer’ button from the bottom of the Layers palette. Then arrange the rectangles and the text layers to have four blog posts. Take a look at the following image for reference.

Step 19
Select the Line Tool (U) and create a horizontal line and a vertical one using the color #cccccc, to separate the blog posts.

Step 20
Create a new group and name it “sidebar.” Then select the Rectangle Tool (U) and create a rectangle with the width 300px using the color #e7eded. Name this layer “sidebar bg.”

Step 21
Use the Line Tool (U) to create two vertical lines in the left side of the sidebar. Use the color #c9cfcf for the dark line and #f3f9f9 for the light one.

Step 22 – Creating a search bar
Select the Rectangle Tool (U) and create a rectangle using the color #f4f7f7. Name this layer “search bar”, double-click on it and use the settings from the following image for Stroke. Then use the Type Tool (T) to write something inside your search bar.

Step 23
Use the Type Tool (T) to add some text in your sidebar.

Step 24 – Creating the footer
Create a new group and name it “footer.” Then select the Rectangle Tool (U) and create a rectangle with the height 40px using the color #b6bfc0. Name this layer “footer bg”, double-click on it and use the settings from the following image for Gradient Overlay.

Step 25
Select the Line Tool (U) and create two horizontal lines at the top of the footer. Use the color #9da5a6 for the dark line and #c5cfd0 for the light one.
Then select the Type Tool (T) and write a copyright statement in your footer using the color #858e8f and the font Georgia.

Final Result
Here is the final result of this tutorial. I hope you enjoyed it. Click on the following image to see the full size layout.

Recent Comments