Inspiration #3

Adobe Photoshop CC 3D

Introduction

I examined the 3D components of Photoshop and Illustrator to add 3D effects to a recent logo. I found Illustrator difficult to achieve a perfect shape without visible surface lines and had symbol transformation performance issues. Photoshop 3D allowed smart object editable text, a timeline for light, camera and mesh animation, and GPU performance was configerable. I completed a variety of tutorials to familiarise myself with the engine and modelling techniques. Models can be exported for use in InDesign as 3D PDF, as Flash FL3 or Wavefront OBJ files, the Adobe Flex Builder platform, and directly into Adobe After Effects. A more specific platform is required for complex modelling and I began research into programs such as Blender and Unity.

Results

Development

Basic Model	Basic Model with Panorama Scene
Masking Texture Opacity	Masking Texture Opacity with Panorama Scene
Applying Images to a Texture	Combining Illustrator / Photoshop 3D / Animator

Terrain 1

Rotating Tie Fighter

Camera Tracking Tie Fighter

Terrain 2

Depth Map	Initial Model	Animation
Road Construction
Final Perspectives

Terrain 3

Discussion

Development	-Basic Model
	Paths for wing, axel and hub, deco added, 3D extrude wings and axel and rotated, hub applied to a 3D sphere, reflection and lights positioned, timeline points added for mesh rotation.
	-Basic Models with Panorama Scene
	Paths for table, table top, glass and wine added, 3D extrude, rotated, material set and duplicated, cameras centered and elliptical panorama added, camera timeline points named.
	-Masking Texture Opacity
	Added text, saved copy as inverse, applied to 3D sphere, material set and opacity set to text inverse. 3D sphere added, grouped, scaled, material set, lights and camera positioned, timeline mesh rotations one forward / one backward, and filter glow added.
	-Masking Texture Opacity with Panorama Scene
	Created stand using paths for base, curve and fasteners, added map to ground opacity mask and added water sphere, added panorama and positioned camera.
	-Applying Images to a Texture
	Added soda can object, applied UV material and set position, added camera points and light source.
	-Combining Illustrator / Photoshop / Animator
	Added Illustrator step text into Photoshop 3D and set inflation material, rendered 3 views of car, rendered a sequence of shadows, drew paths for head lights and a vector mask to blur, imported to animator and used the perspective tool for final animation.
Terrain 1	-Rotating Tie Fighter
	Added 3D post cards for surface, background and environment. Generated pyramids and path for mountain profile, rotated and set UV texture. Added tie fighter and timeline mesh positions for movement.
	-Camera Tracking Tie Fighter
	Tracked object mesh position with camera.
Terrain 2	-Depth Map
	Black brush to draw channel edges, grey to draw in roads, black / white gradient to draw terrain from each corner, gaussian blur then posterize.
	-Initial Model
	Terrain and road combined, no material properties set since depth map can't be altered.
	-Road Construction
	Top view paths for road and bridge, and profile of bridge.
	-Final Perspectives
	Two perspective views to showcase the road, bridge, and terrain height variations.
	-Animation
	Walkthrough animation highlighting perspective, above water and under bridge components.
Terrain 3	-Initial Plan
	Set Photoshop grid and snap, created paths for required elements, exported outer island paths to Illustrator and made a blend to use as the Photoshop depth map.
	-Perspective
	Extruded 2D plan elements and merged together, adjusted materials and required UV or Opacity mask settings, positioned camera and lights.
	-Blender Animation
	Imported Photoshop 3D OBJ model, applied a track path constraint to the camera and set the path to the Photoshop SVG track, offset the car to turn before the camera, exported a top down / camera view into Photoshop video sequencer for a combined GIF.

Conclusion

I set out to learn the 3D components of Photoshop for logo presentation and learnt a variety of techniques. There are many additional options such as UV painting covered in tutorials for painting faces on 3D models. Complex scenes slow down system performance significantly and it is recommended to use other more specific 3D modelling software. Logo design websites require designs in Illustrator format, an exercise with the pen tool highlighted the usability of vector based path designs. I covered the required tutorials and special effect examples and found the working environment, layers and appearance panel user friendly. This inspired me to attempt the same in Photoshop with named paths and vector masks, and has made this endeavour into 3D modelling and controllable content much easier.

...Top

References

Turbo Squid Models
Seamless Textures
HDR Textures
Blender 3D
Blender 3D Design Course
Unity Free Personal Edition
3DS Max

Inspiration #2

Adobe Flash CS6 / Animator

Introduction

I created a flash game using the table from the previous workplace communications exercise. I tested the 3D motion panel in Animator, the found the complier to be very strict. I watched tutorials on simple AS3 class games enclosing AS2 utility classes in package, and javascript notation (appendNode, childNodes), perhaps needing a class to set a depth per object plus sort the display stack. Motion paths can be altered with blur filters for expanding / contracting, also available in the properties panel. They use shape tweens via scripts also included in inDesign such as spiral 3D. Animator has by default a Tween class, which implements penners easing equations. Bounce and elastic are difficult to control, although time can be returned via callbacks or event management to achieve custom tweening.

Results

• This simple game refreshed my class based knowledge a necessity for Animator AS3
• A recent project's stage had the lights removed and glow added using noise median.
• An old 3 shelved bookcase, had a shelf removed using content removal, warp, and patch healing.
• There is no high score table or information display implemented.
• I added state machine elements in an initial attempt to simplify it.
• The Event Manager, Interval, Timeout, Tweener, Filter and Sound Manager classes need development.
• Auditing for class interaction would simplfy the code into class Head and Player.
• The fair use of content for study and / or satirical purposes is an exception under copyright law.

Discussion

Model View Controller patterns are part of the Unified Modelling Language and programs like ArgoUML export to a variety of languages. A state machine diagram can organise the sequence of events and code to its simplest form. It can model the situation rather than programming it. The code below is written in object based AS2 using events where possible, button event management is not supported. The system allows bubbling via dispatch, and a Manager class extends Interval and Timeout classes, adding instances to the Event Manager. The Event Manager class is a singleton and can be globally accessed to control sets of intervals, timeouts, and listeners, although listeners are not implemented. The tweener is custom built for multiple mcs, easing, and benchmarking via the interval class.

Some of the fundamentals behind this tweener class are debatable, the need to store a copy of begin, change and end for each movieclip in the targets array. This could achieve more control and interesting animation effects when adding and removing objects, although it is primarily a single mc tweener since tween instances can be created. I need a set of property sets, all stacked, properties within a set are currently stacked, and add a Tweener directory of classes with static moveTo glowTo that create a tweener instance and pass it back to add call backs or events.

I included returning args and propArgs, stacked properties, benchmarked and managed intervals, multiple mcs, although motion change on an mc could handle a set, and the ability to add new functionality. Dispatching events with arguments, and applying arguments to the string literal of the event at once. For instance when myTweener = newTweener(). addProp(). start() is called, I can add myTweener.propertyComplete = fadeOutComplete, or myTweener.addEventListener(Tweener.PROPERTY_COMPLETE, fadeOutComplete). The event system requires the listener to be removed while the call back system doesn't, however modern systems follow UML standards featuring Event / Trigger relationships.

Custom linear algebra could be written to add surface blurs or other photoshop effects, since Animator only supports gaussian blur. The classes I have seems to work well for now and are certainly refinable. The Filter helper class implements the blur and glow filters, with plans to create a XML file storing custom presets for all 9 filters. The FPS Control view event system works well to update displays and class listeners are updated when the controller event is fired. Developing and distributing an AS2, AS3, and JavaScript package with a yearly licence could provide a framework to cover the Adobe subscription.

Action Script CS6 Code
Tweener Class V1
Tweener Class V2

Conclusion

The AS3 Tween class provides this functionality with event listeners, although AS2 doesn't require events or the need to manage them. The inbuilt simplicity could be copied using a call back for looping, rewind, complete, on motion change and complete events. AS3 allows a single tween to be re constructed with multiple properties. It is a large research area and many open source alternatives have refined the easing equations for performance and functionality. Simple commands like glowTo(mc, value) can quicken design generation and refined forms of penners equations run significantly faster, the standard set returns NaN for a duration of 0 rather than the ending value. Many AS3 scripts are freely available for event management.

For a while i've used self contained objects to implement material design and caused many hard lessons while developing. These object systems are unplanned and lead to jumping from object to object. Further event interaction could be added, but it's better to initially create a model. It's a Java technique to create grading software that runs on one command, creating an instance of program. For the next project, I will start with a game class, and the final code will be just new Game() and list the classes. Java is about simulations and using Animator to produce products should be viewed as such, although positives and negatives and black square design should have priority.

The ASM states a graphic designer delivers a communications object which may include animation. It could be used for gifs, currently legacy in photoshop, or interactivity with wow factors to win a contract during initial client presentation. Modern media platforms allow animated text and images in two and three dimensions. Audiences thrive on interaction and require meaningful communication strategies. Designers are encouraged to expand their vision, skills and attributes to responds to the rapid technological growth in this industry.

...Top

References

AS2 Tween Tutorial
AS3 Tween Tutorial
AS3 Tween Class
Robert Penners Easing Equations

Inspiration

Find 5 things that you are inspired by.

(1) The Yin Yang Symbol

I have an identical ocean scene at my front door and find this image calming.
It represents two opposing forces in perfect harmony and balance.

https://en.wikipedia.org/wiki/Yin_and_yang

(2) Egyptian Mythology :

I find egyptian art and culture very interesting.
A large poster like this adds inspiration to any room.

https://en.wikipedia.org/wiki/Great_Pyramid_of_Giza
https://en.wikipedia.org/wiki/Sphinx

(3) "Dragon Millennium" by Peter Pracownik :

This image is in my lounge room creating a sense of spiritualism.
Peter Pracownik's website features many designs with dragons and religious symbols.

http://www.peterpracownik.com/pages/dragons-1-designs.htm

(4) Jedism :

This poster is beside my pc.
It's inspiring to see the respect and focus they have.

https://en.wikipedia.org/wiki/Jediism

(5) First Person Shooters :

"Call of Duty"

Since 2003, all 12 PC editions from the original to United Offensive, World at War, Modern Warfare, Ghosts, Advanced Warfare and Black Ops are of a high standard.  Each single player mode offers varying degrees of entertainment and multi player has changed substantially.  I found World at War and Modern Warfare to be very realistic, Ghost exciting just by the title, Advanced Warfare with jet packs the best so far, however after three iterations, Black Ops continues to rely too heavily on intelligence operation cut scenes.  The best multiplayer version was United Offensive offering tanks and jeeps, jeeps able to quickly steal a flag, and man the back mounted gun simultaneously.

https://en.wikipedia.org/wiki/Call_of_Duty

"Far Cry"

Since 2004, all 6 PC editions have gradually built in role playing elements that further increase its realism.  I enjoy the choice provided in open world environments such as climbing hills to enter a wing glider or finding a jet boat to watch the realistic spray. With a selection of weapons hunting a random outpost to disable alarms is often preferred to eliminating a group of 15 guards one by one without being spotted. Major bases probably should be avoided and awards unlock additional games.

https://en.wikipedia.org/wiki/Far_Cry

"Crysis"

Since 2007, all 5 PC editions in this series train methods of tactical combat using futuristic weaponry and armour. They include an exciting story line with highly detailed graphics and completing missions leaves a feeling of satisfaction. Attacking in stealth mode provides the edge that can overcome the enemy and armour is the last line of defence against a highly advanced race.

https://en.wikipedia.org/wiki/Crysis

I am inspired daily by my large collection of first person shooters.
These games are worlds of artwork created by design teams skilled in a wide range of technology.

...Top