Please look at this W3Schools example: Basic website created with div elements and change it to create a simple text based website for yourself. Call it something like ‘My first website’, supply a menu with menu items (about me, portfolio, etc) and change dimensions and colours. Add more divs to the HTML.
Save your final work with Notepad as a HTML file and bring to next class!
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!
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!
Just to clarify, the idea with this experience planner is to have a more detailed look at the actual experience of a customer or user. This will give you the ability to focus on fixing negative experiences and planning for a positive experience with a product or service.
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.
Interactive PDFs and apps are good ways to promote events. We will focus on the creation of an interactive PDF in this class. Events can be promoted with style in this format. It allows for the promotion of the event and sponsors. Links to websites, addresses, phone numbers, embedded videos, there are a lot of options to include hypermedia elements in a PDF.
Film Festivals (MIFF, French Film Festival, German Film Festival, Italian Film Festival, …)
Food Festivals (Melbourne Food and Wine Festival, Festivale, Tasting Australia, Great Barrier Feast, …)
Music Festivals (Stereosonic, Summadayze, Big Day Out, Soundwave, …)
Sport Events (Skateboard Event, Football World Cup 2014 in Brazil, Olympics, Melbourne Cup, …)
Health Events
Holiday Resorts (for tourists)
Fashion Week
Cultural Festival (Phil Fest)
Ideas for the Style, Look and Feel
To set yourself apart from the rest it is important to create work that is visually inspiring and in a style that appeals to the right target audience, but that is also within the spirit of time or contemporary. Be careful not to create the same old and to do something that you were inspired to by a software tutorial. The result would be most likely boring.
Look at contemporary design ideas and influences. Start your search in my links: Links to Inspire You (at the right side of this blog) include links to sites such as:
Other ways to find inspirational designs and contemporary graphics
Look for the works of contemporary graphic artists and designers:
Jamie McKelvie
Jamie has a comic artist and illustrator. His works are interesting plays on figure/ground relationship (or positive and negative space).
If you look at the illustration below, her body is very abstract and basically just made up of a number of diagonal lines. Her shoulder and upper body are shown in shape, but towards the lower end of the shirt the lines are just left unfinished. I find this an interesting treatment and the illustration appeals.
The star in the top right is a cutout of the the diagonal lines, which are already very dynamic. The title has been highly stylised. The texture has an aged, scratched finish and the arrangement of the type is very interesting, it looks like display type used in a shop front.
Illustration: Jamie McKelvie – Suburban Glamour Comic Series
Illustration: Jamie McKelvie – Art Brut Record – Found at McKelvie’s Flickr account (click image)
Children’s Book Illustrations
There are many different styles of children’s book illustrations. One thing they all have in common is their target audience: children. That is what makes them so unique and often you can sense a desire in the illustrator to add a lot of story telling qualities and depth to the characters.
The interesting thing about children’s books as a source of inspiration is that you can search by designer or era.
You might be surprised that iconic graphic designer Saul Bass illustrated a children’s book. ‘Henri’s Walk to Paris’ was published in 1962 and if you look at the pages you will recognise the style of Bass. I strongly believe that children should be exposed to good graphic design ideas. I don’t mean the theory, but the children’s book should be inspiring. Below are some pages from ‘Henri’s Walk to Paris’.
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
The Street Art of Jef Aerosol
A Beautiful Piece by Aerosol found on his Facebook
Look at GUI Design Trends:
There is a clear move towards touch interfaces, due to tablets and other mobile trends. This can be seen in the Windows 8 Metro interface and latest trends in the Xbox 360 interface.
Artform that became extremely popular in the early 20th Century. Particularly popular in German Expressionism and Dadaism. Click the images for links to the original images or sites:
Photomontage: Amir Ebrahim Photography
Massive Attack – The Essential Mix
Homework for Assessment 1
Please complete the tasks below for next class:
Pick an Event
Find 10+ images for a style/feel that you like for the interactive PDF
Write down events + locations for the event (relevant to your event)
eg: Skateboard Week
events
shops
cafes
parks
map
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!
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. Last week’s sample photo of the Ameland geese by F Schouwenburg is under the Creative Commons License.
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.
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
Try out the Links to Creative Commons to the right of this post:
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.
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 text box (Win) with the word Normal or a small button (Mac) 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)
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 – 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:
Create a new document (use dimensions below)
Place an image and change size as you see fit (press Enter)
Create a layer mask (click the layer mask button)
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) with a title, either use your name or an imaginary title.
Image by Alvimann found on morgueFile.comImage by Noboru found on morgueFile.comUrban Stories Banner by F.Viola
The images must suit the themes:
Urban environment
Blue Skies
Dimensions of banner: 980px(width) x 174px (height) 72ppi (resolution)
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.
We will use today’s class for you to work on the assessment. I will walk around and look at your progress. We can discuss strategies on how to speak to potential employers on the phone.
Below is a listing of the tasks (as per last week):
Task 1:
Look into the yellow pages and collect details for 20 businesses:
List 10 businesses with a print or graphic design background
List 10 businesses with a digital media focus. Web, adverts, film and media
Make sure to have business name, type of business, contact details incl email and web address.
Task 2:
Develop a short questionnaire. Have a minimum of 10 questions. Your questions should be able to be answered on the phone or by e-mail.
The aim of your questionnaire is to
establish the chances for a Cert IV PGA Graduate and Diploma of PGA Graduate of finding employment and
find out what businesses in target industries are looking for in employees.
You can use the questions below to get you started.
What skill set are you looking for in an employee (eg Graphic Designer, Print operator…)
What soft skills are you looking for in a new employee?
In your expert opinion is your industry growing? Please describe (the sectors)!
I am [state your age] [gender] [currently studying a Cert IV in PGA at Kangan Institute]. Would I be able to find employment with you?
What advice do you have for me?
Task 3:
Interview 2 businesses (one from each group). You need to collect a contact person’s name and their job title. Aim for the highest up in a business. Write all the answers down. It might be a good idea to e-mail them the questionnaire, so that they read it as you ask them.
Make sure to check the spelling of names. Some people may get insulted if you misspell names.
Task 4:
Write a report with your opinion of your findings.
Details:
Hand everything in as a Word document. Include your full name and Student ID. Submit the final product on MyKangan.
Due Dates:
Task 1 + 2: 26/8//13 – We will work on it in class.
Tasks 3 + 4: 9/9/13
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!
By now you should understand the purpose or function of CSS. It is mostly responsible for the styling of online documents. CSS is also responsible to view documents for different platforms and outputs.
Examples of Output and Display for web-content. Image courtesy of: live.surveyshack.com
Having CSS allows you to change the font, image sizes, layouts to suit different requirements. The ideal size for a font will be different if viewed on a widescreen monitor or on a mobile phone.
We will go through the Styling related tabs as well as the box model. I will ask you to trial the different options as we work through to the Box Model together.
NOTE: In class we worked through the Styling Backgrounds and Styling Text Tabs. We wook time to look at a number of CSS related aspects and we spend a good time exploring the Styling Backgrounds examples.
Trial the links above and change the code from background-position:right top to left top and change the margin to margin-left:240px. Play around with the settings and observe the changes by submitting them in the TryIt Editor.
Open the attached document with a set of tasks for you to explore.
Your task: Download the attached word document and:Look up the Occupational Health and Safety Act 2004 (OHS Act). Find out who is responsible for workplace safety and who has duty of care at a workplace.
Define the term ‘hazard’ in a OHS context. Define the SAM principle and what the Think Safe steps are! State six methods to respond to a hazard
Upload your completed document
The Forum and the task are available on MyKangan. Please participate in the forum. A humorous response is more than welcome as long as it is in context and not vulgar.
All the tasks from previous weeks can be uploaded as well.
Due to me being sick I would like you to work individually through Google’s SEO Starter Guide.
Google Search Engine Optimisation Starter Guide
Please work through pages 14 – 19 on your own. This will include information on how to write better anchor text and how to write descriptive alt attributes for images.
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!
Pink Ribbon Day – Swiss International Style Reference – by Hwan Rochanabuddhi
Photo by Seemann on morgueFile.com
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)
Photomontage: Amir Ebrahim Photography
Based on photo by hotblack from morgueFile.com
A Beautiful Piece by Aerosol found on his Facebook
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
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
The concept was used on the German side as well with this ‘Auch du sollst beitreten zur Reichswehr’ [You too should join the German Army], design by Julius Engelhard, Image: courtesy of mental_floss
Mosaic of Sofia Coppola – by Maurizio Galimberti – www.mauriziogalimberti.it
Milk Poster – Swiss International Style Reference – by Annabel Stephen Salip
Swiss International Style – Joseph Müller-Brockmann – Beethoven – found at www.designhistory.com
Image Source: www.photoshopessentials.com
Concept for Gallery Screnshot
Based on image by hotblack on morgueFile.com – F.Viola
Layers in Photoshop are like a Collage of images stuck on top of each other…
Illustration by Gary Neill found on Dzineblog.com – http://garyneill.com/ http://garyneill.tumblr.com/
Based on photo by dhester from morgueFile.com
Example of applied changes
Photo Montage by SGlider12 on Webdesign.org – Click image for great Gimp tutorial
Setting the grid up.
Found at Inc.com
Illustration by Jessie Ford, found on DzineBlog.com
Your Lipstick Needs You, an entertaining take by Digital Media Artist Samantha Cain. Courtesy of: Samantha Cain, http://www.behance.net/samanthacain
Photo by mconnors on morgueFile
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
Based on a photo by delboysafa from morgueFile.com
Photo by dharder on morgueFiles.com
Swiss travel poster from 1934 by Herbert Matter – Source: http://swisstype.wordpress.com/work/
Courtesy of The Art of Mass Effect Universe’, 2012
Photo by frenchbyte on morgueFile
Leonardo’s St. John the Baptist, Louvre, Paris, Image: courtesy of A World History of Art – www.all-art.org
Photo by mcconnors on morgueFile
Close-up at Fed Square, Federico Viola 2013
Photo by agathabrown on morgueFile
He loves OHS! – Photo by Karpati Gabor on morgueFile
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
Courtesy of The Art of Mass Effect Universe’, 2012
Steel Curves, Image: courtesy of flickr.com, photographer: Margeois.
Screenshot – 82 Everyone is a Marketer by Seth Godin from What’s Your Story by Joyce Hostyn
Good Morning! Photo: wallyir, from: morgueFile.com
Colours, Numbers and Boxes – very happy and alive, personally I do not like the distortion of the word content – found at: Flickr
Vertical lines of a dark fence, image courtesy of p.ic – Photo Internet Collection – www.photoic.wordpress.com, photographer: Federico Viola
Examples of Output and Display for web-content. Image: live.surveyshack.com
Illustration: Tavis Coburn – Illustration for for an article predicting trends in Apple’s mobile strategy. Found on: TavisCoburn.com
Vista Lighting Effect – Courtesy of: Tutorial9
Photo by clarita on morgueFile
‘For Great Road Trips: Switzerland’ Poster by Herbert Matter in (Swiss) International Style – Source: http://swisstype.wordpress.com/work/
Massive Attack – The Essential Mix
Illustration by Tavis Coburn found on DzineBlog.com
The Face by drfranken found on ChromoArt.de
Work by Justin Anderson
Image from morgueFile by lemai13
Using the Reflect tool (o) to reflect the i downwards as if it has collapsed in front.
“Step into my office” Source: The Age, click image for link
Finding the Right Candidate for a Job… – Photo AdamRiley from www.projectnoah.org
Photo by omdur on morgueFile
Italian movie poster found on Abduzeedo.com
Based on photo by xandert found on morgueFile
Work by Jo W
Screenshot of Endless Alphabet 2, courtesy of AppsPlayground.com
Peace- Swiss International Style Reference – by Maryam Chananeh
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)
Some of us have there most enjoyable moments in nature at the beach, Photo by rivediamoci on morgueFiles
Custom Shapes and Custom Shape Icon
Poppies – Vector art Federico Viola based on photo by hotblack from morgueFile
The underlined text and insertion point at end of the word indicates that you are still in the type mode.
Jenga, photo courtesy of: Design-Crit.com
Illustration by Gary Neill found on P.A.P.-Blog – http://garyneill.com/ http://garyneill.tumblr.com/
Outlined text changed in size and colours dropped into the individual letters with Eyedropper tool using LMB + Alt
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.
Illustration: Jamie McKelvie – Art Brut Record
Contemporary design in style of Construcitvism by Teo Brito found at LauraGreen92 – click image for more information and link to her blog
Luminescent Lines – Courtesy of: PSDLearning
The gentle curve of the river and the light green tones of the grass give this image a calming feel. The montains and the clouds have a less calming effect. Image: courtesy of Icon Photography School – http://www.photographyicon.com/line/
Photo by ariadna on morgueFile
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
The calming effect of horizontal lines, image: courtesy of flickr.com, Photographer: jaikdean
Illustration by Jessie Ford, found on DzineBlog.com
ruthworkx -http://ruthworkx.files.wordpress.com
I Want You – Emily Strange, The lovable Emily Strange came to life in 1991, designed by Nathan Carrico for Santa Cruz Skateboards. She is referred to as a counterculture icon. I would just call her a sceptic. Image found at: Kollectable Kaos
What Time is it Now? by King_Bobbles
Source: morgueFile, Photo by matei
Couple found at http://frenchbydesign.blogspot.com.au
Photo by clarita on www.morguefile.com
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)
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
Lines and Gradients- Courtesy of: psdtuts+
Photo by hotblack on morgueFile.com
The swirls in the image are made up of numerous lines. Courtesy of: www.openprocessing.org
Geese in Ameland, Photo by Frans Schouwenburg
Grassy Rabbits
Light Streaks – Courtesy of: PhotoshopEssentials
Experimental Photomontage by Robert Heinecken
Illustrator unknown – found at: Ephemera – World of Rare Books
Britons, Lord Kitchener Wants You! Propaganda poster design from WWI by Alfred Leere. Image: courtesy of WorldWarEra.com
Work by Egon Schiele, found at Mom.org
Constructivism Reference – by Lylah Livingston
Fruity Design – This is great for a menu, very appetizing thumbnails – found at: WeddingPhotography.com
Uncle Sam Wants You, WWI Propaganda Poster for US Army recruits, Design by James Montgomery Flagg, 1916, image found at: Live Auctioneers
Michael Pointing in GTA V – Courtesy of Rockstar
Illustration by Kate Miller, found on DzineBlog.com
Illustration: Jamie McKelvie – Suburban Glamour Comic Series