Multimedia Production – Class 7

Link to all Classes     Class 2     Class 3     Class 4     Class 5     Class 6     Class 7    

Today’s Class

  • Discuss Assessment 2
  • Inspirations for Tables of Content
  • Feedback

Assessment 2

You can work on Assessment 2 in class and I will help with questions:

Assessment 2 Multimedia Production

Below is an example of the Multimedia Production Cycle:

Multimedia Production Cycle - This image is under the Creative Common Agreement, you can use it but will need to reference this site: www.classoffederico.wordpress.com

Multimedia Production Cycle – This image is under the Creative Common Agreement, you can use it but will need to reference this site: www.classoffederico.wordpress.com

Inspirations for Tables of Content

Below are some ideas for a table of content. You can always go for a traditional table of content or do something more exciting.

Make sure that the information is easy to find. A good design is one that is easy to understand. This should not stop you from making it fun though.

Some of the images can be found at this good compilation of table of content designs: Smashing Magazine – Table of Content: Creative Examples.

Colourful Table of Content - Ribbons in Primary Colours - found at: LifeBlue.com

Colourful Table of Content – Ribbons in Primary Colours – found at: LifeBlue.com

Text and Shapes - This design lends itself to an interactive use - found at: Klafferty.com

Text and Shapes – This design lends itself to an interactive use – found at: Klafferty.com

Text-based Table of Content - Very Graphic and Black and White- found at: Smashing Magazine (click image for inspiring article on table of content design)

Text-based Table of Content – Very Graphic and Black and White- found at: Smashing Magazine (click image for inspiring article on table of content design)

Text and Shapes - This design lends itself to an interactive use - found at: Smashing Magazine (click image for inspiring article on table of content design)

Text and Shapes – This design lends itself to an interactive use – found at: Smashing Magazine (click image for inspiring article on table of content design)

Table of Content from Textbook - This design lends itself to an interactive use - found at: Smashing Magazine (click image for inspiring article on table of content design)

Table of Content from an old Textbook – This design lends itself to an interactive use, the bird silhouettes could get highlighted when touched – found at: Smashing Magazine (click image for inspiring article on table of content design)

Fruity Design - This is great for a menu, very appetizing thumbnails - found at: WeddingPhotography.com

Fruity Design – This is great for a menu, very appetizing thumbnails – found at: WeddingPhotography.com.ph

Colours, Numbers and Boxes - very happy and alive, personally I do not like the distortion of the word content - found at: Flickr

Colours, Numbers and Boxes – very happy and alive, personally I do not like the distortion of the word content – found at: Flickr

Typographic with Colours and Photos - The use of large numbers is effective and the low opacity of the boxes works, personally, I find it looks a bit dated- found at: JuxtaPost.com

Typographic with Colours and Photos – The use of large numbers is effective and the low opacity of the boxes works, personally, I find it looks a bit dated- found at: JuxtaPost.com

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!

HTML Class – Week 08

Link to all Classes     Week 3     Week 4      Week 5     Week 6     Week 7     Week 8

Today’s Class

  • Assessment Task
  • Inclass Demonstration
  • Feedback

Assessment Task

Use the W3Schools TryIt Editor and Notepad to create the home page for a website of your choice with HTML and CSS.

Content: include a

  • banner with an image and title,
  • menu with 5 menu items. The menu items need to be links. Link them to a file with the name of the menu item (it will be an incomplete link).
  • 2 sections (divs) with text content
  • 1 section with an image
  • footer with a Copyright statement including this year and your name.

The images can be sourced online. Please aim for Creative Commons images. You may use www.morguefile.com or other websites for this purpose.

Work on the assessment in class and during the week and have ready to be handed in as html file. The CSS component can be either internal or as an external CSS document.

Inclass Demonstration

We will work through the steps to create a website in HTML and CSS:

Start off with the HTML script:

We start with the DOCTYPE declaration and the HTML tags followed by the Head and Body tags:

<!DOCTYPE html>

<html>

</html>

_____

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

Note: Add the closing tag straight away to make sure that you do not forget it!

Add your title in the Head as well as your main meta data:

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>  (Add your own title here)

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”” />  (Either write your description straight away or do it later. This description will show in a Google search and it is important to write something that will be relevant to the webside/ web page. Keep it short, but make sure not to skip over important information that would get a user to visit your site!)

<meta name=”author” content=”Federico Viola” />(put your name in here!)

</head>

<body>

</body>

</html>

Now create your divs in html

It is important to sketch out your site beforehand. Write down all the dimensions for the various elements. Overall dimensions, example: width 960px x height 690px, dimensions of the banner/header, dimensions and format of the menu, dimensions of various content boxes.

Divs are basically spaces that you reserve. They are like 2D boxes that allow you to place content, either images, text, video or audio. You can give the background a colour and you can create outlines.

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”This page has Italian recipies for beginners and more advanced chefs. Each recipy has cooking instructions, preparation time and a calorie index.” />

<meta name=”author” content=”Federico Viola” />

</head>

<body>

<div id=”wrapper”>  (This will be the div for the overall webpage. It will be like a frame for all the elements.)

<div id=”header”>

<h1>This is the header/banner</h1>

</div>  (This closes the header div.)

<div id=”container”>  (This will be the div for the menu and content divs)

<div id=”menu”>

<p>Menu</p>

</div>  (This closes the menu div.)

<div id=”content1″>

<p>Content1</p>

</div>  (This closes the content1 div.)

<div id=”content2″>

<p>Content2</p>

</div>  (This closes the content2 div.)

<div id=”content3″>

<p>Content3</p>

</div>  (This closes the content3 div.)

</div>  (This closes the container div.)

<div id=”footer”>

<p>Copyright Statement</p>

</div>  (This closes the footer div.)

</body>

</html>

Now create your CSS

You can create external CSS, in which case you will have to save the CSS file as name.css. This will allow you to change your CSS individually and it is a faster way to update websites. This is particualrly important if you use your standard CSS on  various sites. CSS is not only responsible for colours and style, but is important for standard font and layout sizes. You will need to adjust sizes for your layouts and fonts to suit mobile platforms. (You do not need to do this for the assessment though!)

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”This page has Italian recipies for beginners and more advanced chefs. Each recipy has cooking instructions, preparation time and a calorie index.” />

<meta name=”author” content=”Federico Viola” />

<style> (opens an internal CSS style tag)

#wrapper {;}

#header{;}

#container{;}

#menu{;}

#content1{;}

#content2{;}

#content3{;}

#footer{;}

ul{list-style-type:none;}  (this is the ul tag to be used for the menu later in the body, it defines to have no bullet points)

</style>  (always make sure to close html tags)

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

<h1>This is the header/banner</h1>

</div>

<div id=”container”>

<div id=”menu”>

<p>Menu</p>

</div>

<div id=”content1″>

<p>Content1</p>

</div>

<div id=”content2″>

<p>Content2</p>

</div>

<div id=”content3″>

<p>Content3</p>

</div>

</div>

<div id=”footer”>

<p>Copyright Statement</p>

</div>

</body>

</html>

Add your dimensions to the CSS

You can create external CSS, in which case you will have to save the CSS file as name.css. This will allow you to change your CSS individually and it is a faster way to update websites. This is particualrly important if you use your standard CSS on  various sites. CSS is not only responsible for colours and style, but is important for standard font and layout sizes. You will need to adjust sizes for your layouts and fonts to suit mobile platforms. (You do not need to do this for the assessment though!)

<!DOCTYPE html>

<html>

<head>

<title>Italian Food For Beginners</title>

<meta name=”keywords” content=”italian, cooking, food, recipy, easy, beginners, step by step” />

<meta name=”description” content=”This page has Italian recipies for beginners and more advanced chefs. Each recipy has cooking instructions, preparation time and a calorie index.” />

<meta name=”author” content=”Federico Viola” />

<style> (opens an internal CSS style tag)

#wrapper {width:960px;height:690px;margin:0px;}  (the site will go to the edge due to having no margin)

#header{width:960px;height:140px;margin: 10px 0px;background:#3375FF;} (the header will have 10px margins on top and bottom and no margins on the right and left, the background colour has been specified)

#container{width:960px;height:410px;}  (always make sure to use a semi-colon at the end of a CSS declaration)

#menu{width:100px;height:410px;margin-right:10px;background:#3399FF;

#content1{width:410px;height:200px;margin-right:10px;padding:5px;background:#4CCCFF;}

#content2{width:410px;height:200px;margin-right:10px;padding:5px;background:#3375FF;}

#content3{width:410px;height:410px;padding:5px;background:#0099FF;}

#footer{width:960px; height:140px;}

ul{list-style-type:none;}

</style>  (always make sure to close html tags)

</head>

<body>

<div id=”wrapper”>

<div id=”header”>

<h1>This is the header/banner</h1>

</div>

<div id=”container”>

<div id=”menu”>

<p>Menu</p>

</div>

<div id=”content1″>

<p>Content1</p>

</div>

<div id=”content2″>

<p>Content2</p>

</div>

<div id=”content3″>

<p>Content3</p>

</div>

</div>

<div id=”footer”>

<p>Copyright Statement</p>

</div>

</body>

</html>

To be continued

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!

C2 – SEO – Week 08

Link to all Weeks     Week 3     Week 4      Week 5     Week 6     Week 7     Week 8

Today’s Class

  • Photoshop Work
  • Assessment 2 – Next term

Photoshop Work

We will use this class to inprove your Photoshop skills and you will be able to work on your website designs for class C1.

Assessment 2: Next Term

Assessment 2 will be conducted next term when you will have a better understanding of how to upload web content.

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!

Multimedia Production – Class 6

Link to all Classes     Class 2     Class 3    Class 4      Class 5     Class 6       Class 7

Today’s Class

  • Work on Assessment 1
  • Compare the Completed Experience Planner
  • Inspirations for Layout
  • InDesign Workshop
  • Assessment 2
  • Feedback
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

Work on Assessment 1

You will work on Assessment 1 in class for the first 2 hours. You should be close to completion and hopefully be able to complete Assessment 1 by the end of class.

Compare the Completed Experience Planner

Use the attached experience planner, that we completed in class based on the CentreLink experience: Experience Planner- filled in partly after class 04.

Use it to help you create an experience planner for the event PDF that you are creating. This will give you the ability to focus on fixing negative experiences and planning for a positive experience with a product or service.

Inspirations for Layouts

Inspirations for layouts can be found at various places:

  • Creative Hotlist this site has a large selection of solid design ideas. You will find many design concepts that are inspiring to look at and are complete as a work.
  • Born Book is a beautiful and inspiring interactive PDF document.
  • Issuu is a site that allows you to publish your work and you can find a large number of publications there.
  • Lonny is the website of the Lonny Magazine, a online home decor magazine that highlights inspiring interiors, innovative designers, and the latest things to buy for interiors. Their online interactive magazines are good examples of interactive PDFs and layouts.

More example of interactive PDFs (posted last week): Adobe Magazine, Font Magazine, Know-It-All Guidebook to King West, Vektoria Magazine, Blanket Magazine Revolution Art Magazine, Revolution Art Issue 40,

Swiss travel poster from 1934 by Herbert Matter - Source: http://swisstype.wordpress.com/work/

Swiss travel poster from 1934 by Herbert Matter – Source: http://swisstype.wordpress.com/work/

Look at art styles and movements for layout ideas:

'For Great Road Trips: Switzerland' Poster by Herbert Matter in (Swiss) International Style -  Source: http://swisstype.wordpress.com/work/

‘For Great Road Trips: Switzerland’ Poster by Herbert Matter in (Swiss) International Style – Source: http://swisstype.wordpress.com/work/

InDesign Workshop

This InDesign workshop will look at the creation of interactive buttons.

The workshop will be held in class.

Check for updates!

Assessment 2

To be handed out. Check for updates within the next hours.

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 + PDF Class 7 – Assessment Task

Link to all Classes     Class 1     Class 2     Class 3    Class 4     Class 5     Class 6     Class 7

Photo by Seemann on morgueFile.com

Photo by Seemann on morgueFile.com

Today we will look at:

  • Create a PDF form (upload the example on MyKangan)
  • Assessment – Portfolio of in-class work

PDF Form

Upload the file below and create form fields using Adobe Acrobat Pro. Make all blue text fields, the name and date active.

Next fill all the data in and save and upload the file to MyKangan.

Due Date: 20/9

Sample Task

Assessment – Portfolio

STEP 1: In Photoshop or Illustrator create a PDF portfolio page like the sample. Dim: 1024 px x 1645px x 150 ppi (resolution). (These dimensions are more a guideline and you can vary it if you have a different idea for your layout)

Include:

  • 6 images from previous classes and your own work
  • add descriptions of the images: what tools and techniques did you use?
  • place a banner of your own work on top
  • a title (Portfolio of Work)
  • your name
  • save the file as a Photoshop PDF or Illustrator PDF

STEP 2: Create text fields in Adobe Acrobat Pro and add descriptions to your work. The descriptions need to state what tools and functions you used.

STEP 3: Save the final PDF and upload to MyKangan.

See example of Portfolio:

Photoshop Portfolio

Photo by matthewbridges on morgueFile.com

Photo by matthewbridges on morgueFile.com

Photoshop + PDF Class 6

Link to all Classes     Class 1     Class 2     Class 3    Class 4     Class 5     Class 6     Class 7

Photo by hotblack on morgueFile.com

Photo by hotblack on morgueFile.com

Today we will look at:

  • Crop Tool
  • Image Adjustments:
    • Brightness/Contrast
    • Levels (Ctrl+L)
    • Curves (Ctrl+M)
    • Auto Tone (Shift+Ctrl+L)
    • Auto Contrast (Alt+Shift+Ctrl+L)
    • Auto Color (Shift+Ctrl+B
    • Vibrance
    • Hue/Saturation (Ctrl+U)
    • Photo Filter
    • Shadows/Highlights
  • Adjustment Layers
  • Tasks

Crop Tool

Follow the in-class instructions on how to use the Crop Tool or follow the tutorial below the image.

The crop tool works on two basic levels:

  • free-hand – simply select the crop tool (Shortcut C) [Visit Shortcutworld for more Photoshop Shortcutsand drag a window over your image. You can adjust the size of the crop selection by dragging the edges and corners. You can even rotate your crop selection (with CS4 or higher).
    Hit Enter to complete the crop action and accept the new size.
  • key in dimensions – after activating the crop tool enter the width: 500 (in px for web), the height: 600 (in px) and the resolution: 150 (72 is suitable for web)- the values need to be entered in the options bar (also called properties bar). See image below as an example. Next drag the crop window and press enter to except the change.
    Note that the window is restricted in its scale.
See the dimensions of the Crop Tool: 450px x 400px with 72ppi resolution.

See the dimensions of the Crop Tool: 450px x 400px with 72ppi resolution.

Cropping and Straightening Images in Photoshop Essentials

Cropping Tool in Photoshop Essentials

Brightness/Contrast

Follow the in-class demonstration. A nice and basic function, it allows you to change the brightness and correct the contrast. Move the slider to change the values.

Image>Adjustments>Brightness/Contrast

Tick and untick the Preview box to observe the changes before accepting it.

Use the sliders. It is self explanatory.

Use the sliders. It is self explanatory.

Levels

With the Levels function you can adjust problems with tone (eg a photo that is very grey and does not show enough dark and light aspects) or colour related problems (eg too much blue).

The Short Cut: Ctrl+L (Cmd+L) or use: Image>Adjustments>Levels

Overview: follow my in-class introduction to how to use the Levels in simple steps. Use the attached photo by Matthew Bridges of the old house at a lake.

Image>Adjustments>Level

Image>Adjustments>Level

The easiest and most basic way to apply the Levels function is by moving the sliders for the highlight (white) and shadows (black) below the graph of the input levels inwards. Moving the highlight will brighten the image up and moving the shadow will darken the shadows.

This is a good basic function to start of with and it is useful for the majority of your photos, may they be basic shots or more sophisticated and at higher resolution.

Follow this tutorial to learn how to use the Level Adjustment more detailed and how to create an Adjustment Layer:

Fix Tone and Color with Levels in Photoshop – Photoshop Essentials

Improving Image Tone With Levels In Photoshop – Photoshop Essentials

Curves

Follow the in-class demonstration (shortcut: Ctrl+M or: Image>Adjustments>Curves). The Curves function is similar to the Level function, but the graph is a lot more visual and intuitive. You can manipulate it with your mouse.  See image:

Try the presets and see how it affects your image, and then manipulate the curve yourself.

Try the presets and see how it affects your image, and then manipulate the curve yourself.

Curves Tutorial on Photoshop Essentials

Auto Tone

The short cut is Shift+Ctrl+L (or: Image>Auto Tone). Follow the in-class demonstration. The Auto Tone function readjusts tonal settings in your image and in most cases this results in a crisper image with the click of a button. The Auto Tone option looks for the darkest and lightest points in an image and resets them to pure white and black, resulting in clearer tones.

Because  Auto Tone adjusts each color channel individually, it may remove color or introduce color casts.

Auto Contrast

Follow the in-class demonstration.

The short cut is Alt+Shift+Ctrl+L  (or: Image>Auto Contrast). Auto Contrast adjusts image contrast automatically, at the click of a button. Unlike Auto Tone it will not affect colours. It clips the shadow and highlight values in an image and then maps the remaining lightest and darkest pixels in the image to pure white and pure black . As a result the image will have lighter highlights anf darker shadows and a crisper contrast.

Auto Color

Follow the in-class demonstration.

The short cut is Shift+Ctrl+B  (or: Image>Auto Color)

Auto Color adjusts the contrast and color of an image. It is able to search images for shadows, midtones, and highlights. It then neutralizes the midtones using a target color of RGB 128 grey and clips the shadow and highlight pixels by 0.5%. Personally, and from experience it effects images less and Auto Contrast and Auto Tone bring more convincing changes in image quality.

Vibrance

Follow the in-class demonstration. Click: Image>Adjustments>Vibrance

As the name suggests this function will help you making a photo look more vibrant. Colours can be shown more intensely with higher saturation. It is easy to grasp this function, simply move the sliders to the right to increase vibrance or move them to the left to decrease vibrance.

Based on a photo by delboysafa from morgueFile.com

Based on a photo by delboysafa from morgueFile.com

Hue/Saturation

Follow the in-class demonstration.  (Ctrl+U or Image>Adjustments>Hue/Saturation)

Using Hue/Saturation Adjustment Layer with a mask showing the original (yellow) below.

Using Hue/Saturation Adjustment Layer with a mask showing the original (yellow) below.

Photo Filter

Photo Filter

Photo Filter

Follow the in-class demonstration. Press: Image>Adjustments>Photo Filter.

One of the best image adjustment options, you can select from a set of preset filters: use a warming filter to create a lighting sense that you would encounter indoors, in autumn (fall) or during a sunset when there are more yellow, orange and red colours around. Use a cool filter to create a typical outdoor setting or a winter atmosphere. You can tick the Color box and select your own colour or select a colour from the image itself (simply click on the part of the image).

You can also change the amount of density, more density results in a stronger impact of your filter. Find a level that you like – try to be more conservative and chose a little less density than you like for a print).

Shadows/Highlights

Follow the in-class demonstration. Click: Image>Adjustments>Shadows/Highlights.

With the shadows and highlights you can easily lighten up an underexposed, dark image. Use the functions sparsely to not overdo the changes, which can easily create an unrealistic look. The image shows the changes on a dark photo.

Based on photo by o0o0xmods0o0o from morgueFile.com

Based on photo by o0o0xmods0o0o from morgueFile.com

Use an Adjustment Layer

All the image adjustments that we have looked at above can be done directly to an image or in from of an adjustment layer. It is far better to create an adjustment layer, this allows you to create changes in form of a layer. You can always delete or hide the layer and your original image remains unaffected.

How do you create an adjustment layer?

With your original layer selected click on the Create a new fill or adjustment layer button and select what type of adjustment layer you want to create. Next do all the adjustments to it.

Alternatively you just click on the Adjustments tab and select the Adjustment Layer that you want to create.

(See image)

Create an Adjustment Layer

Create an Adjustment Layer

Task in Class

Perform these two tasks to show that you understood today’s class ( If you have missed this class you need to do this!!!)

  1. Use the image by Matthew Bridges (or select an alternative image). Use the crop tool and resize to 500px x 600px at 150ppi (resolution). Apply 6 different image adjustment layers and mask them off in strips (see examples of student work). Add titles to your strips.  E-mail the file to me as a PNG (not PSD) and keep a copy for yourself.
  2. In your second task I would like you to use Matthew Bridges’ image only. The photo is very grey and it looks foggy. I would like you to improve the image using any of the image adjustment functions that you have learnt about. When you are happy with the improved image e-mail me a PNG version of it (no need to crop the image).
    Create a before and after version of the image.

Student Submissions:

Work by Benan Ü

Work by Benan Ü

Work by Michael T

Work by Michael T

Work by Tristan S

Work by Tristan S

Work by Vlad K

Work by Vlad K

Work by Jo W

Work by Jo W

Work by Justin A

Work by Justin A

C2 – SEO – Week 07

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

Today’s Class

Assessment 1 – Work

Assessment 1

You will have time to work on assessment 1 in class. I will be available to offer assistance and answer questions.

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!

Multimedia Production – Class 5

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

Today’s Class

  • Assessment 1
  • Discuss Assessment 1
  • Feedback

Assessment 1

Assessment 1 is a planning assessment. Your focus will be on creating an interactive PDF for an event of your choice. Assessment 2 will then focus on the creation of the interactive PDF. We will go through the steps of creating the interactive PDF in the next 2 weeks.

Assessment 1 MM Production The Event

Below is an example of the Experience Planner completed in class: Experience Planner- filled in partly after class 04.

Discuss Assessment 1

Assessment 1 requires of you to plan an interactive PDF for an event of your choice. Assessment 1 will not require for you to create this interactive PDF, you will just plan for it.

Example of interactive PDFs: Adobe Magazine, Font Magazine, Know-It-All Guidebook to King West, Vektoria Magazine, Blanket Magazine Revolution Art Magazine, Revolution Art Issue 40,

Ideas for Events, Style and Feel

Look at the text for class 5 for ideas for events: Multimedia Production – Class 4

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 + PDF Class 5

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

Today we will look at:

  • Custom Shape Tool
  • Layer Blending Options
  • Today’s Task

Custom Shape Tool

The Custom Shape Tool allows you to draw custom shapes. These are actually vector graphics, which is uncommon in Photoshop.

Custom Shapes and Custom Shape Icon

Custom Shapes and Custom Shape Icon

The Custom Shape Tool can be activated with the U shortcut and by scrolling through the shape tool options using Shift+U until the custom shape tool appears. Load all custom shapes in the options (in CS6 click on the cog or in earlier versions click on the arrow). Use any of the shapes that you like. I opted for the dog and the cat with a rounded rectangle in the background.

Draw shapes by dragging the cursor. Hold shift to keep the proportion.

Layer Blending Options

Double click around the name of the layer.

Double click around the name of the layer.

Activate the Layer Blending Options by double clicking next to the name of a layer (in the Layer Palette) in the high-lighted area (not the thumbnail). In class I will give an introduction to the various options. I want you to focus on the Stroke option. Click on the word (not just the tickbox) and change the colour of the outline.

Vary your line thickness on the different shapes.

Next click on the words Blending Options: Custom and reduce the Fill Opacity to 0%

Next click on the words Blending Options: Custom and reduce the Fill Opacity to 0%

Next click on the words Blending Options: Custom and reduce the Fill Opacity to 0% and vary the Fill Opacity with the different shapes.

Today’s Task

Create an image with shapes that have outlines and no or low Fill Opacity.

Suggested dimensions:

Web Preset, 800px(width) x 600px (height) 72ppi (resolution). Save your work for on-screen viewing, as JPEG or PNG.custom shapes 02

C2 – SEO – Week 06

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

Today’s Class

Assessment 1 – Introduction

Assessment 1

The task will be posted here shortly: C2 – Assessment 1

Assessment 1 will cover these questions:

Instructions:

Develop a detailed SEO recommendation for AntiArt, a Melbourne-based website that retails illustrations, screen prints, lithographs and other Art prints by international, non-established and non-commercial artists and illustrators. The website will have sections based on the different print formats and sections based on the cultural origins of the artists (European, Australian, Aboriginal, Chinese, Indian, Latin American).

Clients need to be able to place orders for specific, unique and numbered art pieces.

The website will be available in English only.

The prints will be stored in Hong Kong and shipped from there. The website will promote Melbourne as the home base.

Please use the Google Search Engine Optimization Starter Guide as a reference.

Create a unique, accurate page title for the home page!Describe your choice and why it is suitable for   SEO.
Create a unique, accurate page title for the page on which clients can purchase screen prints!Describe your choice and why it is suitable for   SEO.
Create a unique, accurate page title for the page on which clients can purchase art   by European artists!Describe your choice and why it is suitable for   SEO.
How can you write description meta data for a web   page?Create an example in code.
Create a description for each of the 3 pages   above:

  •   Home Page
  •   Page for purchasing Screen Prints
  •   Page for purchasing art by European artists
Give an example of a good URL for the page for   purchasing screen prints!
List a set of keywords you would use for the home   page!
Describe how you can write better anchor text for   links used on the site!  (p16)
Give 3 examples for good anchor text for links   to:

  •   Screen Prints
  •   Art by European Artists
  •   Art by Aboriginal Artists
How can you use heading tags appropriately?Give an example what type of heading to use for   your most important text (eg. Screen Prints) (p20)
How can you use robots.txt effectively? (p21)
How can you guide mobile users accurately? (p26)

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!