Learn how to create a vertical navigation bar in a button format. Specify a colour for your buttons, and a font for your text. Use internal CSS (in the head segment).
Learn how to create a horizontal navigation bar in a button format. Specify a colour for your buttons, and a font for your text. Use internal CSS (in the head segment).
Create a Web page with a title, horizontal navigation bar and an image gallery with 6 – 9 images.
Make the buttons active hyperlinks, link them to different posts on this blog. Make the image gallery linked to actual images (use morgueFile) and insert thumbnail images for it as well.
I have broken the Assessment brief from last week down into 2 Assessments.
Assessment 1 will focus on step 1 – your research and establishing your target audience.
Assessment 2 will focus on step 2 – designing an e-learning concept (game) and documenting the idea in a paper-based format. Paper-based means that you will create the design and planning of the e-learning resource without the actual final product. You may do this as a PDF.
Assessment 1
Brief
In groups of three develop an E-learning resource that allows local prep children to improve their understanding of the English Alphabet (primary aim of project). The tool should allow the children to have as much exposure to the letters as possible. You will need to develop concepts that explore letter recognition and recreation.
The secondary scope of the project is for the children to learn to type the letters in a QWERTY keyboard.
Team Work
You are required to team up in a team of up to 3 students. There is the option to work alone, but you need to inform me and get confirmation. If your name is not in the list below you need to inform me about the people in your team. Send a message to this blog with names of all the team members.
Teams so far:
Lucine Y, Fatma Y & Benan Ü
Justin A & Joe W
Berna K, Emel & Naşide S
Vlad K
Michael T & Tim B
1 – Establish Your Project
Read the assessment task fully and write in one or two sentences: When do you know that the E-Learning resource is complete? When do you know that this project is finished?
This will help you establish clear boundaries for your project – for any project and you will know when you have finished.
2 – Establish Your Target Audience
Write a extensive description of your Primary Target Audience as well as your Secondary Target Audience.
If your Primary Target Audience is the user group of your product (students), then your Secondary Target Audience would be a related group of people (friends of the school children), who could be a user group or maybe a provider of the service (eg teachers) or a group that is interested in the well-being of the school children (eg parents). I would focus on the teachers and other staff at a school, they would be involved in the purchase of the product.
3 – Learner Needs Analysis
Write down the needs of your target audience? Start this point of with the desired outcome: what does the learner need to learn? After establishing this you can look at what the target user will need to be able to learn.
This is a good point to brainstorm. What is it that you need to expose your learner to?
4 – User Experience
In a paragraph describe what user experience you are designing. What will the child playing the game experience? What emotions will the user go through? What emotions will your user not have?
You could aim for a user experience that is fun or interesting, you could say that the experience may be challenging and the learner will always feel like he or she needs to think and try things out before achieving success. This could result in the learner feeling more engaged and claiming the acquired knowledge.
5 – Platform
Specify the delivery platform, eg using web-based delivery, using computer based delivery, using tablets or mobile phones, a console, etc. The operating system would be another aspect here: use of IBM-based Windows 7, 8, Mac-based OS, Android, Linux, Open Source…
Add a minimum 1 sentence describing benefits and short comings of a specific system, software, delivery platform (eg using Flash has the disadvantage that it is rejected by Mac operating systems and more and more by Android.
6 – Research of existing E-games
Collect research on existing e-learning games for your target audience. List a number of websites and available games on the platform of your choice. Take screenshots or find images on Google or other search engine.
Describe your favourite 3 sites / favourite 3 e-games. Describe what you like about each (graphics, game play, actions)
Format
This project needs to be submitted in digital paperformat, either as a PDF, PowerPoint presentation or a Word document.
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 Shortcuts] and 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 (in px for web), the height (in px) and the resolution (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.
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.
Tick and untick the Preview box to observe the changes before accepting it.
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)
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.
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:
Follow the in-class demonstration (shortcut: Ctrl+M). 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.
The short cut is Shift+Ctrl+L. 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 (maybe not that short after all). 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.
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 shadowand 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.
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.
Using Hue/Saturation Adjustment Layer with a mask showing the original (yellow) below.
Photo Filter
Photo Filter
Follow the in-class demonstration. 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. 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.
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
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!!!)
Use the image by Matthew Bridges (or select an alternative image). Use the crop tool and resize to 450px x 400px at 72ppi (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).
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).
Student Submissions:
Work by Benan ÜWork by Michael TWork by Naşide SWork by Tristan SWork by Berna KWork by Vlad KWork by Jo WWork by Justin A
Last week you have created some beautiful web pages for a seaside town. I was very pleased with some of the results. Please still submit your work if you have not already done so.
Check for feedback, a few of you have to add small components that were not yet included.
Design an E-Learning Resource -The Design Document
Team Task and Brief
In groups of three develop an E-learning resource that allows local prep children to improve their understanding of the English Alphabet (primary aim of project). The tool should allow the children to have as much exposure to the letters as possible. You will need to develop concepts that explore letter recognition and recreation.
The secondary scope of the project is for the children to learn to type the letters in a QWERTY keyboard.
Format
This project needs to be submitted in digital paperformat, either as a PDF or a Word document. The sketches and flow charts as well as brain storms and mind maps can be created by hand sketching and scanning.
Teams
Get together in teams of 3 for this first assessment task. Please leave a comment on this post with your team number and the names of all team members. You will be allowed to work as individuals, but please check with me.
First Things First
The first task is to ask yourself a central question: When do you know that the E-Learning resource is complete? When do you know that this project is finished?
Write it in a sentence. The sentence should include the tasks that you will have to perform to complete this project.
Learning Experience/User Experience
Define the Learning Experience that you want your learner to have. What exactly do you want the user to experience? Describe the motions that your typical user might have when using your product.
When describing the user experience I would like you to look at or think back of a positive experience that you have had with a product. What was it that made the experience so good and how did it make you feel?
How can you integrate that experience into the resource that you are creating?
This is a far important question to answer than you may initially think. By answering this question you actually find out what your e-learning resource will or should feel like. Every decision that you will make will have to fit this criteria.
Define the target audience, what age group, gender, socio-economic (culture, income group, education) group are you dealing with. Next describe what a person from this target audience likes and he or she may enjoy in your resource.
You may deal with a primary and secondary target audience – who else will be important in the purchase of the product besides the end-user? What other groups of people are affected by your product?
Learner Needs Analysis
What are the needs of your target audience? Start this point of with the desired outcome: what does the learner need to learn? After establishing this you can look at what the target user will need to be able to learn.
This is a good point to brainstorm. What is it that you need to expose your learner to?
Platform
Specify the delivery platform, eg using web-based delivery, using computer based delivery, using tablets or mobile phones, a console, etc. The operating system would be another aspect here: use of IBM-based Windows 7, 8, Mac-based OS, Android, Linux, Open Source…
Add a minimum 1 sentence describing benefits and short comings of a specific system, software, delivery platform (eg using Flash has the disadvantage that it is rejected by Mac operating systems and more and more by Android.
Tools and Activities
This point is for research only: What tools can you currently find out there? What type of apps, Video viewers, Sketch Pads, audio apps, games and other activities are currently available?
Consider primary tools that could be integrated into the resource. For example a Sketch Pad that allows children to draw shapes of letters that look like fruit or animals. A video viewer window for instructions or fun songs performed by other children.
Consider secondary tools that can be external and your learning resource can hyperlink the tool. You need to ensure that there is no copyright infringement.
Research hardware – are there any new developments (eg a touch sensitive modelling tool) and existing hardware product: stylus, graphic pads, tec
Learning Resource
Goals of the Learning Resource
The overall goal describes what the learner will be able to do after completing the instruction.
Content of the Learning Resource
The content describes what will be taught in order to achieve the objectives. What content will you need to include in the resource? This is just a list of points. Write down what you want to include in the resource. This could be: using video resources to explain the alphabet with sing-along-songs, or drawing instructions with an interactive sketchpad.
How will the content be presented. See example below of PBS Kids.
Create a layout concept for the menu of the overall learning resource.
The methods of instruction describe how the content will be taught. This is about the specific tools, that you want to use. Mention the use of supportive tools such as sound. Will there be a narrative (a story) told by a voice over or a character (eg a teddy).
How is the learner informed about what to do? What type of instructions are available? Give a text example in the layouts.
List a number of 10 potential tools, and describe 2 tools and methods in detail.
Create a flow-chart for each with a step-by-step instruction of what the learner will do in the activity.
Create layouts with instructions on how to interact with the application (eg how to move things) and instructions for users.
Create basic concepts for icons
Learner evaluation strategies (test with results)
The learner evaluation strategies describe how the learner will be evaluated to see if he or she has obtained the objectives (eg a test or a level is achieved and a new level unlocked).
Welcome to your third Photoshop class. Be honest: did you practice what you have learnt last week? Make sure to practice Photoshop as much as you can, preferably daily. If you create a habit and make it fun your learning curve will be steep. If you are to busy to practice every day, try more than once a week.
You can see that we will be rather busy. You will also need to provide me with an image as a result.
If you already now all of the tasks above you can do this straight away –
Your Tasks for this class:
Task 1 – Start a new document – 700x500px at 150ppi (pixels/inch) resolution and background contents set to transparent. Create a clipping mask with a rounded rectangle (fill most of the document space and with a 40px radius) of a photo of geese in Ameland, inthe Netherlands by Frans Schouwenburg. The photo is available under Creative Commons agreement and can be found on Flickr.com. Create a Gaussian blur (7.4px) of the clipping mask and flatten the image. Save as a JPEG with this title: Class3_T1_Your_full_name.jpg (example: Class3_T1_Toni_Varsetti.jpg). Upload the file to MyKangan and keep a copy of the JPEG.
Task 2 – Use the same document from task 1 or start a new document – 700x500px at 150ppi (pixels/inch) resolution and background contents set to transparent. Type the initials of your name in Impact Regular 200pt. If you have not done so in task 1, download the image of the geese in Ameland (see Task 1 for link). Place the file in your document (File>Place). When excepting the size make sure that the image is larger than the initials.
Finally create a clipping mask (the photos should only appear inside the text now). Save the file as a PNG with this title: Class3_T2_Your_full_name.png (example: Class3_T2_Toni_Varsetti.png). Upload the file to MyKangan and keep a copy of the PNG.
If you are in doubt about Toni Varsetti ask Lucine… 😉
The Layer Panel
The ability to create layers is a central aspect of Photoshop. It works like a collage, you place one photo on top of another and the one on top covers up the photos below it.
Layers Panel – Source: The Graphic Designer’s Digital Toolkit, Alan Wood, 5th Edition, 2011Layer Drop Menu Click image to see larger version
The Layer palette is located in the bottom right-hand corner with a tab called LAYERS. There are two menu items you should be aware of in the drop down main menu: Layers and Window.
Click on Layers to see a lot of actions that you can perform with layers. (See image) You can perform these functions directly from the layers palette as well, by clicking on the Layer Options Tab (small icon in the top right of the layers palette).
Click on Window in the main menu and see Layers ticked. This is were you can activate the Layer palette if you cannot see it on your screen. (If you are using a Windows PC notice the shortcut F7? This allows you to activate or deactivate the layers palette.)
Please read all the options of the image of the Layers panel (above) before advancing.
How to create a new Layer
You can simply click on the small icon in the Layers panel that looks like a sheet of paper (too slow)
You click on the Layer tab in the menu bar: Layer>New>Layer (too slow) or
You use the short cut: Ctrl+Shift+Alt+N (Mac: command+shift+option+N) – Nice! This will immediately create a new layer on top of your active layer.
You can use this short cut: Ctrl+Shift+N. This will open a options panel before the layer is created.
Layers in Photoshop are like a Collage of images stuck on top of each other… Monkey photo by deanjenkins and Green photo by omdur, both on morgueFile
How to move a Layer
Drag the layer in the layer panel into the new position. You can move it up (=on top of other layers in the workspace) or down (it will be partly hidden by layers above.
This is an easy and intuitive way. You will need to sometimes move it right between two layers and wait for a dark line to appear before releasing the layer.
You can also use the shortcuts: Ctrl+[ (or Cmd+[ on Mac) to move the layer up and Ctrl+] (or Cmd+] on Mac)to move the layer down.
You can use the Menu bar: Layer>Arrange>Bring Forward (or Backward)
How to make a Layer active or inactive
A layer needs to be active for you to be able to work with the artwork on the layer. Photoshop allows you to work on one layer at the time.
The active layer is high-lighted or shaded (generally it is the layer with the blue background and white text in the layers panel.)
To activate a layer simply click on the layer in the layer panel
If you want to select numerous layers hold the Ctrl button (Mac: Cmd) while selecting more layers.
How to hide and show a Layer
You can make the content of a layer invisible by clicking on the eye icon in the Layers panel. Clicking it again will make the content visible.
How to link Layers
Linking layers can be done by selecting numerous layers (with Ctrl) and then clicking on the chain symbol in the Layers panel.
How to group Layers
Group layers by selecting numerous layers and then either pressing Ctrl+G (Mac Cmd+G) or create a new group by clicking the Create a new group icon in the Layers panel (it looks like a folder) and drag any layer you want into it.
How to delete Layers
The easiest way is to select the layer and hit Backspace; this happens immediately.
If you are the old school type you might to simply drag the layer into the bin icon or click the bin icon and press enter to delete the layer.
How to draw Shapes
Using the Custom Shape Tool to draw a Rabbit – The rabbit is below the grass
Before you draw a shape place an image in the document (File>Place). In the example I have placed a photo of grass (found on http://www.morguefile.com > Petersphoto)
There are several tools that allow you to draw shapes. They basically draw vector graphic shapes that are linked to a layer. Try the Rounded Rectangle Tool tool. (If the tool is not visible, hold down the Rectangle tool near the bottom of the toolbox.) The shortcut is U – and Shift+U allows you to scroll through the tools options (it should be the second.)
Draw a rounded rectangle with a 25px radius (drag to draw).You will notice that drawing a shape will create a new layer as a default!
Try the other drawing tools as well.
I chose the rabbit custom shape. To find it choose the custom shape tool, it looks like a blob, see the sample images! Then go into the options menu bar and select the down arrow next to the custom shape (most likely a black arrow). This will open all the different custom shapes. Next click on the small outward arrow head in the top right of the box you have just opened. Select all and Ok. This will open all the custom shapes that Photoshop comes with. The rabbit should be in the selection.
How to create a Clipping Mask
The grass layer has been turned into a clipping mask with the shape of the rabbit below.
Keep only one shape layer and delete all the others.
Place an image in the workspace: File>Place. Make sure the image is larger in size than the shape on the layer below. Right-click on your image layer and select Create Clipping Mask.
Male sure that you do this to your image layer and that the image layer is on top!!!
Your image layer has been reduced to the shape of the shape layer below. 🙂
Try to move just the image by selecting the image layer.
Try to move just the shape layer.
What is the difference?
How to use the Gaussian Blur
Make sure your shape thumbnail on your shape layer is selected. Go to the menu bar: Filter>Blur>Gaussian Blur and enter 7.4px for the Radius.
You should be prompted if you want to rasterize the layer. Click yes.
How to merge two Layers
Select two layers (left click + Ctrl) then right click and select Merge Layers.
How to flatten an Image
Right click on any layer and select Flatten Image or press Ctrl+Shift+E (Cmd+Shft+E on Mac)
Tasks
This completes today’s tutorials, please perform the below tasks:
Task 1 – Start a new document – 700x500px at 150ppi (pixels/inch) resolution and background contents set to transparent. Create a clipping mask with a rounded rectangle (fill most of the document space and with a 40px radius) of a photo of geese in Ameland, inthe Netherlands by Frans Schouwenburg. The photo is available under Creative Commons agreement and can be found on Flickr.com. Create a Gaussian blur (7.4px) of the clipping mask and flatten the image. Save as a JPEG with this title: Class3_T1_Your_full_name.jpg (example: Class3_T1_Toni_Varsetti.jpg). Upload the file to MyKangan and keep a copy of the JPEG.
Task 2 – Use the same document from task 1 or start a new document – 700x500px at 150ppi (pixels/inch) resolution and background contents set to transparent. Type the initials of your name in Impact Regular 200pt. If you have not done so in task 1, download the image of the geese in Ameland (see Task 1 for link). Place the file in your document (File>Place). When excepting the size make sure that the image is larger than the initials.
Finally create a clipping mask (the photos should only appear inside the text now). Save the file as a PNG with this title: Class3_T2_Your_full_name.png (example: Class3_T2_Toni_Varsetti.png). Upload the file to MyKangan and keep a copy of the PNG.
Naşide Clipping MaskClipping Mask by Lachy CClipping Mask by Brandon M and Anthony WClipping Mask Amelia BClipping Mask Dom UClipping Mask Dejanah PClipping Mask Dylan CSelection by TerranceMcGClipping Mask by Surour D
Colours, Numbers and Boxes – very happy and alive, personally I do not like the distortion of the word content – found at: Flickr
Poppies – Vector art Federico Viola based on photo by hotblack from morgueFile
Couple found at http://frenchbydesign.blogspot.com.au
Illustration: Jamie McKelvie – Suburban Glamour Comic Series
Photo by clarita on www.morguefile.com
Colourful Table of Content – Ribbons in Primary Colours – found at: LifeBlue.com
Some of us have there most enjoyable moments in nature at the beach, Photo by rivediamoci on morgueFiles
Illustration: Jamie McKelvie – Art Brut Record
Jenga, photo courtesy of: Design-Crit.com
Based on photo by xandert found on morgueFile
Work by Jo W
Your Lipstick Needs You, an entertaining take by Digital Media Artist Samantha Cain. Courtesy of: Samantha Cain, http://www.behance.net/samanthacain
Luminescent Lines – Courtesy of: PSDLearning
Illustration by Gary Neill found on P.A.P.-Blog – http://garyneill.com/ http://garyneill.tumblr.com/
Leonardo’s St. John the Baptist, Louvre, Paris, Image: courtesy of A World History of Art – www.all-art.org
Swiss International Style – Joseph Müller-Brockmann – Beethoven – found at www.designhistory.com
Photo Montage by SGlider12 on Webdesign.org – Click image for great Gimp tutorial
Setting the grid up.
Photo by mconnors on morgueFile
Image Source: www.photoshopessentials.com
Steel Curves, Image: courtesy of flickr.com, photographer: Margeois.
Photo by matthewbridges on morgueFile.com
Found at Inc.com
Photo by Seemann on morgueFile.com
Illustration by Jessie Ford, found on DzineBlog.com
Milk Poster – Swiss International Style Reference – by Annabel Stephen Salip
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)
Illustration by Jessie Ford, found on DzineBlog.com
He loves OHS! – Photo by Karpati Gabor on morgueFile
Mosaic of Sofia Coppola – by Maurizio Galimberti – www.mauriziogalimberti.it
Illustration: Tavis Coburn – Illustration for for an article predicting trends in Apple’s mobile strategy. Found on: TavisCoburn.com
Image source: Data Center Knowledge
Custom Shapes and Custom Shape Icon
Geese in Ameland, Photo by Frans Schouwenburg
Concept for Gallery Screnshot
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
Based on image by hotblack on morgueFile.com – F.Viola
‘For Great Road Trips: Switzerland’ Poster by Herbert Matter in (Swiss) International Style – Source: http://swisstype.wordpress.com/work/
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/
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
Courtesy of The Art of Mass Effect Universe’, 2012
Illustration by Tavis Coburn found on DzineBlog.com
Lines and Gradients- Courtesy of: psdtuts+
Photo by dharder on morgueFiles.com
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
Close-up at Fed Square, Federico Viola 2013
Free Transform and Ctrl – I am loving it!!!
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
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
Experimental Photomontage by Robert Heinecken
Illustration by Kate Miller, found on DzineBlog.com
The grass layer has been turned into a clipping mask with the shape of the rabbit below.
Example of applied changes
Photo by omdur on morgueFile
Michael Pointing in GTA V – Courtesy of Rockstar
Constructivism Reference – by Lylah Livingston
Screenshot of Endless Alphabet 2, courtesy of AppsPlayground.com
Photo by DTL on morgueFiles
Vertical lines of a dark fence, image courtesy of p.ic – Photo Internet Collection – www.photoic.wordpress.com, photographer: Federico Viola
The Glossy Reflection is transparent on top and gets whiter towards the bottom.
Photo by ariadna on morgueFile
Examples of Output and Display for web-content. Image: live.surveyshack.com
Photo by mcconnors on morgueFile
Photo by hotblack on morgueFile.com
Photo by clarita on morgueFile
Contemporary design in style of Construcitvism by Teo Brito found at LauraGreen92 – click image for more information and link to her blog
Peace- Swiss International Style Reference – by Maryam Chananeh
Italian movie poster found on Abduzeedo.com
Pink Ribbon Day – Swiss International Style Reference – by Hwan Rochanabuddhi
Grassy Rabbits
Screenshot – 82 Everyone is a Marketer by Seth Godin from What’s Your Story by Joyce Hostyn
Photo by frenchbyte on morgueFile
Image from morgueFile by lemai13
Fruity Design – This is great for a menu, very appetizing thumbnails – found at: WeddingPhotography.com
The swirls in the image are made up of numerous lines. Courtesy of: www.openprocessing.org
Work by Justin Anderson
Only practice will help you learn! Photo by BreonWarwick on morgueFile
Good Morning! Photo: wallyir, from: 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)
Text and Shapes – This design lends itself to an interactive use – found at: Klafferty.com
Massive Attack – The Essential Mix
Using the Reflect tool (o) to reflect the i downwards as if it has collapsed in front.
The calming effect of horizontal lines, image: courtesy of flickr.com, Photographer: jaikdean
Work by Egon Schiele, found at Mom.org
From ‘Henri’s Walk to Paris’ 1962 – children’s book by Saul Bass Found at: Brainpickings.org
Light Streaks – Courtesy of: PhotoshopEssentials
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
The Face by drfranken found on ChromoArt.de
Screenshot from What’s Your Story by Joyce Hostyn
ruthworkx -http://ruthworkx.files.wordpress.com
Study – Lines and Grace Kelly – by Federico Viola photo: courtesy of GettingCheeky.com and curved lines wallpaper: courtesy of FreeFever.com
What Time is it Now? by King_Bobbles
Britons, Lord Kitchener Wants You! Propaganda poster design from WWI by Alfred Leere. Image: courtesy of WorldWarEra.com
The underlined text and insertion point at end of the word indicates that you are still in the type mode.
Photomontage: Amir Ebrahim Photography
Based on photo by hotblack from morgueFile.com
Illustrator unknown – found at: Ephemera – World of Rare Books
Finding the Right Candidate for a Job… – Photo AdamRiley from www.projectnoah.org
Swiss travel poster from 1934 by Herbert Matter – Source: http://swisstype.wordpress.com/work/
Based on photo by dhester from morgueFile.com
Courtesy of The Art of Mass Effect Universe’, 2012
Vista Lighting Effect – Courtesy of: Tutorial9
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.
Based on a photo by delboysafa from 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)
Source: morgueFile, Photo by matei
A Beautiful Piece by Aerosol found on his Facebook
Photo by agathabrown on morgueFile
Uncle Sam Wants You, WWI Propaganda Poster for US Army recruits, Design by James Montgomery Flagg, 1916, image found at: Live Auctioneers
Layers in Photoshop are like a Collage of images stuck on top of each other…
![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](https://classoffederico.files.wordpress.com/2014/04/world-war-propaganda_auch-du-sollst-beitreten.jpg?w=462&h=590 "world war propaganda_Auch du sollst beitreten")
RAE - Research and Exploration 