alexa rank cert Design Tutorials and Articles
WHAT'S NEW?
Loading...

Most Popular Topics

All Purpose Vector Supply Kit
There are a lifetime of graphics available in this amazing vector graphics bundle

We've been talking recently about vectors and how important they are for designers and the great impact a vector based design can have on an audience. So to follow up and help give you a quick leg-up in terms of getting started with using vectors in your design projects I bring to you the "All Purpose Vector Supply Kit".

This vector bundle is the ultimate vector toolkit, especially for young designers yet to build up an archive of resources, as it contains vector resources for designs of all types, themes, topics and styles. And the great news is that it is now available for just $29 which is actually 99% off the initial price! Unfortunately this is a limited time offer and expires on Nov 14th at which time it will revert to it;s original $2,800 price!

One of the many selection of vector packages within the bundle that may catch your eye is the range of Christmas themed vectors which will certainly be useful for every designer over the next couple of months. The images below show just a small selection of the huge range of Christmas themed vectors available to download in this bundle.




My personal favourite though is the Logo Creator Bundle which has almost 1,000 vectors specifically designed for use in creating vector based logos. It's a must have for logo design projects and is something I have already started using in my own design projects and have really saved me a lot of time already. With over 950 logo related elements and over 100 ready made sample logos it's worthy of a vector bundle all by itself.


This vector graphics bundle contains a huge array of logo related elements
This vector graphics bundle contains a huge array of logo related elements.

Taking everything into account this vector collection brings you an incredibly practical set of elements including frames, florals, icons, badges, shapes, icons, silhouettes, textures, machine parts, artistic markings, sunbursts, labels, borders and much, much more! It’s a complete solution for every designer, so whatever your next project, you’ll be able to dip into this collection and find the exact elements you need!

All the components in this vector bundle come with an extended licensing for each and every item, which means that you can use them within your own wider designs available for resale, from greeting cards, to posters and merchandise! So no restrictions, no strings, just quality design elements for you to use. Remember it is a limited time offer (ending Nov 14th 2016), so buy now and it's yours for life.










vector or bitmap graphics
Vector or Bitmap? Which to use, when to use it?

Bitmap/Raster graphics and vector graphics are the two main types of image files used in the world of design. Both of file types have their advantages, and equally they have their disadvantages so it's important to know the difference between the two so you can make an informed decision about which one is best for your design project. Let's start with the definition of each so we know the basics first and your decision of bitmap or vector might be a little bit easier.

The Definitions...

Bitmap Graphics

Bitmap (or raster) graphics are made up of as a series of tiny dots called pixels. Each pixel is actually a very small square that is assigned a color, and then arranged in a pattern to form the image.

Vector Graphics

Vector graphics is the use of polygons to represent images in computer graphics. Vector graphics use mathematical formulas to draw lines and curves that can be combined to create an image. These lines (vectors), lead through locations called control points/nodes/ anchor points.


The Differences...


difference between vector and bitmap
One of the main differences of vector and bitmap can be seen when you zoom in

So the obvious difference between vector and bitmap graphics is how they are created, as identified in the above definitions. Bitmap are made up of pixels while vector graphics are created using a mathematical formula. But there are numerous other differences between vector and bitmap graphics.

For starters, when you zoom in on a bitmap image you can begin to see the individual pixels that make up that image, most noticeably at the edges of the image. When a vector image is scaled up, the image is redrawn using the mathematical formula and the resulting image is just as smooth as the original.

In terms of file size, vector images tend to be smaller than bitmap images. That’s because bitmap images store color information for each individual pixel that forms the image while a vector image just has to store the mathematical formulas that make up the image, which take up less space. Unfortunately, vector formats have not always been well supported on the web. Currently the most popular image file formats used on the web, GIF, JPEG and PNG, are bitmap formats. Most vector images are first converted into bitmaps images (rasterized) before they are used on the web, although the SVG format is growing popularity due the rise in responsive web design.

In terms of colour, bitmap graphics are best for images that need to have a wide range of color gradations, such as photographs. Vector formats, on the other hand, are better for images that consist of only a few areas of solid color such as logos and type (text). This also means that vectors can't create realistic gradients, and although some vector softwares will allow it, they are actually using raster effects on the vector graphic.

When To Use Vectors...

Vector graphics are excellent for graphics that frequently require resizing. A company logo is a prime example of a file that should be created as a vector and saved as a master file so you can use it with smaller items such as your business card, letterhead and brochure, but also on larger surfaces, such as billboards or the corporate jet. Vectors can also be used to create stylized modern graphics as their solid colours and sharp lines help them to appear crisper and with more visual impact that a bitmap image.

When To Use Bitmaps...

Bitmap graphics are best used for photographs or other graphics with a wide range of colours such as a movie poster. They are also ideal for graphics with effects such as drop shadows (as they use gradients). Bitmaps can also be used to create realistic graphics and images using image editing or "paint" softwares such as Photoshop or CorelDraw. They are the most common type of graphic used and are supported on all digital systems.


Vector and Bitmap File Types...


vector and raster file types
Vector and Raster Graphics can come in different file types

Vector File Types

  • .ps (Adobe PostScript) 
  • .eps (Encapsulated PostScript)
  • .svf (Simple Vector Format)
  • .ai (Adobe Illustrator)
  • .cdr (Corel Draw)
  • .svg (Scalable Vector Graphic)

EPS, PDF (for transferring vcector files) and SVG (responsive web design) are the best file types in which to save your vector graphics outside of the editing software you are using.

Bitmap (Rater) File Types

  • .jpg (Joint Photographic Experts Group) 
  • .gif (GIF transparent file) 
  • .png (Portanble Network Graphic Transparent file)
  • .tiff or .tif (Tag Interleave Format)
  • .psd (Photoshop Document)

The best file types in which to save your bitmap graphics are JPG (for photos), GIF (for basic images like cartoons) and PNG (for images with transparency).

Vector and Bitmap File Types

Encapsulated PostScript files (.eps) are self-contained files that are the same mathematically as vector files, though they can be created from raster images as well. The format is one of the most compatible and portable because they are supported by almost all graphics software.

Then there is the Adobe Portable Document Format (.pdf) files in which files render as they were created thus using (potentially) a combination of vector and raster images.In a PDF file vector images are rendered as such as and be scaled and extracted. Fonts are embedded within a file and are rendered as type, not flattened as an image element. Raster images, such as photos, will appear as intended at 100 percent but, being bitmap graphics, they will still lose quality if they are over-enlarged.


Web or Print?


vector or bitmap for web or print
Which graphic format is suited for web or print or both?

This questions is much more relevant to bitmap graphics due the fact that they can lose quality when scaled up. Units of measurement such as dpi (dots per inch) or ppi (pixels per inch) refer to the number of pixels in one inch of the image. To determine whether your bitmap images are a suitable resolution for a specific situation (poster/business card/web banner etc.), you should first need to check their pixel density. 

As mentioned earlier, vector formats have not always been well supported on the web and currently the most popular image file formats used on the web are bitmap formats such as .jpg or .png. The web displays 72 dpi, a relatively low pixel density, so raster images with a low dpi (such as 72 dpi) look nice and crisp on the web but this same image may not be suitable for printing on a brochure, poster or packaging which require a higher pixel density to maintain quality when printed. 

Why is this relevant you ask? Well to correctly print an image, it should be at least 300dpi, a much higher pixel density than the web displays so if you try to resize a low dpi image pulled from the web to use for your high dpi print project it won’t work because the image still has the same amunt of pixels and will distort (pixelate) when you try to scale it up. For example, if have a 72 dpi .jpg of an image it will need to be “stretched” to more than 3 times it's size to get it up to 300dpi. So that 72dpi image will look fine on your computer monitor, but when it prints at 300dpi it will look pixilated.

In this situation you should use a vector image (.EPS or .AI format) or create a bitmap/raster (.JPG or PNG or GIF) in the exact final print dimensions and at 300dpi.


In Conclusion...

So after all that what we can say is that neither vector or bitmap is a better format than the other but rather that each format has it's advantages and disadvantages. The main thing is that once you know what these advantages and disadvantages are you can make an informed decision on which format is the right one for your design project. Vector or Bitmap... it's your call!




Search Engine Optimisation for websites
Search Engine Optimisation for websites

The role of  SEO (Search Engine Optimisation) is to optimise a website to make it as visible as possible to internet search engines, in order to increase their rankings, maximise traffic to them and therefore increase their revenue through sales or advertising.

Search engines, especially Google, are very reluctant to reveal how their algorithms work so it is impossible to specify exactly how to optimise a website's search engine performance perfectly, however there are still some tools and techniques which are known to improve a website's visibility to search engines. It is these SEO tools and techniques that are discussed here.

1 - Web Page Names:

As well as the obvious choice of the name of the website itself it is also important to consider how you name each individual web page. The name of the web page is the second thing a search engine will read, after the website name itself, so it is an important opportunity to include keywords and describe what content is on the page. When designing a website, page names are usually saved as all one word, for example 'web design' becomes 'webdesign', as it is quicker to type and easier to remember.
TIP: You may consider instead saving it as web-design or web_design as it allows search engines to identify the two separate words, which are both keywords, instead of not recognising the singular word 'webdesign'. Also avoid using abbreviations for page names, for the same reason.

2 - Web Page Titles:

The title of a web page is written in the HTML code in the head section of the webpage and appears in the top of the browser window or in the tab of newer browsers. See a sample code and sample result below.


The title of a web page is extremely important as is showcased by the fact that it is the first and largest thing in the Google search results. See the example below, the title is in blue. This is clear evidence that search engines, such as Google and Bing, give great importance to a webpages' title.



3 - Article Headings and Sub Headings:

Headings, created with the 'h1', 'h2', 'h3', elements are important for highlighting these Keywords. As they are headings and not just body text they are seen as being more important for describing, in short, the content that will follow. Therefore try to integrate relevant headings into the content of your website for better SEO but also for another reason.

In today's fast paced world people don't really read articles or webpages, they skim through them to try to quickly find the content they are looking for. By using headings and sub headings in your webpages you are breaking up any long, boring looking passages of text into smaller, more manageable chunks and helping your visitors with this process and they are therefore more likely to find the content they need and stay on your website longer.

TIP: as well as helping with search engine optimisation they will also help with your website pages bounce rate.

4 - Keywords and Description:

When someone uses a search engine they normally don't type full sentences like 'I am looking for information on design' , they usually just type in 'design' or 'design information', in this case 'design' and 'information' are the keywords. It is important that your website contains the key words relative to it.

This used to be done using meta tags, some search engines still use meta tags, but due to the practice of keyword 'stuffing' (repeating key words over and over) search results were beginning to become unreliable as the best/ most relevant pages were not necessarily making it to the top of the rankings.

Google admits it no longer uses meta tag keywords, although it still does use the meta tag descriptions and the description usually appears as the sentence below the website title (in blue) and address (in green)in the search results. See the example below,



The code for meta tag keywords and descriptions goes in the head section of the HTML code, as it is information about the page but it does not appear on the page itself (otherwise it would go in the body section). To see an example of meta tag code see the example below,



Although meta tags are useful, it is much more important to include the keywords, that you think potential visitors will be searching under in the website content itself. Despite all the tools, techniques and tricks associated with SEO it still all comes down to the quality of content in the website. As they say in the search engine optimisation business "content is king!".

With this SEO mantra in mind, be sure to tweak the body text to include as many keywords or keyword synonyms as possible, without of course, ruining the content itself. The quality of the content must remain high as ,even if you get to number 1 in the search engine rankings, when visitors come and don't find the information they are looking for they will leave the site just as quickly as they arrived and that is bad for your SEO (see bounce rate below).


5 - Web Links:

Links, in two senses, can help a website's ranking in search engine results. Firstly, by linking your website with other websites and getting them to link back to you, you are enhancing your website's online reputation and demonstrating that it is a trustworthy and safe website for visitors. Search engines regard trust and safety highly as they do not wish to lead searchers to an unsafe or virus filled website.

Secondly, the links within your website are another opportunity to include keywords in the content. As links are 'marked up' in a different way to normal body text it is only logical to presume that search engines will read it in a different way to standard body text.

TIP: It is believed that all content "Marked Up" differently to standard body text is read differently by search engines and possibly given greater importance. Therefore, make good use of links and bold, underline and italics text to subtly increase emphasis on your chosen keywords.

The click-able content of the link and the link title (which should be included on every link) should be descriptive enough to let the website visitor find the information they need which in turn keeps the visitor on your website for longer and increases the sites traffic statistics while also reducing the 'bounce rate'.

The 'bounce rate', according to Google Analytics, is 'the percentage of single-page visits (i.e. visits in which the person left your site from the entrance page). Bounce Rate is a measure of visit quality and a high Bounce Rate generally indicates that site entrance (landing) pages aren't relevant to your visitors. By having clear and obvious links, especially in the menu section, visitors are more likely to stay on your website and search for the information they need. So it can be assumed that Google will punish a website with a high bounce rate as it suggests visitors are not finding the content they expected.


6 - Images:

SEO for web images
Optimising your website images and their html code will help with SEO

With the evolution of search engines people can now search directly for images or videos without having to go through the site on which they are hosted. Despite this, search engine haven't evolved to the point where they can directly extract the meaning from a photo or a video. Therefore search engines are still reliant on the information we provide them through names, alt attributes, title attributes, headings and surrounding content.

The simplest thing you can do to increase the meaning of 'img' elements is to use proper file names. For example, let's say we have a web page about web design and I took a photo of someone sitting at their computer that I then wanted to post up on the page. Cameras will auto-generate a file name to my photo, such as DIM1234.jpg, so it is important to rename it to something that specifies the content of the image such as web-designer-at work.jpg. Now the URL of the image will be something like http://example.com/web-designer-at-work.jpg. The image now has a better chance of being indexed for terms such as 'web design' and 'designer at work'. The image may eventually rank in the results for Google Images and drive traffic to your website.

The second aspect involved in optimizing images for SEO is placing important keywords in the image's alt and title attributes. Here's another example,

<img alt= "web designer at work.jpg" title="web designer at work" src="web-designer-at work.jpg">

The alt attribute is typically regarded as the primary attribute of an image that a search engine will use for gaining context. But don't stuff keywords in them, write your alt attributes primarily for your visitors. Search engines view alt attribute keyword 'stuffing' as a bad practice and may remove your image from search results.


7 - Videos:

SEO for videos
Optimising your web videos and their html code will help with SEO

Much like images, videos can't be crawled by their content. However, there are metadata that you can include to help search engines understand what the video is about. The main thing to optimize is the title of the video, especially when you're using a third party streaming service such as YouTube or Vimeo. Secondly, add keyword tags to videos when uploading them to YouTube and Vimeo which they use in their site search. Another element that affects the search results of a video is the video's description. The description is an opportunity to include the keywords that you wish the video to be found under, without 'stuffing' of course. A good description will go a long way to increasing the videos ranking in search engine results.

Another way to increase ranking in the search results for videos is to get as many views, Facebook Likes and +1's on your video as possible. This is based on the logical assumption that search engine algorithms take social sites into account as a ranking factor. If your video gets a substantial amount of Facebook Likes compared to other videos in the same category, there is a higher chance it will rank better for your targeted keywords.

So search engine optimisation for images and videos takes little time to implement and can provide significant results, especially in niche markets. For example, when you're having trouble getting a page or article to rank for a competitive keyword in your niche, posting an optimized video or image may help you get a leg up. As already mentioned, search engines can't index the actual content of an image or a video, but we can provide them with greater meaning and context using the simple and practical techniques we have discussed.


8 - Page Load Speed:

page load speed for seo
Page load speed is now a recognised factor in SEO

The page loading speed of your website is now known to have an effect on how Google ranks it in it's listings. A faster loading website is immediately more user friendly and with studies showing users will click out of a website if a webpage is not at least partially loaded after 3 seconds then having a website optimised for speed is a must.

Google provides an excellent resource to test the speed of your webpages, in desktop and mobile terms, and then outlines possible improvements with links to articles on how to go about it. This very useful resource is referred to as the Google Page Speed Insights and can be found here.
TIP: Images, videos, ads and any widgets will always be the main culprits for slowing down a webpage but don't rush to delete valuable content, just optimise what is needed and remove anything unnecessary.
  Click here for more tips to improve your website loading speed.


9 - Mobile Friendliness:

mobile seo
Mobile friendliness is now a factor in SEO

A noticeable feature on the Google page speed insights results which also appears on Google AdSense and Analytics account pages is a reference to mobile friendliness. It may appear under different names such as user experience or site responsiveness or mobile compatability but the point remains the same; Google values how mobile friendly a website is. In each of these cases you will get a rating or score for your website and a link or links to articles'tutorials on how to improve it. Why is this relative for SEO you ask; because if Google are going to the effort of encouraging you to improve it and assisting you in doing so then you can be sure they are factoring it into their search algorithm.

As with the page speed, you should not go deleting valuable content or spoiling your websites design just to achieve a better score but a few small tweaks or removal of secondary content when an article is being viewed on a mobile device should be considered. Page load speed is a major factor in mobile friendliness but don't forget font sizes, spaced links (tap targets) and a clean simple layout.


10 - Create a Google Account:

A Google account allows SEO Specialists to utilise their online tools, such as Google Webmaster (Search Console), analytics or web optimiser tools. As well as these extensive tools, the simple but vital act of submitting a website to be included in the Google rankings can only be done if you have a Google account.

Having these tools at your disposal is one thing but it is vital that you utilise them effectively and use them often. SEO techniques change frequently, so a large part of the SEO Specialist's job involves research, self-study and reading in order to stay up to date with developments in the industry. Thereafter you will be responsible for analysing the website statistics that these tools provide in order to monitor the effectiveness of the website and make adjustments as necessary.




Sample Brochure Design
Sample Brochure Design 

Brochures are a classic advertising and marketing tool for businesses. A good brochure needs to not only advertise your company and it's products/services but also portray your company image and brand in a way that is attractive to your target audience. They say don't judge a book by it's cover but when it comes to a brochures, people always will. So if you or your business are currently designing a brochure or booklet here are 10 easy to follow steps to help you along the way to a successful brochure design.

1. Research

Collect and study brochures from around your community. What is the acceptable industry standard for brochures? What makes one brochure design more appealing than another? You can develop your sense of good design by carefully studying existing designs in the marketplace and deciding for yourself what works best. You can also learn from the mistakes of other btrochures and see what design styles or errors to avoid. The brochures of your competitors should also be carefully assessed to see where you outdo them.

TIP: Take note of your research findings and create a design proposal based around them.

2. Keep it Simple

What is the purpose of your brochure? Create a 'Brochure Checklist' to decide what information you want to cover, and arrange these components in order of importance. The clearer you are about the order of importance within your information, the better your brochure will be. Don't try to write a novel when a poem will do. Select one or two main messages that you wish to convey through the brochure and keep your message in mind throughout and include only those ingredients necessary to communicate the message. 

TIP: If you are using graphic elements to ornament your brochure, ask yourself whether they help to direct the reader’s attention, or simply create distraction.

3. Prioritize Content

Once you have determined the relative importance and sequence of the particular components in your message, you will be ready to consider how to treat each of them. The most important items should obviously receive more of your reader’s attention. They should be larger, bolder, brighter, or in some other way made to stand out. Make sketches and move the various elements around. Try re-positioning one or more elements to see how your design is affected.

TIP: Using block quotes within body text is a great way to highlight important content.

4. Choose your Words Carefully

Try to include some of the twelve most powerful words in the English language, while also avoiding clich├ęs, slang or any currently trendy jargon. The twelve most powerful words, according to advertisers and marketers are...

  1. You
  2. Money
  3. Save
  4. New
  5. Easy
  6. Love
  7. Discovery
  8. Results
  9. Health
  10. Proven
  11. Guarantee
  12. Free


5. Select Appropriate Fonts

sample font for a brochure design

Choose a font that will express the style you desire (professional, humorous, casual…) while still keeping your message clear. Use a minimum of two font styles (to avoid being plain or boring) but also use a maximum of three font styles (to avoid clutter and inconsistency). These fonts can still be varied in size, weighting or colour in the individual parts of the design according to their importance. Read more on fonts styles here. In general a clean and simple font is best.

TIP: You can download this font and thousands of others at www.dafont.com.

6. Utilise Bars & Boxes

Boxes, borders and bars work well for directing the readers' attention and separating busy areas. They achieve this through creating a contrast with the background so always aim for light on dark or dark on light in terms of the colours.






However, don't overuse them as too many can make your brochure design look cluttered and the desired contrast will be lost if everything is 'boxed off'. Instead explore other options for grouping and separating, such as the use of negative space as explained below.


7. Embrace White Space

White Space advice for brochure design
Good advice for your brochure design

You can use empty space to create a relationship between the contents and the page while bringing specific information into focus on the page by adjusting the space around it. The amount of empty space in a design affects its overall tone of lightness or heaviness. Empty space can also be used to frame or align the content without the need for boxes or borders. Read more about how best to utilise white space.


8. Consider Colour Theory

Whatever colour scheme you choose be sure to look into colour theory to ensure the right message about your product, service or company is being sent out. Different colours evoke different emotions in viewers and each colours has attached connotations that we subconsciously associate with it.

Your colour scheme can be applied as ink on paper or as the paper itself. There are hundreds of paper colours available, yet some of the most effective brochures are done in only one or two colours. Black and white brochures can often be more dramatic than colour.

TIP: Carefully selected images can be used to inject colour into your brochure and allow you to use simple black text on a white background without it looking too plain.

9. Paper Selection

Paper comes in all sizes, colours, and textures. The ISO (international Standards Organisation) 'A' Series of paper sizes, has become the global standard for document sizes and your brochure should be based of one of those. See the common document sizes table for more details.

TIP: Using recycled paper can add an interesting flair to your brochure design, and it helps reduce the impact we make on our natural resources.

10. Proofread & Test

You should proofread your final design several times before having it printed. Once printed, it’s too late to fix an error that you didn't spot, without incurring extra costs. It will also make your business look unprofessional and unreliable to potential clients.

You should also step back and look critically at the overall layout asking, can it be read from a distance? Is it interesting enough to grab peoples attention? If the answer to either of these questions is no you may need to tweak your design or possibly consider some attention grabbing techniques.

TIP: Reading lines of text backwards is the best way to spot errors in text. 



The classic game Pong is a great place to start your game design adventure

If you have an interest in gaming and would like to start making your own games then this little tutorial is an ideal place to start. I'll guide you step by step through the process of creating your very first game. And what better game to start with than the very first game ever made - Pong!

For this tutorial we will be using a free, online software called Scratch which is a great place to start creating games. Normally before we started out creating a 2d game I would direct you to our 5 part series on how to create a 2d game but this game is so simple that that process isn't really needed. So let's get started.

Step 1: Create an account


Go to scratch.mit.edu and create an account. It's free, easy and they don't use your email to send you junk.

Step 2: Enter The Editor


Once logged in, just click on the create link in the main menu. This automatically creates a blank project for you. That will bring you into the scratch editor. Here is a short PDF introduction to scratch. You can also watch this short video to get an idea of the scratch basics.


Step 3: Creating The Sprites

First off, lets delete the scratch cat, which is there by default as we won't be needing it for our game. To do this select the delete tool, which has a scissors icon, in the top toolbar and then click on the cat.

Now we have a clean slate from which to start our game. The first thing we will do is create the "sprites" that we will need for the game - these are a ball and two paddles. To create a new sprite ourselves we click on the paint brush icon in the new sprite section, as shown in the image below.



Now, in the sprite editor area on the right of the screen, you should switch to vector mode as it allows you to create vector graphics which are of a higher quality than bitmap graphics. Simply use the ellipse shape tool (highlighted in the image below) to make a ball shape and then click new sprite again and repeat the process, using the rectangular shape tool to make the paddles.


You should now have 3 separate sprites in your sprites area. You can click on the "i" icon on the corner of each sprite to name them appropriately.



Step 4: Adding The Variables

In programming terms a variable is quite simply something that can/will change and because of this needs to be treated differently from other values which remain constant. In order for us to create our Pong game we need at least 2 variables, one for the player score and one for the computers score.

To create a variable simply go to the Data section in the scripts options and click on create a variable. Choose the "for all sprites" option and call one variable "Player Score" and the other "Computer Score" or something similar. This will create the variables and give you extra programming blocks to work with, as shown below. We will be using these blocks in the next section.



Step 5: Programming The Sprites

In Scratch programming is done by dragging and dropping "blocks" of code from the various scripts section into the scripting window on the right of the screen. Below, I will illustrate the programming code required for each of our 3 sprites.

The Ball....

Click on the image to enlarge


The Player's Paddle...

Click on the image to enlarge


The Computer's Paddle...

Click on the image to enlarge

Step 6: Adding & Programming Sounds

In scratch there are a library of sounds available for you to use but you can also upload your own if you can't find one in the library that you like. For our game we are simply going to add the "pop" sound for when the ball hits a paddle and the "zoop" sound for when the ball hits either end resulting in a score. Simply select the ball sprite and in the Sounds tab click on the speaker icon to select a sound from the library.



To programme the sounds to activate at the right time simply change your ball sprite programming code as shown below. 

Click on the image to enlarge

And that completes the basic set up for your game. If you would like you can also add win or lose screens to you game as shown in the sample below. To see how to do that just click here.

The Finished Game:

Click on the green flag to start the game. Have Fun!




Free Graphic Design Resources
Free Graphic Design Resources
This is a selection of the best free design resources and tools for graphic designers from across the web. These tools and resources are particularly aimed at design students and they will definitely come in useful in creating all sorts of design projects; these are webpages that should certainly be bookmarked! We really hope you find this list useful and if you know of any other free design tools or resources you think we should add then feel free to contact us and let us know.


Adobe Color CC

Create color schemes with the color wheel or browse thousands of color combinations from the color community using this interactive web tool. Everthing you need to prepare a design color scheme is at your fingertips with this great tool.

Avatar Icon Creator Pack

Whether you just want to make your own avatar icon, your colleagues’ or friends’, or if you’re up to a full business or personal project, you can use this incredibly complete pack to build up a huge amount of combinations in just a few simple steps. This is the easiest way to create a detailed avatar!
www.designshock.com/avatar-icon

Bittbox

The Freebie Gallery on the Bittbox website includes a vast selection of brushes and textures available for free download and use in Photoshop. Expect scratched backgrounds, paint blotches, wooden textures and loads more free design resources.
www.bittbox.com

Canva

Canva’s awesome suite of features make it easy to turn ideas into stunning designs. Simply search for the best graphics, photos, and fonts, then use Canva’s drag and drop tool to create a design. Whether your next design project is a creative collage, a social media graphic or even a web mock up. Canva’s features make it possible for anybody to create amazing designs for free.
www.canva.com

Creative Bloq

Creative Bloq is a design blog but we want to focus on just one post - a mammoth list bringing together over 2,500 brilliant design freebies, covering everything from typography to 3D design. The list is updated regularly with new design resources added all the time.

Creative Market

Go to their "Get Free Goods" section for a line-up of the best free goodies on Creative Market from the past week. To mix things up the website offers a variety of graphics, including vectors, Photoshop packs, fonts and textures.

DaFont

DaFont is a huge online library of great fonts in a wide variety of styles.The fonts presented on this website are their authors' property, and are either freeware, shareware, demo versions or public domain. There is also a great preview function to help you select the best font for your design.

Design Instruct

Design Instruct offers lots of free resources, as well as a ton of useful articles. Simply head to their Freebies section to download anything from icons, vectors and fonts, to Photoshop actions, stock images and textures.
www.designinstruct.com

Dribbble

As well as being a great source for design inspiration, Dribbble also high quality freebies including icons, fonts, vector illustrations, patterns and textures. They are often featured on numerous websites, but you can be the first to view the very latest additions by searching the ‘freebies’ tag on the Dribbble website.
www.dribbble.com

FlatIcon

FlatIcon is the largest database of free icons available in PNG, SVG, EPS, PSD and BASE 64 formats. Flaticon offers users, high quality graphic designs: totally editable vectors carefully selected by their design team in order to provide users with great content that can be used in both personal and commercial projects - all for free!
www.flaticon.com

FreeDesignResources

As the name suggests this website is a library of  design freebies. Free Design Resources is a site dedicated to help you find the high quality design resources for free. Crafted with love from amazing artists and professional designers around the world.
www.freedesignresources.net

FreePik

Freepik helps you to find free vector art, illustrations, icons, PSD and photos for using in websites, banners, presentations, magazines or any design project you are working on. They are currently creating hundreds of free vectors every day so you'll be sure to find what you need for your design project.
www.freepik.com

Pixabay

A library of free images and videos you can use anywhere. All images and videos on Pixabay are released free of copyrights under Creative Commons CC0. You may download, modify, distribute, and use them royalty free for anything you like, even in commercial applications. Attribution is not required so their images are perfect for any design project.
www.pixabay.com

Pixeden

Full of free graphics and web resources, Pixeden has a little bit of everything. From graphic design and web design templates, to a whole host of icons and vectors, there’s a lot to choose from. You can sign up for a free account but if you want something a bit extra, they offer relatively cheap premium plans too.
www.pixeden.com

Pixel Buddha

Browse through Pixel Buddha’s endless catalogue of design freebies, including icons, templates, vectors and more. The website has a few high quality fonts as well, which are good for adding a personal touch to a project. From time to time the website hosts limited special offers as well, letting you snap up premium design resources for nothing, nada, zilch...free! Just another good reason to bookmark this website.
www.pixelbuddha.net

The Hungry JPEG

Download awesome, free graphic design resources today. The Hungry JPEG was started in November 2014 as a website to help designers, crafters, newbies, seasoned graphic design ninjas and well, anybody with an interest in the design world. The aim was to provide high quality design resources and we think they've done just that.
www.thehungryjpeg.com/freebies

Unsplash

Subscribe to the Unsplash mailing list to get 10 free high-resolution photos every 10 days. Expect seascapes and landscapes, architecture, travels on public transport, individual journeys, and much more. The website is great if you’re looking for something nicer than a standard stock image, and all images are free to use in your designs however you like.
www.unsplash.com


Visme

Visme is both an online Presentation and Infographic tool which markets itself as the resource to help you become a better Presenter, Communicator and Story Teller. Similar to Canva you can search for graphics, photos and fonts then drag and drop them to create your design.


The Positives of Gaming Infographic

The Positives of Gaming
The Positives of Gaming - Click to enlarge

Lets start off on a positive note! This great infographic highlights all the good things about gaming, the positive effects it has on gamers and it even finds space to debunk a few myths about gaming too. That's an awful lot of info in one image. If you would like to learn more about gaming or games design you can read more >>>


Game Design Team Infographic

The Games Design Team
The Games Design Team - Click to enlarge

The games design process can be completed by just one person but that person would need to be highly skilled in many different areas of the design process and production stages and have a lot of time on their hands too! For these reasons computer games, much like anything else, are designed and built by a team of people each with their own specific set of relevant skills. The infographic above outlines the job titles of the 8 main members of a game design team. The list is not definitive and other job areas do exist. but these are what are considered to be the most important roles. Read More >>>


Game Genres Infographic

Computer Game Genres
Computer Game Genres - Click to enlarge

Video game genres are used to organize video games based on their game-play interaction rather than visual or narrative differences. For example, a shooter game is still a shooter game, regardless of whether it takes place in a fantasy world or in outer space. Most computer games fall within a particular category or genre. Some bridge different gaming styles and, thus, could appear under more than one genre simultaneously. This infographic provides a list of all the main game genres with the features of each genre explained in brief. Read More >>


Game Design Process Infographic

The Games Design Process
The Games Design Process - Click to enlarge
The computer games design process is based on the general design process but has a process which is solely focused around the area of computer games. The headings differ from those in the general design process but they are effectively the same steps just broken down further and re-titled for a particular task. The overall process takes on the form of 3 major stages, as shown in the infographic above, with each containing a subset of more specific stages. The stages are called pre-production, production and post-production. As the names suggest the processes central objective is the creation of the game. Read More >>>


Gaming Career Infographic

Choosing a Career in Gaming
Choosing a Career in Gaming - Click to enlarge

Want to work in the gaming industry but nor sure where to start or what to do? Then this is the infographic for you. Go from Start and answer the questions as you go to guide you to the ideal gaming career for you. If you would like to learn more about careers in the gaming industry then you can read more >>>


History of Gaming Infographic

A quick history of video games
A quick history of video games - Click to enlarge
Recently the global video game market was said to be valued at approx US$70 billion, but the modern video game industry had a very humble beginning. This short but concise infographic will guide you through the main events in the evolution of gaming. If you would like a more detailed history then read more >>>


Game Review Infographic

Mass Effect 3 Review Infographic
Mass Effect 3 Review Infographic - Click to enlarge
Video games are unique in that they provide an interactive experience that differentiates them from watching movies or listening to music. Games require the active participation of the user and you can't do much else while playing. This gaming infographic charts some of the players' interactions when playing Mass Effect 3. Once you've spent enough time playing a particular game, you should have enough experience to write a compelling review of it. Read More >>>


Culture of Gaming Infographic

How gaming is effecting our health and culture
How gaming is effecting our health and culture - Click to enlarge
If there’s one skill that we all want to keep improving, it’s decision making. No matter what you end up doing for a living, whether it be a secular job, military or stay-at-home, the ability to evaluate the advantages and disadvantages of several choices is important. Gamers can breathe a sigh of relief; new studies have only served to confirm that playing video games can help us make better decisions, faster and this infographic outlines the findings. Read More >>>


The Rise of Mobile Games Infographic

Click to enlarge

This is a big infographic! But then again mobile gaming is now very, very big business and the mobile gaming industry is still growing year on year. If you would like to create your own mobile or 2D game then you can start learning for free right now. Read More >>>


The Neurology of Gaming

The Neurology of Gaming
Click to enlarge




5 Different Approaches To Creating a Website
5 Different Approaches To Creating a Website

It is important to state before we start that the creation of your website is just one of the steps in the web design process and it's not the first one! So I would really recommend reviewing the web design process first to make sure you are adequately prepared for this stage. So many people jump straight in at this stage and waste a lot of their time because they have not completed the previous steps in the process so don't say you weren't warned. Now with that little rant over, lets look at your options for creating the website.

There are 5 main ways to create a website and although not all of them require knowledge of HTML and CSS it is definitely better if you have at least a basic understanding of them.

The 5 ways to create a website are...

  • programme it yourself
  • get a website template
  • use a website builder
  • utilise a CMS
  • hire a web designer
Now that we know each of our website creation options, let's explore each of them in more detail.

Programme it from scratch 


If you already have good HTML and CSS skills or perhaps you are a web design or multimedia student in the process of learning HTML and CSS then this is a good option for you. Programming a website from scratch is also the most cost effective of the 5 options discussed in this article however it is also the most time consuming option. 

To help with this approach there are a number of very good code editor programmes available online such as Komodo Edit, which is an excellent free code editor which you can use to make programming your own website a little easier.


Start with a template


If you really want to program the website yourself but need a little bit of a helping hand getting started then perhaps a website template is the way to go, just be sure to get a responsive template to ensure your website is as user friendly as possible. This is also a great option if your programming skills are better than your design skills as you can keep the templates design features and use your programming skills to edit the content to suit your website needs.

You can choose from an amazing 100 free responsive website templates here. So a website template is definitely a great idea, especially for new web designers, just be sure to customise it as, a bit like a stock photograph being used in a poster, it can appear stale and without character in it's raw, template state.


Use a website builder


Website builders advertise themselves as the easiest and quickest method to create a website. Companies like Wix and Weebly are the best options for this approach and they both offer a starter package where you can get online with a free sub-domain name and free hosting. Although on the surface it may seem like a good choice, in my opinion, this is not a good option.

Website builders always seem to result in very rigid web designs, the free domain name is not a full domain and they tend to overcharge you for a full domain name. You often need to upgrade to a paid account to get a custom domain too and the monthly or yearly pricing structure is usually quite expensive. Bandwidth restriction, custom ads and extra storage space are other things that often need to be paid to unlock. In summary, this wouldn't be a choice I'd recommend.


Utilise a Content Management System


This would be my recommended option. CMS for short, content management systems are similar to, and often confused with, website builders. The difference being a CMS website design and structure is often created by a web designer first before being handed over to a client who only has access to a front end to make any required updates.

However, if you have learned some HTML and CSS, you can take charge and create the website design and structure yourself using systems like Blogger and WordPress. Which one of these is better is constantly being debated online with my personal preference being Blogger (read why). 

Whichever you choose, there are many others available too, this is a great option which offers you templates to get started, widgets to drag and drop in while still having access to the HTML and CSS to make advanced or specific changes and tweaks.

Hire a web designer


If you don't have the time to learn how to build a website or you need to have complex functions or a very specific look for your website and you have a budget, then you will want to outsource the work.

Be careful who you hire, though. A poorly developed website can cost you money, drive away customers, and hurt your reputation. Following a few basic steps will increase your odds of hiring a creative, technically savvy, and cost-effective design firm or freelancer.

Much of your choice of designers depends on whether you want to work locally with someone, or whether you are willing to work remotely with them over the phone. Here are some things to think and ask about when hiring a website designer.