Banner_Cert IV WebBTech-C1

Link to all Weeks     Week 1     Week  2     Week 3     Week 4      Week 5     Week 6     Week 7

Today’s Class

  • Inspirations
  • Webdesign with Photoshop – Revised Tutorial
  • Assessment 2
  • Feedback

Inspirations

Colour Palette for Quentin Tarantino Movie: Inglorious Basterds. Source: Flavorwire.com - Image Credit: Roxy Radulescu
Colour Palette for Quentin Tarantino Movie: Inglorious Basterds. Source: Flavorwire.com – Image Credit: Roxy Radulescu

When it comes to webdesign the appeal of a site will depend on the taste, preferences and experience of a target audience. We can safely say that children tend to be attracted to bright colours and shapes they can relate to. When it comes to older audiences I recommend to focus on the common interest and purpose of the website. A website for a SciFi purpose (eg a Conference of Star Wars Fans) will need the colour palette and visual appearance of that genre: See Colour Palette Star Wars Colour Palette SciFi Colour Palette Blade Runner. If you look at a wider scale you find that every genre has its own preferred and collectively agreed set of colours: Colour Palettes of Films.

Try a Google Search for Color Palette Generator, you may find this one: DeGraeve Color Palette Generator (degraeve.com). Kuler is another excellent Color Palette Generator.

When it comes to website layout it is important to come from an organised starting point. Initially you should look at applying a grid. We looked at Nathan Smith’s 960 Grid System last week, which can be found at 960 Grid System.

A Clean and Beautiful Layout for a Portfolio by Graphic Designer Derek Chan. Source: Computer Arts Projects- Issue 153, 2011, Design for the Web
A Clean and Beautiful Layout for a Portfolio by Graphic Designer Derek Chan. Source: Computer Arts Projects- Issue 153, 2011, Design for the Web

The design above for a portfolio website is an elegant and simple (in its beautiful sense) approach to the display of thumbnails. Please notice that the rectangles of the thumbnails match the rectangular shape of the thumbnail cluster as well as the proportions of a screen. This design was based on the 960 Grid System.

Once you have started with the layout and the initial idea for the the website you can create something that suits the need or purpose, the genre and target audience. An excellent read on grid design, how to create your own or how to apply the 960 grid system: Smashing Magazin: Grid-Based Web Design, Simplified.

Some other clean layouts:

Ink WordPress Theme, found at: DzineBlog.com
Ink WordPress Theme, found at: DzineBlog.com
An example in Spanish with a retro appearance: Hodei Design
An example in Spanish with a retro appearance: Hodei Design
Sam McCoist Website - Photography. Not exactly my cup of tea, actually coffee, but I like the daring aspect of using large fonts for the menu.
Sam McCoist Website – Photography. Not exactly my cup of tea, actually coffee, but I like the daring aspect of using large fonts for the menu.
This is a template for a business website found at TemplateMonster. It is interesting in the sense that it breaks up the main image as part of the navigation. The sound it comes with is annoying.
This is a template for a business website found at TemplateMonster. It is interesting in the sense that it breaks up the main image as part of the navigation. The sound it comes with is annoying.

Webdesign with Photoshop – Revised Tutorial

In-class workshop. I will show you some basic elements of Photoshop that will help you in your design of a website. It has become obvious last week that the Photoshop skills in the class are below what I expected, so that this Photoshop crash course today will make it easier for you to create the 5 concept pages for your final assessment. It will be good for you to attend to make sure that you get the most out of this workshop.

  • Creating a file from scratch – for Web or Print
  • Saving files for the Web, formats
  • Viewing and changing the sizes of a file
  • Working with grids
  • Showing grid and guides
  • Snap to grid option
  • Creating a portfolio page
  • Working with layers
  • Merging layers (Ctrl+E)
  • Grouping Layers (Create group and drag layers in)
  • Working with move tool (using Alt + drag to copy a file)
  • Hiding layers
  • Tick the Auto Select option in the options panel for the Move tool
  • Creating Thumbnails and placing images inside the file
  • Creating a banner by placing an image in a banner sized file
  • Placing the banner and thumbnails
  • Working with Layer masks
  • Using the gradient for layer masks
  • Creating the menu, looking at alignment
  • Creating the title for the header
  • Saving the portfolio page
  • Saving the portfolio page as home page
  • Adjusting the home page
  • Adding an image and text to the home page

Assessment 2

Please check MyKangan for the assessment. It will be uploaded today and link provided here.

Feedback

Please leave your feedback in form of a comment. Your feedback and suggestions will help me to make this blog more user friendly. Thanks!

Inspired by photos by emlyn and clarita from morgueFile.com

Link to all Classes     Class 1     Class 2     Class 3     Class 4

Today’s Class

  • Talking about inspirations
  • Web Design – Photoshop Workshop (in class)

Talking about Inspiration

While you are a student you should be able to experiment as much as you can. I mean, you should claim your right to experiment in your work. Rather than always going for a conservative option.

On the other hand you never want to stop searching for inspiration in the work of others and in society, the built environment and nature in general.

As you could see with the first assessment – taking close-up photos can lead to unexpected results. Objects never look the same on screen as they do on the floor or in real life.

Close-up at Fed Square, Federico Viola 2013
Close-up at Fed Square, Federico Viola 2013, Found at p.ic

Some inspirations you will simply find in the artwork and design work of current practitioners and past masters. For current designers you want to look at sites and magazines such as Computer Arts and Computer Arts Projects, Mashable,  Design Envy and Dzineblog are just a few inspiring resources.

This week’s Visual Design Component Class covered links and some descriptions of some styles and movements that I relate to very much:

  • Swiss International Style
  • Constructivism (often called Russian Constructivism)
  • Vietnames Propaganda Poster
  • Photomontage

I highly recommend reading up on each and particularly looking at examples of the works. It is good to find out what stylistic choices each movement made and what ideas were big in their days.

Swiss International Style - Joseph Müller-Brockmann - Beethoven - found at www.designhistory.com
Swiss International Style – Joseph Müller-Brockmann – Beethoven Concert Poster – found at http://www.designhistory.com
Contemporary design in style of Construcitvism by Teo Brito found at LauraGreen92 - click image for more information and link to her blog
Contemporary design in style of Constructivism by Teo Brito found at LauraGreen92 – click image for more information and link to her WordPress blog

It is fine to be inspired by other artist’s and designer’s work. Actually, you should look for greatness in other works and reference their works. This is done by paying a tribute to the original artist in form of a homage.

Experimental Photomontage by Robert Heinecken
Experimental Photomontage by Robert Heinecken

Web Design – Photoshop Workshop

In-class workshop. We will continue to apply the grid system to a website design. This time we will apply the grid to a gallery. The design will depend on your choices of layout and number of thumbnails that you want to feature.

Screenshot - applying 960 Grid 12 Col layout from 960 Grid System
Screenshot – In-class Tutorial: Applying 960 Grid 12 Col layout from 960 Grid System
  1. Access the 960 Grid System site: http://960.gs/ and download their 960 Grid System Templates by pressing the ‘Big ol’ Download Button’. This will start the download of a comprehensive folder by Nathan Smith with 960 Grid System templates and plug-ins for Photoshop, DreamWeaver and many other programs.
  2. In template>Photoshop open the 960_grid_12_col template
  3. Save the file under a new name and in your class folder.
  4. Make sure the guides are visible (Command+; or Ctrl+;)
  5. Add horizontal guides (View>New Guide) at 245px, 255px, 265px, 500px, 510px, 520px, 755px, 765px, 775px and 1010px. Lock your guides (View>Lock Guides or Alt+Ctrl+;) These guides will make it easier to arrange your content and to allow for 10px margins.

    Setting the grid up.
    Setting the grid up.
  6. Use the M (Rectangular Marquee) Tool to create spaces for a banner, text content, image content and a menu. Fill the spaces with colour (Shift+F5). Place each on individual layers. Name the layers (banner, text content, etc)
  7. Place images (File>Place). Make sure that they are located on top of the layers with the colourboxes.
  8. Create Clipping Masks: make sure the banner image sits on top of the banner layer (with the colour space). Have only the layer with the image selected and right click on the active layer (beside the name of the layer) and click on Create Clipping Mask. Your image should take on the dimensions of the layer  below. – Alternatively you could use the short cut Ctrl+Alt+G (Cmd+Alt+G).

    Concept for Gallery Screnshot
    Concept for Gallery Screenshot

The 960_grid_12_col template is based on 12 columns. You can then place your text and images over 1, 2, 3 or more columns. The grid system allows you to organise your website in a visually pleasing way.