C1 – Design Simple Webpage Layouts – Week 08

Banner_Cert IV WebBTech-designSimpleWebsite

Link to all Weeks     Week 3     Week 4      Week 5     Week 6      Week 7    Link to this Unit on MyKangan

Today’s Class

  • Assessment – Website
    • Step 4 – Create the Website
  • Dreamweaver
  • Feedback

Assessment Website

Step 4 – Create the Website

Create the website in Dreamweaver (or any other Code editor) using HTML, CSS and if necessary JavaScript or JQuery.

  • Your website needs to have a well-designed layout.
  • 4 Web Pages:
    1. Home Page
    2. About us and Contact
    3. Gallery or Portfolio of Work
    4. Bookings or Purchase Requests

Dreamweaver

We will continue using divs (Read up on Divs on W3School) and complete a website in class.

Attend class to learn about how to set up your website in Dreamweaver. You will learn how to create divs, place images, create an interactive menu and more.

How to create an interactive menu:

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!

C1 – Design Simple Webpage Layouts – Week 07

Banner_Cert IV WebBTech-designSimpleWebsite

Link to all Weeks     Week 1     Week 2     Week 3     Week 4      Week 5     Week 6      Link to this Unit on MyKangan

Today’s Class

  • Assessment – Website
    • Four Web Pages
    • Step 1 Brainstorm Ideas
    • Step 2 Research Content
    • Step 3 Storyboard
    • Step 4 – Create the Website
  • Design and Layout
    • Guide to Good Web Design
  • Dreamweaver
  • Feedback

Assessment Website

Today we will commence on your assessment for this class. You will need to design a website for a client to promote his work or services. See examples below as a result of an in-class brain storm:

  • Portfolio of a designer, web-designer, graphic designer, fashion designer, …
  • Portfolio of an artist or illustrator
  • Portfolio of a photographer
  • Website for a horse trainer
  • Website for a singer
  • Website for a humanitarian organisation, eg Doctors Without Borders
  • Website for a restaurant

Four Web Pages

You will need to create 4 web pages using Dreamweaver or a WYSIWYG (What you see is what you get) code editor. These are the pages for you to create:

  1. Home Page
  2. About us and Contact
  3. Gallery or Portfolio of Work
  4. Bookings or Purchase Requests

Step 1 – Brainstorm Ideas

Brainstorm ideas for a website (if portfolio for a photographer, what type of photographer, wedding, portrait, famous photographer, …)

Step 2 – Research Content

Go online and research what content you can find for your website. Use Creative Commons sites whenever possible:

Otherwise use Google and add Creative Commons to your search criteria.

Step 3 – Storyboard

Create a storyboard for the website. Before you can create the storyboard you will need to organise all the different elements. Please refer to the Storyboard Workshop from Tuesday:

Storyboarding for Web Designers

Webdesigners benefit from storyboarding. It helps organising content and ensures that every element is included in a logical place according to topic and site.

Read the post on Storyboarding Your Website (Source: nmasse.com).

Storyboard Template

You can use the template below (a modified version of one found on Google Docs Public Templates) :

Storyboard Template

Step 4 – Create the Website

Create the website in Dreamweaver (or any other Code editor) using HTML, CSS and if necessary JavaScript or JQuery.

Your website needs to have a well-designed layout

Attend class to learn about how to set up your website in Dreamweaver. You will learn how to create divs, place images, create an interactive menu and more.

Design and Layout

Here are some important standards to consider for a convincing, well-communicated web page:

  • Clarity is vital (Link to post on IWantClarity.com)
  • Less items on page – make sure to use white space excessively
  • Design should guide the user to information

Please view the PowerPoint show by Sara Ryan on Vic Costello’s ‘Multimedia Foundations –
Core Concepts for Digital Design’: Multimedia Foundations

White Space in Web Design - Courtesy of: unmatchedstyle.com

White Space in Web Design – Courtesy of: unmatchedstyle.com

White Space in Web Design - Courtesy of: OXP - onextrapixel.com

White Space in Web Design – Courtesy of: OXP – onextrapixel.com

Guide to Good Web Design

  • Use Design to guide user’s eye to the information.
  • Keep the layout simple and uncluttered.
  • Use consistent navigation bar throughout the site.
  • Organize text material in clearly defined groups.
  • Be consistent, clear and concise.
  • Stick to standards used on web (Accessibility)
  • Do not include essential information on roll-over images.
  • Include a contact option for the user, this could be:
    • A Help Desk Number to a live person.
    • A context sensitive ‘HELP’ button.
    • An e-mail ‘Ask a Photographer’ or ‘Ask an Accountant’ or ‘Ask an Expert’  option.

Dreamweaver

Today you will learn how to create divs and add colour to them.

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!

Photoshop Class 4

Link to Class 5     Link to  Class 3     Link to Class 2     Link to Class 1

Today we will look at a lolly bag that Photoshop comes with: (tataaaaaaaaaaa) the Layer Blending Modes! Exciting, I know…

I hope to see Benan, Lucine, Michael, Vlad, Adam and all the other happy faces in front of me for class. What? I did not forget about (what’s his name) Rabeeh…

This is what we will cover today:

  • Creative Commons
  • Examples of CC: Photo Pin, FlickR, Google
  • Layer Blending Modes
  • Layer Masks
  • Gradient Tool and Layer Mask
  • Today’s Task

We will focus the majority of today’s time on you practicing Photoshop. After the completion of your tasks I will expect you to stay and practice more. Class time is the time when I will be able to assist and the time for you to experiment with the software.

So, today we will have fun and afterwards will have some more fun until the imaginary bell rings to announce the end of class.

Creative Commons

Creative Commons or the Creative Commons License relates to a way to distribute content, such as photos and other images for free.

Source: Flickr - photographer: Frans Schouwenburg

Source: Flickr – photographer: Frans Schouwenburg

Creative Commons are generally used for non-commercial and educational purpose. If someone makes a profit with a product they should pay for the image they use.

Generally, the author, creator or owner of the content needs to be mentioned. So, in short, when using images from Creative Commons sources ensure that you mention the source of your image.

This can be done in various ways. One would be to place a tag underneath the image with the source as you see it done in this blog.

This photo was used in last week’s Photoshop Class 3.

CConFlickR

Creative Commons on FlickR

There are different forms of Creative Commons and it pays to read the details beforehand. To the right is another example from FlickR:

Examples of Creative Commons Resources

Les us have a look at FlickR, Photo Pin and let us do a Google search on Creative Commons.

FlickR  – Photo Pin  –  Google Search

Your task find a photo to suit the themes Urban environment and blue skies with each search and download the image. Include the meta data of the photographer and source of website with the photo.

Try this link for more Creative Commons information.

Layer Blending Mode

First start a new Photoshop document. Place one of your new photos into it. Place your second photo as well.

The Layer Blending Mode can be accessed through the Layers panel. A small button (Mac) or Text box (Win) with the word Normal indicate the Layer Blending Mode box.

Look at your layer blending mode with the top layer active. Try the layer blending modes below and see how amazingly easy Photoshop lets you change the appearance by creating a blend between two images.

Now click on this link and access the tutorial on Layers TV Episode 105 about how to use the Layer Blending Mode.

Layer Mask

If you completely watched the tutorial in the link above, you will already know how to create a layer mask and can proceed to the task for today.

Last week we looked at clipping masks and today we look at a layer mask. The process is very similar. Make a selection on your active layer and click on the Layer Mask button (add a layer mask) beneath the Layers panel. Your selection is still visible and the rest has disappeared.

You can also create a layer mask from a selection by going to the main menu: Layer>Layer Mask>Reveal Selection. (see image)

Layer_Mask

Alternatively (press Ctrl+Z or Cmd+Z) you can hide what you have selected: if you use the Layer Mask button press Alt at the same time to hide your selection with the Mask. You can do the same from the main menu: Layer>Layer Mask>Hide Selection.

While the layer mask is selected you will be in the mask mode. You can use the brush to add or take away from your layer mask. If you use the brush (while in mask mode) you can  make parts disappear by drawing with black as foreground colour. You can equally make things reappear by drawing with white as foreground colour.

Using Gradient Tool with Layer Mask

A good tool to use is the gradient tool with the layer mask. You can create a gradient mask that way, which means the image will gradually become invisible. See image below.

French Ancient City Banner

French Ancient City Banner – Source: Image Base – Free Stock Photography Click the image as a link.

You can see the gradient used on the right part of the image. This is how you do it:

  1. Create a new document (use dimensions below)
  2. Place an image and change size as you see fit (press Enter)
  3. Create a layer mask (click the layer mask button)
  4. Activate the gradient and drag from one part to another within the imageIf white is your foreground colour the image will become invisible in the direction of your dragging.
    If black was your foreground colour the image will be invisible on your first point and become visible in your dragging direction.

For a more detailed tutorial on how to use the Layer Mask in Photoshop go to: PhotoshopEssentials.com

Today’s Task

Create a banner for a website using two images that blend into each other (use Layer Blending Modes and Layer masks).

The images must suit the themes:

  • Urban environment
  • Blue Skies

Dimensions of banner: 980px(width) x 174px (height) 72ppi (resolution)

Task_New Document

Add a title to the banner, that preferably also blends with the background images. Save the file as a PNG file. Keep a copy of this file and the 2 images that you have used. Upload your work onto MyKangan.

Examples of Student Submissions:

Layer Blending  Masks Banner

Banner by Vlad K

Banner by Yong Wu

Banner by Yong W

Banner by Mike T

Banner by Mike T

Banner by Fatma Y

Banner by Fatma Y