Design Notes, Tutorials and Articles
Check Out Our Photoshop Tutorials
Adobe Photoshop is the industry standard in raster graphics editing, such that the word "Photoshop" has become a verb as in "to Photoshop an image," "photoshopping," and "Photoshop contest," etc. It can edit and compose raster images in multiple layers and supports masks, alpha compositing and several color models including RGB, CMYK, Lab color space, spot color and duo-tone. Photoshop has vast support for graphic file formats but also uses its own PSD and PSB file formats which support all the aforementioned features. In addition to raster graphics, it has limited abilities to edit or render text, vector graphics (especially through clipping path), 3D graphics and video.
Learn how to use Photoshop or just specific elements of it using our Photoshop tutorials.
Want To Be A Web Designer?
The role of the web designer, is to create the 'look and feel' of a website. What this actually involves can vary, depending on the size of team the designer is part of, or the type of company they are working for or where the designer is working alone or in a very small team.
The designer must combine creativity with an awareness of the tools, techniques, processes and technologies that will be used to build the website. The role sometimes also overlaps, or may even be merged with, that of the web developer or programmer, especially in smaller companies or teams.
Designers may be employed in permanent positions within a company, or may work on a freelance basis. Among freelancers, there tends to be most demand for those who are both good designers and have good all round technical expertise.
The designer will normally produce a separate visual for each type of screen within the product, for example the home page, first-level and lower-level pages of the website. As a minimum, these visuals must show the sites' layout, colour scheme, typography and any images or other features. However, they usually also specify, either through annotations or additional visuals, how interface elements should respond to interaction by visitors to the website. For example, this might include specifying colour or style changes for links that are clicked or rolled over, or designing animated buttons or menus.
Designers must prepare designs in a way that allows them to be easily implemented by developers programmers. This means designs must be appropriate for their intended purpose and visuals must be provided in the right format and at the correct size and resolution. Sometimes the roles are combined, with the designer-developer or designer-programmer being responsible for implementing their own designs, especially where the entire interface is animated or where a HTML and CSS based web design approach is being used.
The job tends to be divided into various levels of seniority, based mostly on experience. As a general rule, the greater the seniority, the more responsibility the designer will have for the overall user experience, including the design of navigation, features and functionality. At junior levels, Designers tend to be tasked with only some aspects, typically the visual styling, of the interface.
There are no typical career routes, but many web designers come from a traditional design background, such as graphic, print or information design. Sometimes they combine this with experience or study in a more technical subject, such as computer science, engineering, mathematics or psychology. It is this combination of creative and technical disciplines that tends to set the best web designers apart and enables them to progress into more senior positions.
Essential knowledge and skills
Designers need creativity and artistic flair but also a certain amount of technical understanding. The nature of web design means that they must often design within many unknown or variable parameters, for example, the user's screen size, or the amount of content to be included on a web page.
The designer must therefore be able to identify these factors and think laterally so as to produce flexible designs that work correctly in a range of circumstances. They need to understand usability issues, the principles of interaction design, and any user-interface standards that are relevant to the website.
The designer must combine creativity with an awareness of the tools, techniques, processes and technologies that will be used to build the website. The role sometimes also overlaps, or may even be merged with, that of the web developer or programmer, especially in smaller companies or teams.
Designers may be employed in permanent positions within a company, or may work on a freelance basis. Among freelancers, there tends to be most demand for those who are both good designers and have good all round technical expertise.
Some Info About Web Designers |
What is the job?
A web designer produces visuals of user interfaces, using software such as Adobe Photoshop or Illustrator. They usually follow a design brief that may be given as verbal instructions, a written specification or 'wire-frame' diagrams.The designer will normally produce a separate visual for each type of screen within the product, for example the home page, first-level and lower-level pages of the website. As a minimum, these visuals must show the sites' layout, colour scheme, typography and any images or other features. However, they usually also specify, either through annotations or additional visuals, how interface elements should respond to interaction by visitors to the website. For example, this might include specifying colour or style changes for links that are clicked or rolled over, or designing animated buttons or menus.
Designers must prepare designs in a way that allows them to be easily implemented by developers programmers. This means designs must be appropriate for their intended purpose and visuals must be provided in the right format and at the correct size and resolution. Sometimes the roles are combined, with the designer-developer or designer-programmer being responsible for implementing their own designs, especially where the entire interface is animated or where a HTML and CSS based web design approach is being used.
Skills Needed:
If you want to become a web design the key skills that you will need include...
- Can use the design process.
- Good drawing and diagramming ability.
- Awareness of design principles, elements, composition and other design theories.
- Knowledge of relevant design, image manipulation, and asset optimisation software.
- Good interpersonal communication skills, especially when dealing with specialists in other disciplines.
- Ability to manage time, prioritise tasks and work under pressure.
- Knowledge of the requirements of the relevant Health and Safety legislation and procedures.
- Can use the design process.
- Good drawing and diagramming ability.
- Awareness of design principles, elements, composition and other design theories.
- Knowledge of relevant design, image manipulation, and asset optimisation software.
- Good interpersonal communication skills, especially when dealing with specialists in other disciplines.
- Ability to manage time, prioritise tasks and work under pressure.
- Knowledge of the requirements of the relevant Health and Safety legislation and procedures.
Typical career routes
The job tends to be divided into various levels of seniority, based mostly on experience. As a general rule, the greater the seniority, the more responsibility the designer will have for the overall user experience, including the design of navigation, features and functionality. At junior levels, Designers tend to be tasked with only some aspects, typically the visual styling, of the interface.There are no typical career routes, but many web designers come from a traditional design background, such as graphic, print or information design. Sometimes they combine this with experience or study in a more technical subject, such as computer science, engineering, mathematics or psychology. It is this combination of creative and technical disciplines that tends to set the best web designers apart and enables them to progress into more senior positions.
Essential knowledge and skills
Designers need creativity and artistic flair but also a certain amount of technical understanding. The nature of web design means that they must often design within many unknown or variable parameters, for example, the user's screen size, or the amount of content to be included on a web page.
The designer must therefore be able to identify these factors and think laterally so as to produce flexible designs that work correctly in a range of circumstances. They need to understand usability issues, the principles of interaction design, and any user-interface standards that are relevant to the website.
Training and qualifications
Although there are now various specialist web design courses available, many designers' qualifications are in more traditional art-related subjects. Architecture and product design are particularly useful backgrounds, as they tend to encourage the combinations of creative and technical thinking that web design requires, design in its broadest sense. Experience is generally valued most, however, and a good portfolio of web design work is essential.How To Become A Graphic Designer
How To Be A Graphic Designer |
Graphic designers produce visual design solutions using images and lettering to get across information and communicate a message with high visual impact. Graphic design solutions are required for a wide variety of products and publications, such as websites, advertising, books, magazines, posters, brochures, booklets, magazines, computer games, product packaging, exhibitions and displays, logos, business cards and more. Graphic designers are normally based in a studio or office, but may also spend some time visiting and receiving clients and dealing with printers.
A graphic designer normally works to a brief (set of instructions) set by the client. They develop creative ideas and concepts choosing the appropriate media and style to meet the client's requirements. Graphic design requires creativity, knowledge of industry standard design software and a practiced approach to managing time and costs and meeting deadlines.
The Skills...
A graphic designer may often manage more than one design brief at a time and must allocate the relevant amount of time according to the value of the job. Typical activities include:
- Meeting clients to discuss the business objectives and requirements of the job.
- Interpreting the client's needs and developing a concept to suit their purpose.
- Estimating the time required to complete the work and providing quotes for clients.
- Developing design briefs by gathering information and data through research.
- Thinking creatively and brainstorming to produce new ideas and concepts.
- Developing ideas through drawing and sketching.
- 'Pitching' ideas to managers or clients.
- Working with a wide range of multimedia, like Photoshop, to produce quality designs.
- Proofreading all work to ensure accurate and high-quality work.
- Presenting finalised ideas and concepts to clients.
- Keeping up to date with emerging technologies in new media as most graphic design work is now completed on a computer.
- Working as part of a team with printers, copywriters, photographers, other designers, web developers and marketing specialists.
Career Path:
Graphic designers are normally employed based on the strength of their skills as opposed to their qualifications. However, most professional graphic designers have an ordinary degree or honours degree in graphic design, art or other creative, design based area.
Talent and contacts are the key to getting work as a designer, and you will need to keep an up-to-date portfolio of your work to show to potential employers or clients. Competition for jobs is strong and not all jobs are advertised, so it is a good idea to network and make contacts within the industry, and to approach companies and agencies directly. Unpaid work experience is an opportunity many designers take up in order to help develop their portfolios, make new contacts and impress potential employers. Joining professional bodies such as CSD and D&AD will also give you the opportunity to make contacts in the industry. It is also common practice for designers to create a website to showcase their work.
There is no upper age limit for entry to this occupation. You may be able to enter relevant training through universities or colleges that relax normal academic entrance requirements for suitable mature applicants. Most academic institutions define people aged 23 years or over as mature candidates.
Once a designer has completed their college studies they will still need to keep their skills up to date throughout their career. You may be able to attend short courses, for example in computer packages such as the Adobe Creative Suite, which is the industry standard package for all things design and multimedia related.
5 Easy Ways To Improve Your Designs
1. Avoid Image Overload...
We are now bombarded with more images and information than ever and our brain simply can't process it all |
We are now exposed to more information than ever before through TV, radio, emails, text messages, snap-chats, skype calls, viber etc. There are screens everywhere we look and it is simply impossible for us to process and remember everything we see. But we do remember some things of course.
As a designer, the question is how can you make your designs memorable? The answer is simple...no really it is simple! Complex visuals with multiple images or areas of focus distract the eye from each other and actually prevent people from taking in any message at all. On the flip side, simple images/visuals with a single focal point can be processed more easily and are therefore more likely to transit their message to the viewer. All the design tips which follow also have simplicity at their core.
So before you start a design project, identify the key requirements and focus on translating the single most important message. For example in a movie poster make sure the viewer walks away remembering the movie's name, if they remember that they can look it up online to find on when it's out, where it's on etc.
2. Grab Attention...
Did I Catch You Looking...? |
There are actually 7 different image types that are proven to grab attention, make sure your designs main image contains one of them. The first one is obvious (I've used it above) and that's sexy. The others include Funny, Surreal, Iconic, Shocking, Bright (vividly so) and, the hardest to achieve, Original. Read more about Attention Grabbing Techniques.
3. Get Vector Friendly...
This image is made up of layers of flat colour tones and vector shapes |
Vector images are another great way to keep an image simple, as you can use them to reduce an image down to it's most basic form and yet (if done correctly) it will still be instantly recognisable by the viewer. In fact, a vector image will be more recognisable and memorable than a photo as they are less common and therefore stand out as being original.
Once mastered, the vector tools in Photoshop or Illustrator are also a really quick way to block out a designs structure and form which can help you visualise the final design more easily. In graphic design projects where an image might be reused in a variety of situations like a advertisement which can appear on anything from the side of a bus to pop up on a mobile website then vector images also have an extra advantage as they can scale up and down without losing quality or pixelating.
4. Forget Colour*
Black and white images are more powerful due to the contrast |
*Working in just black and white at the start of a project allows you to focus on the composition and layout of the design without the distraction of trying to choose and match colours as you go. Think about any design template you see, they are all in black and white and focused on structure. Here and here for example.
If the composition in a design is poor the viewer will not be drawn in to look at it no matter how nice the colour scheme is. A good composition also allows you to structure the design to ensure the key message is in focus compared to the other elements which may surround it.
5. Have Principles...
This image uses 2 of the 5 design principles |
Every self respecting designer should be familiar with the principles of design but more important than that every designer should use them! Using at least one of the design principles in every design project will immediately improve the quality of your work. Read more about the principles of design here.
Understanding Fonts
There are literally thousands of fonts to choose from so it's important to know the difference. |
Why Care About Fonts?
Choosing the right type of font to use in a design is more important then you may think. Font size is a very important aspect that must also be taken into consideration. When choosing a font size, one should keep in mind that choosing sizes closer to one another for various levels within your site will output a more professional and elegant webpage. Font emphasis is also an important factor as not only will font emphasis aid in search engine optimization, it also alerts viewers to what is important on a page or where the links are located. Search engine spiders look for phrases that are either in bold, highlighted or between header tags. These phrases are deemed as important. One can therefore control keywords by placing them in bold or italics.
All of these issues need to be taken into account with every website. Choosing the proper text is vital to readability as well as accessibility. However before we can make any of these types of decisions it is important to first understand fonts and all the terminology around fonts in more detail.
All of these issues need to be taken into account with every website. Choosing the proper text is vital to readability as well as accessibility. However before we can make any of these types of decisions it is important to first understand fonts and all the terminology around fonts in more detail.
The Basic Font Terms...
There are two types of names used to categorise fonts: "generic families" and "family names". Both terms are explained below.
Generic Family Fonts:
Generic families can best be described as groups of family-names with uniformed appearances. An example is sans-serif, which is Latin for without feet. In this instance 'feet' refers to the small base lines that are seen on the bottom of a letter. So sans serif is a font family which is a collection of fonts where the letters do not have 'feet'. Then there are serif fonts which have 'feet' and finally there are the more obviously named mono-space fonts which are characterized by all letters/characters having a fixed width.Font Family Names:
Examples of a family name (often simply known as "font") can e.g. be "Arial", "Verdana", "Times New Roman", "Courier", "Calibri" or "Tahoma".The difference is also explained in the illustration below.
The image above explains the difference between generic families and individual font name |
Choosing An Appropriate Font
In design, especially web design and graphic design, fonts play an important part in the success and overall aesthetic of your design image/project. Different fonts suggest different styles and have different connotations attached to them. For example the font below, taken from www.dafont.com is a horror style font. It suggests bloodshed, gore, monsters and vampires etc. You would expect to see it used for a horror movie poster or something similar. On the other hand you would not expect to see it used for the logo on a children's creche!Appropriate for a scary movie... |
The style and colours of fonts can have a big effect on how we interpret the meaning of a design |
Font Readability...
Other considerations with regard to choosing a font include "readability", in other words, how easy a font is to read. In terms of web design the recommended font size to use is either 14 or 16 pixels for body text. This website uses 16px, hope you can read this OK.Script style fonts can be very fancy but are also generally hard to read. Using them for a heading might be suitable but using them as a body text ( for a large amount of text) certainly would not be. For example try to read the text below! Not easy is it?
Can you read this OK? |
In general sans-serif and mono-space fonts are easier to read. While serif fonts are a little more "fancy". Although with the ever expanding library of original fonts continuing to expand online on websites such as www.dafont.com there are really no set rules to choosing a font.
My advice is try out as many as possible while keeping in mind the style you want to get across in your image/design/project. If you wish to look into it further here are some recommended links to other sites which explore the issue of how to choose a font.
I hope you found this useful. Feel free to share any comments you have or recommend any fonts or font websites.
What File Type Should I Use...?
There are many different file types used to encode digital images. JPG, GIF, TIFF, PNG, BMP, PDF and PSD are just a few. But what are they, what do they stand for and what are the differences?
Part of the reason for the variety of file types is the need for compression. Image files can be quite large, and the larger the file the more disk space it uses and the slower it is to download. Compression is a term referring to the ways of reducing the size of a file. Another reason for the variety of file types is that images differ in the number of colours they contain. Therefore if an image is made up of only a few colours, a file type can be designed to use this as a way to reduce the file size. Compression schemes can be either lossy or lossless.The Basics...
A lossless compression does not discard any information. It attempts to represent an image in a more efficient way, while making no compromises in accuracy. In contrast, lossy compression allow some reduction in the image quality in order to achieve a smaller file size. Here I discuss the basic features of a 7 common file types.
PDF is a formal open standard known as ISO 32000. Maintained by the International Organization for Standardization, ISO 32000 will continue to be developed with the objective of protecting the integrity and longevity of PDF, providing an open standard for the more than one billion PDF files in existence today.
Back to Top
JPG
JPG (Joint Photographic Experts Group) is optimized for photographs and similar continuous tone images that contain many, many colours. For this reason all digital cameras save in a JPG format by default. It can achieve excellent compression ratios while still maintaining very high image quality. JPG works by analyzing images and discarding kinds of information that the eye is least likely to notice. It stores information as 24 bit colour. JPG is the most popular format for nearly all photographs uploaded to the internet.Never use JPG for line art. In these type of images where there are areas of uniform colour with sharp edges, JPG does not perform well. For these type of images GIF and PNG are better suited.
Back to Top
PSD
PSD (PhotoShop Document) is the format used by the graphics program Photoshop. This is the preferred working format as you edit images in the software, because only this format retains all the editing power of the program. Photoshop uses layers, filters and effects to build complex images, and layer information may be lost in other formats such as GIF and JPG. PSD files need to be much larger than other file formats in order to store all this information. For this same reason, however, be sure to save your end result as a standard GIF or JPG, or you may not be able to view it when your software has changed but moreover you cannot use PSD files for web images or in animation programs.Back to Top
TIFF
TIFF (Tagged Image File Format) is a very flexible format that can be lossless or lossy. Although normally TIFF is used almost exclusively as a lossless image storage format that uses no compression at all. Most graphics programs that use TIFF do not compress and as a result file sizes can be quite big.Some digital cameras often offer TIFF as am output option as well as the default JPG. TIFF is usually the best quality output from a digital camera as JPG always results in at least some loss of quality. However, the file size of TIFF is huge. A more important use of TIFF is as a working storage format as you edit and manipulate digital images in a photo editing programme such as Photoshop. TIFF can save the different image layers that you have been editing while JPG can only save the file as a single flat image. Also when you go through several load, edit, save cycles with JPG storage, the image quality degrades each time. TIFF is lossless, so there is no degradation associated with saving a TIFF file.
On the downside TIFF files should not be used for web images as the file size is so large that they take a long time to load and some browsers will not even render them
Back to Top
PNG
PNG (Portable Network Graphics) is a lossless storage format. In contrast with common TIFF usage, however, it looks for patterns in the image that can be used to compress the file size without the loss of any quality. The compression is exactly reversible, so the image is recovered exactly.PNG is becoming increasingly popular as it is superior to GIF and JPG depending on the situation. PNG produces smaller files and allows more colors than GIF and PNG also supports partial transparency. Partial transparency can be used for many useful purposes, such as fades and antialiasing of text.
In terms of superiority to JPG if you want to display a photograph exactly without loss on the web, PNG is your choice. All modern web browsers support PNG, and PNG is the only lossless format that all web browsers support.
Back to Top
GIF
GIF (Graphics Interchange Format) images create a table of up to 256 colours from a selection of 16 million. If the original image has fewer than 256 colours, GIF can render the image exactly but when the image contains more than 256 colours, software that creates the GIF uses any of several compression algorithms to approximate the colours in the image with the limited palette of 256 colours available. For this reason do not use GIF for photographic images, since the restriction of 256 colours per image is much too low for a decent quality photograph.GIF achieves compression in two ways. Firstly, it reduces the number of colours in colour-rich images, therefore reducing the number of bits needed per pixel. Secondly, it replaces reoccurring patterns with a short abbreviation: instead of storing 'white, white, white, white, white,' it stores '5 white'. Thus, GIF is 'lossless' only for images with 256 colours or less. For a rich, true colour image, with more than 256 colours GIF could lose up to 99% of the colours.
Back to Top
BMP
BMP (Bitmap), also known as Device Independent Bitmap (DIB) file format or simply a bitmap, is a raster graphics image file format used to store bitmap digital images, independently of the display device such as a graphics adapter, especially on Microsoft Windows and OS/2 operating systems. The BMP file format is capable of storing 2D digital images of any width, height, and resolution, both monochrome and colour, in various colour depths, and optionally with data compression, alpha channels, and colour profiles.The simplicity of the BMP file format, and its widespread familiarity in Windows and elsewhere, makes it a very common format that image processing programs from many operating systems can read and write. Many older graphical user interfaces used bitmaps in their built-in graphics sub-systems.
While most BMP files have a relatively large file size due to lack of any compression, many BMP files can be considerably compressed with lossless data compression algorithms such as ZIP, where in extreme cases of non-photographic data they can be reduced to just 0.1% of original size, because they contain redundant data. Some formats, such as RAR, even include routines specifically targeted at efficient compression of such data.
Back to Top
NOTE:This list only documents the most common file formats and is not an extensive file format list. I do however intend to add to it in the near future
Subscribe to:
Posts (Atom)