Magazine Cover Design Features


Designing a Magazine Cover? Then you need to be aware of these industry standard features, Both from a technical and a design point of view. First the Technical...


Magazine Cover Template and Dimensions
TECHNICAL

Size: Professional Magazine Covers (and therefore magazines themselves) are not A4 in size. This is a common misconception. The actual size is similar to A4 though; 8.5 inches x 11 inches is the standard.

Text: Your Magazine Cover should include the magazine name, tagline and selected article headings.

Main Image: You should ideally use just one main image. It should be a high quality image ideally on a plain background.

Little Details:  Don't forget the Date, Price, Issue No. and Barcode



So with all those things in place you will technically have a magazine cover, but how do you make sure it is a good one...? Now lets look at the design.



DESIGN

Main Image: Your image should be the dominant element on the cover, it should take up at least two thirds of the cover and should contrast with the background, keeping it centrally aligned it also best. It should also utilise at least one of the Attention Grabbing Technique. The most effective being Sexy or Iconic, if you use an attractive celebrity you will be achieving both at the same time, hence the reason they adorn the cover of most magazines. When using people use either head and shoulders or waist up photos for best impact.
The magazine title text  is best large and bold old in a sans-serif font. The style of the font should also be appropriate to the style and topic of the magazine.  

Sub-Headings are best aligned to the sides, should include a variety of font styles, colours and sizes all still in sans-serif (see the sample below), contrast with the background and use buzz words or better still any of the 12 most powerful words
Magazine Cover utilising variety of sub heading styles, colours and sizes
Magazine Cover utilising variety of sub heading styles, colours and sizes

And not forgetting the little details: They should be kept small, discreet and out of view (unless they are a feature of the sale – e.g. special discounted price)

So if you have taken all this on board are are still interested in creating your own magazine cover design then see our create a magazine cover tutorial. You may also be interested in reading about the most powerful words in the English language, which tend to feature regularly and prominently on magazine covers.


How to Create a Simple Website Menu


Want to know how to Create a Simple but Stylish Website Menu? Well you've come to the right place! Lets get started. First see the sample menu below.






This sample is put into dull greys to allow you to visualise your own business or website colour scheme instead. The menu uses simple HTML and CSS. First copy the HTML code below. Place the code in the 'body' section of the html code of your webpage where you want the menu to appear.



You can obviously replace the href, title and text values to match those of your own webpages. Next the CSS code.



The CSS code can either be place in the head section of the webpage if you are using internal CSS, between 'style' and '/style'. Or on your stylesheet if you are using external CSS. So try it out and get started working on your own web menu. Drop a comment to let us know how you get on.

How to get your website images up the Google rankings

Screenshot from the Google search results page

If your web graphics are optimized for Image search engines like Google they will help to generate an alternate source of traffic to your website. But unlike regular web search where we are more familiar with how search engines rank content, the rules associated with Image search rankings are very different and often based on assumptions.

Why do I say this ? Try a search for "Google" on Google Image Search. None of the top results show images from the actual Google websites or even associated websites. Now if you repeat the search for Amazon, none of the top 5 images displayed are from the official Amazon website. So how do individuals and small companies manage to stay ahead of corporate giants in Image search results? It's to do with image optimization techniques like the ones discussed below.



Regarding optimization, here are 6 simple things that you should keep in mind for getting good rankings in Google Images Search:


Derelict Old Farm House In Field

Image File Name

Use a descriptive image file name which includes keywords related to the content of the image. If your webpage has pictures of an old country farm house - use file names like 'old-country-farm-house.jpg' instead of the default camera file name like IMG_401.jpg. In this way you are providing relevant information about the image to Google rather than just a string of meaningless numbers or letters.

Alt and Title


Attach a 7-8 word description with both the ALT and TITLE attributes of the IMG tag. Make it a habit to use these attributes. An example could be...

<img src="old-country-house.jpg" alt="dilapidated old county farmhouse in countryside" title="country style farm house ageing and run down">

Discuss The Image

A short two line description of the image just beneath the graphic is the best way to describe an image. It can work wonders for your image search rankings as well. For a live example, read any news story on the BBC websiteThe HTML tags enclosing the image descriptions will also matter. A description alongside a heading enclosed in H3 or Bold tag will have more weight than the one with just a description enclosed in the paragraph tag.

Wrapping Text

If possible, try to wrap text around your images using the CSS code of "float", like the old country farmhouse image above. If you site design won't allow wrapping text or if the image is large in size, try to place the images near text that describes the context of your image. Web Photo Galleries which have no text on the page can make use of the Title and Meta tags to insert information about the images.

Image Position On Page

From personal observation Web Images placed at the top of the page are more likely to appear in search results than the ones which are at the bottom. They do not have to be at the very top of the page but certainly 'above the fold' images tend to perform better than those below the fold.

Image Size


Another personal observation is that images which are very large or very small tend not to do very well in the search results. Try to keep images at sizes which will be useful to others who may be looking for them. In my experience images around 600px x 400px tend to do well.


If you do decide to use some or all of these tips, please keep an eye on your image performance and let us know ho you get on.

Create a Zombie - Zombify Yourself

Zombie Photo
Create a Zombie Photograph:

The latest in the series of Photoshop tutorials from OnlineDesignTeacher is here and its frightening! 

Create a zombie image from scratch using the images provided or zombify a picture of yourself or a friend using this tutorial. 

The Photoshop tools and techniques used are commonly used and could be easily applied to other projects. And you can easily drop your zombie into other scenes and photos to create a spooky or scary effect.

So what are you waiting for, click HERE to get started.


10 Reasons to use Blogger as a CMS

Google Purchased Blogger In 2003
I was originally going to write this article on why web designers and developers should consider using Blogger to create websites but  kept returning to the fact it is so useful as a Content Management System that I decided to focus on that as the main point of the article instead. 

Any web designer or developer who regularly deals with clients will tell you that working and designing with most (if not all) C.M.S. (Content Management System) systems is awkward, annoying and just not worth the hassle a lot of the time. Yet clients will often ask to be able to update the website themselves at a later date so, unless they take a course in web design, a C.M.S. is needed. So we, as web designers, find ourselves between a rock and a hard place!

I feel Blogger can be the solution to this issue. And here are the 10 reasons why...




FREE TO USE: 
It's free, and is therefore cheaper than every Content Management System on the Market.

FREE HOSTING INCLUDED: 
This alone will save you or your client approx €50 a year.

RUN BY GOOGLE: 
It is part of the Google family so you are guaranteed a quality and reliable service as well as the knowledge that it should index very well - and they do! So Search Engine Optimization ( S.E.O.) is easier too.

DOMAIN NAME INTEGRATION: 
You can purchase a domain name through Blogger which the old .blogspot address will redirect to and which search engines will use to index the site, meaning it appears as a fully fledged professional website and not a run of the mill Blog.

EASY TO LEARN AND USE: 
It's easy to learn and easy to use. It took me about 30 mins to get up to speed with all the features of Blogger (there are many); I could not say the same for any other C.M.S. I have used.

TEMPLATES: 
There are a wide selection of templates built in to help get you started as well as thousands available for free online from very talented and generous web designers.

EASY CODING: 
But if you don't like templates you can still edit the site H.T.M.L. and C.S.S. code directly to create a unique and original design or just to tweak an existing template. You don't have to work with other types of code such as  .xml or .aspx like with other Content Management Systems.

LOADS OF WIDGETS: 
There are a wide selection of widgets like site search, follow by e-mail and Ad-sense that can simply be dragged and dropped into the site layout and still be customized to suit the sites colour scheme or style.

RESOURCES
There are lots of websites (too numerous to list) and a very useful help section that offer advice and tips on how to get the most out of the Blogger system especially for unique customization.

EASY FOR THE CLIENT: 
Most Importantly it will be easy for the client to update the pages after you have designed them as they offer a 'compose' method as well as a 'html' method for editing. The 'compose' method is very similar to editing a word document as well as allowing the insertion of videos, images and links with relative ease. So if the client has basic computer skills then they should be fine. 

Web Design and Development Resources

This article contains an extensive list of resources that are useful to both web design novices as well as web development experts as all the resources, tools and software listed are both easy to use and highly effective.  The first thing to note is that if you are a total web design novice you should begin by reading our HTML and CSS tutorials. After that you can revisit this article or read through the other web design tutorials from OnlineDesignTeacher HERE.



Online Photo Editor: www.pixlr.com

In order to design a good, visually appealing website you need to use images and graphics and to edit,manipulate and resize these files you will need a Photo Editor. PhotoShop is the best and most renowned but is also very expensive. Pixlr offers a free solution with most of the same tools available in Photoshop.



Copyright free images for free: www.sxc.hu


To find the best, non-copyright images for your website use www.sxc.hu - The online image stock exchange! You do need to create a free user account but it takes mere seconds and you don't get plagued with junk e-mail after, All they offer is a ridiculously large collection of quality, copyright free images.

RSS Feeds: www.rssinclude.com

Integrate information from other websites, your own blog, Facebook, Twitter or YouTube directly into your website in an easily customisable widget.


Slideshows/Galleries: www.dynamicdrive.com

Dynmaic Drive offers a wide variety of free to use scripts but the most useful are their easy to use slideshows and image galleries. Some samples may not look the best but that is just the small uninteresting images being used. All the scripts are well explained, have no glitches or bugs in them and offer a variety of image transitions and layouts.

Create Online Forms: www.jotform.com

Jotform offers hundreds of form templates which can all be modified to suit your needs in terms of both content and style. From basic contact us forms to payment collections forms they have it all covered. you can also create a free user account to track all the form details and usage stats.

Easily Create Favicon Icons: www.favicon.cc

Ever wonder what the little image icons in the tab of your browser are called? or how they get there? Well they're called favicons and you can make your own with ease at www.favicon.cc by using their favicon draing editor or uploading an existing photo or graphic for conversion.


Visitor Comments: http://www.htmlcommentbox.com/


The HTML comment box is the simplest way to allows viewers to post comments about your web content on the website itself. Its a useful tools to get immediate feedback on an article and create a discussion place which keeps visitors returning to your website with the hassle of a full blown forum. But if you do need a forum for larger discussions....


Web Forums:


Newsletters: http://mailchimp.com

Create automated newsletters for your business/website and allow visitors to signup online using Mail Chimps customisable signup widget. Users who sign up get added to your online database and once you create and send an e-mail or online newsletter it automatically gets sent to them all.



Check your code for errors:  http://validator.w3.org/

Once you think you are finished the website or if you are just having trouble with an aspect of your web code you can use this validator. You can submit code as a file, as text or from a url and each time the code is checked and all errors are noted. Better still however - you can set an option to repair all code errors fro you too! Cool or what.


FTP Solution: http://filezilla-project.org/


Tip: Always create a Google account with your website to allow you to use YouTube, Google places, Google maps, Blogger, webmaster tools, Google analytics and more! SEO and tracking the SEO success of your website is only properly possible using the Google webmaster and analytics tools.

Sharing: www.addthis.com

Allow users to share your website info/articles with friends through social sites.