R E S E A R C H
+
D E V E L O P M E N T
In this module you will cover the following Learning Outcomes: BY THE END OF THE SUB-TASK YOU WILL BE ABLE TO DEMONSTRATE THE ABILITY TO... 1. Communicate specific objectives and/or express ideas and concepts through the creation of visual communication materials, both in terms of imagery & words. 2. Apply visual hierarchy, as a means of processing information in visual communication, and utilise disposition of colour, space, format and layout structures. 3. Analyse, evaluate and demonstrate awareness of issues such as visibility, legibility, readability, fitness for purpose in relation to visual communication. 4. Create visual communication outcomes, incorporating type and image, utilising and applying different media, materials, styles and techniques. 5. Use and apply visual imagery demonstrating an awareness and understanding of style, genre, context and culture in visual communication and demonstrating an appreciation of the difference between imagery produced for commercial output and artistic reasons. 6. Use computers and related technology and software to process and produce visual outcomes for specific contexts, ensuring appropriate mode, resolution, file format and compression. For further information see Foundation Degree Graphic Design: Module Descriptors Document. 3
THE SPECIFIC CONTENT OF THIS SUB-TASK
The content of this sub-task is concerned with the effective visual communication of ideas/concepts and messages through imagery and words and will involve the following subjects: • Generating and creating imagery through the practical use, application and exploration of painting/drawing/making materials, techniques and media including photography and digital illustration. •
Visual communication of ideas, concepts and messages within a given context.
• Development of IT and computer skills in relation to visual communication, transferable to other areas of the course and to the workplace. Most activities will be individually centred in this sub-task Background It is increasingly important for designers to be knowledgeable and highly skilled in the use of computerbased hardware and software. Almost all visual imagery is now either generated by, or eventually processed through digital technologies. The computer and digital photography are widely used, not only as production tools, but also as creative outlets for imaginative image-making and manipulation. In this sub-task of the Visual Communication Module you will address 2 key learning outcomes: • Communicate specific objectives and/or express ideas and concepts through the creation of visual communication materials, both in terms of imagery & words.
• Use computers and related technology and software to process and produce visual outcomes for specific contexts, ensuring appropriate mode, resolution, file format and compression. You will be involved in two key activities: • Introductory exercises to familiarise you with (and provide the opportunity to undergo skills training in the use of) computers systems and related hardware and software - specific to image-making and manipulation. •
An assignment in which you will develop, manipulate and experiment with digital imagery.
You are to create a portfolio to showcase a range of imagery that you have produced through: 1. development of traditional methods (painting/drawing/mark-making/sculpture etc) - within the digital environment. This will involve you in photographing and/or scanning original source images and then manipulating the imagery within the digital domain. 2.
the use of digital photography
3.
producing ‘vector-based’ artwork
Assignment (5 weeks) You are required, in this assignment to demonstrate computer skills in the development and production of a portfolio of ‘concept-based’ digital images that visually communicate at least 4 of the following themes: Movement Energy Illusion Rage Isolation Transition Texture Nostalgia Seduction Agoraphobia Tranquillity Beauty Joy¬ Depression Claustrophobia You can work to any format and size, utilising any technique/methodology etc. The critical issue is to be as creative and inventive as possible whilst ensuring that your images communicate the intended message. Produce as many images as you can within the time allowed; experiment, take risks, challenge yourself… Use internet referencing to find tutorials to help with techniques etc. This sub-task will provide evidence for your assessment. Considerations for this assessment will be based upon: • • • • • • • • • •
Quality and depth of research Clarity of understanding of the assignment’s requirements Creative Risk-taking Appropriateness of visual concepts to the client’s business and needs Time & Project Management Degree of motivation and application Effectiveness of the communication of ideas/concepts in the context of the themes addressed Safe work practice, both in studio and computer-suite Competent use of computer-based hard and software Quality and depth of presentation
Energy is the capacity of a physical system to perform work. Energy exists in several forms such as heat, kinetic or mechanical energy, light, potential energy, electrical, or other forms.
KEY WORDS Vibrant, Zeal, Spirit, Glow, Power, Effective, Animate, Zest, Potent, Drive, Force, Alacrity, Burst, Life, Action, Pressure, Light, Movement, Dominant, Space, “Juice”.
ENERGY
DEFINITION
1. a. The act or an instance of moving; a change in place or position. b. A particular manner of moving.
KEY WORDS
MOVEMENT
DEFINITION
Progress, Mobile, Travel, Blur, Motion, Linear, Pitch, Roll, Kinetic, Stream, Slow, Direction, Speed, Acceleration, Advance, Dynamics, Position, Location, Change, Move.
A state of separation between persons, groups or objects.
KEY WORDS
ISOLATION
DEFINITION
Desert, Banishment, Quaranine, Withdrawl, Mystery, Solitude, Secracy, Alone, Ruin, Segregate, Remote, Rejection, Desolation, Aloof, Avoidance, Wreck, Exile.
ILLUSION
DEFINITION
1. a. An erroneous perception of reality. b. An erroneous concept or belief. 2. The condition of being deceived by a false perception or belief. 3. Something, such as a fantastic plan or desire, that causes an erroneous belief or perception. 4. Illusionism in art. 5. A fine transparent cloth, used for dresses or trimmings
KEY WORDS
Optical, Trick, Fallacy, Fantasy, Mirage, Miracle, Magic, Imagine, Elaborate, Guise, Rainbow, Myth, Misconception, Guess
1. a. The act of seducing. b. The condition of being seduced. 2. Something that seduces or has the qualities to seduce; an enticement
KEY WORDS Follow, Sensual, Attract, Enchant, Revel, Tantalize, Lips, Persuade, Allure, Lure, Sexual, Inducement, Temptation, Captivate, Indulge, Enthrallment, Lust, Sex, Worship.
SEDUCTION
DEFINITION
1. a. Violent, explosive anger. See Synonyms at anger. b. A fit of anger. 2. Furious intensity, as of a storm or disease. 3. A burning desire; a passion. 4. A current, eagerly adopted fashion; a fad or craze: when torn jeans were all the rage.
RAGE
DEFINITION
KEY WORDS Destroy, Anger, Fit, Red-Mist, Tantrum, Manic, Upset, Storm, Unleash, Violent Wrath, Outburst, Passion, Eyes, Emotion, Frenzy.
1. a. Intense and especially ecstatic or exultant happiness. b. The expression or manifestation of such feeling. 2. A source or an object of pleasure or satisfaction: their only child, their pride and joy.
KEY WORDS Vibrant, Zeal, Spirit, Glow, Power, Effective, Animate, Zest, Potent, Drive, Force, Alacrity, Burst, Life, Action, Pressure, Light, Movement, Dominant, Space, “Juice�.
JOY
DEFINITION
DEPRESSION
DEFINITION
1. a. The act of depressing. b. The condition of being depressed. 2. An area that is sunk below its surroundings; a hollow. 3. The condition of feeling sad or despondent. 4. Psychology A psychiatric disorder characterized by an inability to concentrate, insomnia, loss of appetite, anhedonia, feelings of extreme sadness, guilt, helplessness and hopelessness, and thoughts of death. Also called clinical depression. 5. a. A reduction in activity or force. b. A reduction in physiological vigor or activity: a depression in respiration. c. A lowering in amount, degree, or position.
KEY WORDS
Tears, Void, Worry, Misery, Dumps, Woe, Dark, Black, Sadness, Gloom, Blue, Solitude, Sink, Low, Troubled.
BEAUTY
DEFINITION
The quality that gives pleasure to the mind or senses and is associated with such properties as harmony of form or color, excellence of artistry, truthfulness, and originality.
KEY WORDS
Aesthetics, Artistry, Pink, Class, Allure, Resplendant, Jaunty, Honor, Dazzle, Grace, Delicate, Exquisite, Polished, Eligant, Pretty, Charm, Refined, Tidy, Breath-Taking, Captivating, Neat, Attractive.
The quality or state of being tranquil; serenity.
KEY WORDS Focus, Hush, Quiet, Steady, Inactivity, Meditate, Nirvana, Peace, Relax, Heaven, Paradise, Lull, Rest, Placid, Untroubled, Serenity, Ease, Poise, Composed, Restoration, Self-Possession, Still, Motionless, Calm.
TRANQUILLITY
DEFINITION
TRANSITION
DEFINITION
1. Passage from one form, state, style, or place to another. 2. a. Passage from one subject to another in discourse. b. A word, phrase, sentence, or series of sentences connecting one part of a discourse to another.
KEY WORDS
Transit, Alteration, Conversion, Change, Transmute, Upheaval, Progression, Turning Point, Flux, Start, Finish, Transformation, Metamorphasis, Passage, Phase, Re-alignment
Draw a nice thin curved filled line in Photoshop using the Pen tool. Add a glow Double click the shape layer on the right to activate the Effects. Check the Outer Glow option and play with the color, transparency,... That's basically it. I think the hardest part is finding the exact setting and drawing the exact line you want. GLOWING SPARKS Create the right brush Create a brush using the following settings. Choose the default Soft Round 21 px brush. Go to the Brushes palette and edit the following settings: Change the spacing in the Brush Tip Shape to 222% Check Shape Dynamics and change the Size Jitter to 100% Check Scattering, check Both Axes and put the Scatter to 775% Draw a random line using the brush Choose a light color that will match perfect for the glowing sparkling dots. Draw a random line using the brush. That's it ;) TRAIL OF STARS As an extra we create a trail of stars. Launch Illustrator, create a new document and draw a group of random stars using the Star shape tool. You can use a circle as a guide (draw a circle and hit command/ control + 5). Select all stars and drag them in the Symbols palette. Now select the Symbol Sprayer tool, choose the stars as symbol to spray with and draw the trail. You may need to experiment a bit with the Symbol Sprayer tool settings. Do this by double clicking the Symbol Sprayer tool in the Toolbox. If you got your trail, select all stars and go to Object > Expand. Select all stars, go to Photoshop and paste your stars as a Shape Layer. Fill them in the color you want, add some transparency or a gradient mask etc. Play around.
TECHNIQUES
LIGHT MOTION TRAILS Drawing a line
Step 1 Create a new document, I'm using my computer screen's resolution (1440x900 pixels) so I can use it as a wallpaper later. Add a new Layer and fill it with any color then go to Layer>Layer Styles> Gradient Overlay. You can add a gradient layer as well, I simply prefer the Layer Styles.
Step 2 - Retro Colors Create a new layer and fill it with white, then go to Filter>Render>Lighting Effects. Change the style to RGB lights. Use Negative 60 for the Intensity, Narrow 96 for the focus, and for the other options keep the same.
Step 3 Lets add some blur, go to Filter>Blur>Gaussian Blur. Use 80 pixels for the Radius. The last thing here will be change the Blend Mode to Overlay. Doing that the RGB color will be hardly visible but later on with the other layers it will work ;)
Step 4 - Creating Stars Creating Stars in Photoshop is something really easy. Create a new layer, fill it with black, and change the Blend Mode to Screen. After that go to Filter>Noise>Add Noise. Use 10% for the Amount, Gaussian for the Distribution and select Monochromatic. You will have a layer full of noise, then to create the start just change the levels of the layer, go to Image>Adjustment>Levels. For the Input Levels use 65, 1.00, 99. Doing that you will increase the black so just the bigger dots will appear, also you will increase the white, making the dots that appear brighter. Step 5 - Nebula Now that we have the stars and the colors and some colors lets create the Nebula. To do that create a new layer and go to Filter>Render>Clouds. Make sure that your color were black and white for the background and foreground. Then just add some Layer Styles to do that go to Layer>Layer Style. First over the Blending Options, change the Blend Mode to Overlay. After that select Gradient Overlay. use Overlay for the Blend Mode and for the colors use a Cyan, Green, Yellow, and Red. Also change the Angle to 130ยบ and the Scale to 49%. Step 6 - Lens flare First, lets create a new layer and fill it with black, however, this time, add this layer in front of the background and beneath the other layers: (Stars and Nebula). Now go to Filter>Render>Lens Flare. This effect might be the most overused ever, like some people even say that using it you wil turn your design in an amateur piece. For me it's a nice filter and, if you use it right, it will give a nice touch to your image. For the settings use 100% Brightness and use 105mm Prime for the Lens Type.
Step 7 - Rays of Light Now lets create the "A" of ray of lights. So create a new layer in front of the Lens Flare. Then select the Rectangular Marquee Tool (M) and create a rectangular selection like half of the height of the document. Use the image below for reference. After that select the Brush Tool (B). We will use a very big brush, 800px diameter and hardness 0%. Select white for the color and with just like a a bit of the brush inside the marquee (red circle) give a few clicks on the mouse button.
Step 8 Now it's just about duplicating, resizing and rotating. The tip here is convert the original ray of light layer to Smart Objects, so you will be able to resize and rotate in a non-destructive way. After you create the "A", change the blend mode of the elements to Screen and use 80% opacity.
Step 9 - Adjustments Now lets just adjust some opacities, change the the RGB light opacity to 80% and you can move the gradient overlay to test different color combinations as well.
Conclusion In this tutorial we've learned how to create a very cool light effect that we often see is some of the NoPattern designs. Of course this tutorial was just an example and now you can improve it and apply it to your needs.
These are some peices of work by Nils-Petter Ekwall. I found this designer whist looking through winners of the 2009 Digital Design Awards. He came 3rd overall but i’m in awe of his approach to these works, most of which seem to be for the Swedish and French music industry.
DIGITAL DESIGN
Nils-Petter Ekwall
Valp *Maciej Hajnrich Even if you don’t recognise his name, you’ll probably be familiar with Valp’s artwork. Characterised by bright colours and a vibrant energy, the creations of the self-styled ‘Graphic Illusionist’ are unlike anything his contemporaries are doing – and have featured on websites, Pendulum’s album covers, TV adverts and even London buses.
Neil Duerden A self confessed ‘mac monkey’, based in a rural miners cottage 20 miles north of manchester. He creates pieces that combine elements from mixed media, photography that are interlaced with complex vectors to create pieces that always hit the brief for clients all around the world. His artwork is from the heart and this passion shows through clever usage of the latest technology.
Peter Jaworowski Here is some of Peter Jaworowski’s peices of design. He manipulates images beautifully, and his expertise in Photoshop is second to none. This is only a small taste of a very large portfolio of brilliant work which features work for brands like Sony, Visa, Nike and Mercedes-Benz.
Pawel Nolbert He’s from Warsaw, Poland and he’s a great graphic designer. It’s like he’s opening Illustrator, slams down an artwork, draws it brilliantly with pen tool, fills it with gradients and swoosh! you’ve got some great illustrations… or simply practice makes better. Besides the usual graphic design part, he also helped with some of his artistic touch on sites like SensiSoft. Good looking flash site, a little bit vintage and it looks like the “little Paris” in its golden ages. He also has an interesting site.
Nik Ainley (ShinyBinary.com) Nik Ainley is a digital illustrator based in the UK. He has been producing personal and commissioned illustrations for a wide array of clients for over ten years. Self-taught, he first found his love for digital art while studying physics at university. He quickly found his interest in producing graphics on computer outgrowing that of his studies. After completing his degree he moved full time into design and illustration and has been there every since.