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.
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:
Home Page
About us and Contact
Gallery or Portfolio of Work
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.
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:
Today we will look at a lollybag 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…
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
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.
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.
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 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)
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).
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.
Examples of Student Submissions:
Banner by Vlad KBanner by Yong WBanner by Mike TBanner by Fatma Y
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
Massive Attack – The Essential Mix
Photo by DTL on morgueFiles
Michael Pointing in GTA V – Courtesy of Rockstar
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
Vista Lighting Effect – Courtesy of: Tutorial9
He loves OHS! – Photo by Karpati Gabor on morgueFile
Example of applied changes
What Time is it Now? by King_Bobbles
Based on photo by hotblack from morgueFile.com
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
Your Lipstick Needs You, an entertaining take by Digital Media Artist Samantha Cain. Courtesy of: Samantha Cain, http://www.behance.net/samanthacain
Steel Curves, Image: courtesy of flickr.com, photographer: Margeois.
“Step into my office” Source: The Age, click image for link
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
Free Transform and Ctrl – I am loving it!!!
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)
Photo by frenchbyte on morgueFile
Uncle Sam Wants You, WWI Propaganda Poster for US Army recruits, Design by James Montgomery Flagg, 1916, image found at: Live Auctioneers
Work by Justin Anderson
Light Streaks – Courtesy of: PhotoshopEssentials
Britons, Lord Kitchener Wants You! Propaganda poster design from WWI by Alfred Leere. Image: courtesy of WorldWarEra.com
Leonardo’s St. John the Baptist, Louvre, Paris, Image: courtesy of A World History of Art – www.all-art.org
The Glossy Reflection is transparent on top and gets whiter towards the bottom.
Outlined text changed in size and colours dropped into the individual letters with Eyedropper tool using LMB + Alt
Mosaic of Sofia Coppola – by Maurizio Galimberti – www.mauriziogalimberti.it
Image source: Data Center Knowledge
Experimental Photomontage by Robert Heinecken
Vertical lines of a dark fence, image courtesy of p.ic – Photo Internet Collection – www.photoic.wordpress.com, photographer: Federico Viola
Based on a photo by delboysafa from morgueFile.com
Peace- Swiss International Style Reference – by Maryam Chananeh
Constructivism Reference – by Lylah Livingston
Photo Montage by SGlider12 on Webdesign.org – Click image for great Gimp tutorial
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
Poppies – Vector art Federico Viola based on photo by hotblack from morgueFile
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)
Jenga, photo courtesy of: Design-Crit.com
Based on image by hotblack on morgueFile.com – F.Viola
Illustration by Jessie Ford, found on DzineBlog.com
Swiss travel poster from 1934 by Herbert Matter – Source: http://swisstype.wordpress.com/work/
Work by Jo W
Examples of Output and Display for web-content. Image: live.surveyshack.com
Layers in Photoshop are like a Collage of images stuck on top of each other…
Finding the Right Candidate for a Job… – Photo AdamRiley from www.projectnoah.org
Illustration by Kate Miller, found on DzineBlog.com
Screenshot – 82 Everyone is a Marketer by Seth Godin from What’s Your Story by Joyce Hostyn
Couple found at http://frenchbydesign.blogspot.com.au
Photo by dharder on morgueFiles.com
Italian movie poster found on Abduzeedo.com
Setting the grid up.
Photo by ariadna on morgueFile
The swirls in the image are made up of numerous lines. Courtesy of: www.openprocessing.org
Swiss International Style – Joseph Müller-Brockmann – Beethoven – found at www.designhistory.com
The Face by drfranken found on ChromoArt.de
Fruity Design – This is great for a menu, very appetizing thumbnails – found at: WeddingPhotography.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
Based on photo by xandert found on morgueFile
Colours, Numbers and Boxes – very happy and alive, personally I do not like the distortion of the word content – found at: Flickr
Photomontage: Amir Ebrahim Photography
A Beautiful Piece by Aerosol found on his Facebook
Contemporary design in style of Construcitvism by Teo Brito found at LauraGreen92 – click image for more information and link to her blog
Illustration: Tavis Coburn – Illustration for for an article predicting trends in Apple’s mobile strategy. Found on: TavisCoburn.com
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.
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
Photo by Seemann on morgueFile.com
Illustration by Gary Neill found on P.A.P.-Blog – http://garyneill.com/ http://garyneill.tumblr.com/
Based on photo by dhester from morgueFile.com
Illustrator unknown – found at: Ephemera – World of Rare Books
Source: morgueFile, Photo by matei
Luminescent Lines – Courtesy of: PSDLearning
Pink Ribbon Day – Swiss International Style Reference – by Hwan Rochanabuddhi
Only practice will help you learn! Photo by BreonWarwick on morgueFile
Screenshot of Endless Alphabet 2, courtesy of AppsPlayground.com
Photo by mconnors on morgueFile
Illustration: Jamie McKelvie – Suburban Glamour Comic Series
Close-up at Fed Square, Federico Viola 2013
Illustration: Jamie McKelvie – Art Brut Record
Concept for Gallery Screnshot
‘For Great Road Trips: Switzerland’ Poster by Herbert Matter in (Swiss) International Style – Source: http://swisstype.wordpress.com/work/
Illustration by Tavis Coburn found on DzineBlog.com
ruthworkx -http://ruthworkx.files.wordpress.com
The grass layer has been turned into a clipping mask with the shape of the rabbit below.
Image Source: www.photoshopessentials.com
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
Text and Shapes – This design lends itself to an interactive use – found at: Klafferty.com
Courtesy of The Art of Mass Effect Universe’, 2012
The calming effect of horizontal lines, image: courtesy of flickr.com, Photographer: jaikdean
Illustration by Gary Neill found on Dzineblog.com – http://garyneill.com/ http://garyneill.tumblr.com/
Image from morgueFile by lemai13
The underlined text and insertion point at end of the word indicates that you are still in the type mode.
Illustration by Jessie Ford, found on DzineBlog.com
Photo by clarita on www.morguefile.com
Found at Inc.com
Custom Shapes and Custom Shape Icon
Work by Egon Schiele, found at Mom.org
Courtesy of The Art of Mass Effect Universe’, 2012
Photo by mcconnors on morgueFile
Photo by agathabrown on morgueFile
Screenshot from What’s Your Story by Joyce Hostyn
Some of us have there most enjoyable moments in nature at the beach, Photo by rivediamoci on morgueFiles
Photo by omdur on morgueFile
Using the Reflect tool (o) to reflect the i downwards as if it has collapsed in front.
Good Morning! Photo: wallyir, from: morgueFile.com
Grassy Rabbits
Photo by matthewbridges on morgueFile.com
Geese in Ameland, Photo by Frans Schouwenburg
Milk Poster – Swiss International Style Reference – by Annabel Stephen Salip
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/
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: Smashing Magazine (click image for inspiring article on table of content design)