Posts in Category "Tutorials"

New Education Training Schedule just Announced for Spring 2014

exchange

 

 

 

 

Beginning this week, Adobe Education is providing free webinars specifically designed for educators. Please share the news with your colleagues and join us. Topics include Creativity in Education, Indesign, Illustrator, Acrobat, Animation, Creating Forms with Adobe FormsCentral, Dreamweaver, and Edge Animate.

All times are Pacific Standard Time and run through May 21, 2014

Unleash creativity on your campus with free, online professional development from Adobe.

March

March 2nd – April 19th                  Course: Creativity in Today’s Classroom

http://edex.adobe.com/pd/course/creativity/

March 12th @ 8:00 am                  Webinar: Beginning InDesign for Education

http://seminars.adobeconnect.com/edu_id1/

March 12th @ 3:00 pm                  Webinar: Advanced InDesign for Education

http://seminars.adobeconnect.com/edu_id2/

March 26th @ 8:00 am                  Webinar: Beginning Illustrator for Education

http://seminars.adobeconnect.com/edu_ai1/

March 26th @ 3:00 pm                  Webinar: Advanced Illustrator for Education

http://seminars.adobeconnect.com/edu_ai2/

April

April 9th @ 8:00 am                      Webinar: Beginning Acrobat for Education

http://seminars.adobeconnect.com/acrobat1

April 9th @ 3:00 pm                     Webinar: Advanced Acrobat for Education

http://seminars.adobeconnect.com/acrobat2

April 15th – May 27th                    Course: AdobeGenPro – Animation

http://edex.adobe.com/pd/course/agpanimation/

April 23rd @ 8:00 am                   Webinar: Beginning FormsCentral for Education

http://seminars.adobeconnect.com/edu_fc1/

April 23rd @ 3:00 pm                   Webinar: Advanced Formscentral for Education

http://seminars.adobeconnect.com/edu_fc2

May

May 7th @ 8:00 am                       Webinar: Beginning Dreamweaver for Education

http://seminars.adobeconnect.com/edu_dw1/

May 7th @ 3:00 pm                       Webinar: Advanced Dreamweaver for Education

http://seminars.adobeconnect.com/edu_dw2/

May 21st @ 8:00 am                      Webinar: Beginning Edge Animate for Education

http://seminars.adobeconnect.com/edu_an1/

May 21st @ 3:00 pm                     Webinar: Advanced Edge Animate for Education

http://seminars.adobeconnect.com/edu_an2/

Adobe Illustrator’s Pattern Tool

Adobe Illustrator’s Pattern Tool can  quickly add spice to the background of your project.  In this case, I used it to create the horizontal stripes making up the background of this infographic.

pattern_background

Check out this YouTube video for a short tutorial on how to use the Pattern Tool.

 

Scott Trudeau
www.scotttrudeau.com 
Solutions Consultant, Adobe Inc.

Follow me on Twitter!
https://twitter.com/scott_trudeau

Use Adobe Illustrator’s Blend Tool to Help Build Infographics

You can use Adobe Illustrator’s Blend Tool to quickly build columns and rows of icons.  This is great for creating infographics.

Check out this quick tutorial!

Illustrator's Blend Tool

…and another quick tutorial that provides  additional tips for blending colors and duplicating columns.

blend tool

Now Available: New eBook on Fireworks’ CSS and jQuery Mobile features

Using the CSS3 Mobile Pack for Adobe Fireworks CS5

Using the CSS3 Mobile Pack for Adobe Fireworks CS5

If you’ve found yourself wondering how Adobe Fireworks can fit into your web and mobile design workflows, or how you can introduce students to a visual method of designing for mobile, I may have just the thing for you.

Today, my new eBook, Using the CSS3 Mobile Pack for Adobe Fireworks CS5, went live at http://www.peachpit.com/.

While there are already a couple good how-to tutorials available at the Fireworks Developer Center, I wanted to take a deeper, more practical approach to this new extension. I wanted to go beyond the how and hopefully address the why. I walk you through the basics, but then I move you to a realistic application of the extension. You will learn about both parts of the CSS3 Mobile Pack:

  • CSS Properties Panel
  • jQuery Mobile Theme Builder

CSS Properties Panel

In the chapter on the CSS Properties panel, for example, you’ll be doing more than simply exporting a rounded corner rectangle as CSS3 mark up; you will be taking a completed web page design and – using Fireworks and a Dreamweaver HTML5 starter page layout – building a standards-based web page, complete with navigation, semi-transparent content areas and stylized text.

Final web page design that matches the original Fireworks mock up

Final web page design that matches the original Fireworks mock up

The only bitmap in the page is the background image. And it was all done with a minimum of coding. Maybe it’s just me, but I think that’s pretty cool.

jQuery Mobile design, mocked up in Fireworks, then exported to Dreamweaver and previewed in Device Central.

jQuery Mobile design, mocked up in Fireworks, then exported to Dreamweaver and previewed in Device Central.

jQuery Mobile Theme builder

In the chapter on the jQuery Mobile Skinning, you will study and work with the jQuery Mobile template file, also part of the CSS3 Mobile Pack, and learn how to customize an existing skin and export that new mark up over to Dreamweaver to quickly create a simple, customized mobile web site.

Time-saver in production and in the classroom

Whether you are comfortable with code or not, the new tools in this extension can be a creative and time-saving boon.

A designer  can export out standards based mark up, which can be further edited and tweaked by a developer in their preferred web page editing environment. Or if the designer wears both hat, he or she can move quickly from a visual design to realizing that design in HTML and CSS. I think this is a great example of Fireworks bridging the gap between designers and developers.

And for students learning the craft of web and mobile design, it gives them the opportunity to create their design first, and then see how that design becomes converted to code. Or, depending on the design itself, learn about the limitations to be aware of when building a standards-based design that targets multiple devices.

Either way, it’s a win-win.

Final thoughts

The fact that the extension is also FREE is another bonus. I think it’s pretty cool that Adobe released this extension now, rather than making anyone wait for the next version of Fireworks.

If you’re interested in the ebook, it’s available for less than $6.50 USD at http://www.peachpit.com/. Feel free to follow me on twitter @JimBabbage. If you’ve got questions, that’s a great place to find me.

 

Tutorial Magic – Adobe Tutorial Builder

Adobe “Tutorial Builder” is like the “Harry Potter” of tutorial applications! This amazing application from Adobe Labs magically records your Photoshop knowledge into slick tutorials that can be shared via iPad.  So…what’s so magical about it?  Press the instructional link on the iPad and it will demonstrate the referenced step in Photoshop.  This instructional hocus-pocus creates a communication channel between your tablet and a computer running Photoshop using the TouchSDK.

Tutorial Builder looks like a great application to add to your instructional “charm bag”!

Try it out… 

Fireworks Mobile Design Tip: Batch Processing app icons in Fireworks

In the previous post, I talked about using Fireworks to create multiple application icons for an Android device, and then how to export those multiple icons as individual flat files.

In this post, we’ll look at how to batch process those larger images into three different sizes, and how to automate that process for future work. The original icons were created quite large – 244 pixels square, to be exact. This made it easy to be very detailed when creating the look of the icons. And while this is useful from and editing and creative perspective, the project requires three sets of smaller dimension icons for an Android application.  Well, Fireworks excels at this type of workflow and produces very small files to boot. Continue reading…

Fireworks Mobile Design Tip: Exporting Layers to Files

In July of 2011, I presented a Fireworks session at D2WC called Wireframing and Prototyping for Mobile using Adobe Fireworks. I was so pleased to see a very full room of attendees. Even happier to note that many were not current Fireworks users.

Yes, I did say happy. The reason is simple. I want people to know what they’re missing out on. :-)  As you might be noticing, I’m a big Fireworks fan. Huge, even.

My original goal with this session was to focus on some sample prototypes and wireframes, but based on the crowd and many of the questions fired at me, I changed the slant slightly and talked more about how many of the Fireworks built-in features are designed to save you time, without sacrificing quality. Time is money as they say. Projects are quoted on estimated number of hours, so the sooner you can complete a wireframe or a prototype, the sooner you can move forward to actually wiring up the actual application, and the happier everyone is.

The sooner students can learn how to achieve optimum results in less time, the more employable they are.

As usual, I had way more content than I needed or had time to use, so I’ve posted the files (including brief slide deck, a couple tutorials and LOTS of assets) on my web site.

Aside from using Fireworks pages to mock up wireframes and prototypes, FW also has many other built-in features that can really help with any kind of prototyping, especially mobile.

A couple things I really wanted to get to in my session but ran out of time were:

  1. Exporting layers to files
  2. Batch processing for mobile

In this tutorial we’ll look at exporting layers to files.  I’ll also be releasing a new tutorial that will cover batch processing the new files created from this tutorial. Continue reading…

Abracadabra! The Green Screen Magic of Premiere Elements 9

Adobe Education Leaders (AELs) in front of a portable green screen

Adobe Education Leaders (AELs) in front of a portable green screen

If you’ve ever been to famed Las Vegas, Nevada you may have had the pleasure of seeing one of the many fantastic Illusionists preforming their incredible magic there. Several years ago I had the fun opportunity to see world famous illusionist David Copperfield in action at Cesar’s Palace along with my wife. During one of David’s sold out performances I was one of twelve lucky audience members who was picked by him to come up on stage to take part in one of his tricks. After entering a strange transparent on all sides box like contraption with the other volunteers the contraption exploded with a bang into flames, fireworks and flashing lights! I suddenly “disappeared” along with the eleven other audience members to the simultaneous loud gasp from hundreds of people watching the trick from their theater seats. To my amazement along with the other eleven people who disappeared with me we all had a big laugh together when we realized how David actually made us disappear – it was incredibly simple how he did, but from the perspective of the people watching the trick out in the theater it was astonishing.

Before we were made to reappear in the magic box and be reunited with our friends and loved ones David appeared in person back stage with all of us! David quickly told us he would give each of us a personalized autographed photo of himself in exchange for our life-long swearing of total secrecy of how he did the trick. All twelve of us happily agreed and promised David we would never ever tell anyone how he did this trick; to this day fifteen years later I never have – even to my wife or kids who have begged me repeatedly to divulge all. So what does this have to do with Premiere Elements? – read on.

What’s interesting is some of the earliest silent film makers were previously stage magicians before they hand cranked a film camera. In fact one the earliest projection apparatus even before film cameras and film projectors were invented was called a “Magic Lantern,” a tin lamp-like device with a concave mirror, lens and an oil lamp or candle inside of it which was used as the light source to project a still image on to a screen or wall.

We’ve come a long, long way since the eras of the early stage magicians and first film makers who magically made things disappear and reappear on their limelight lit stages or in their early hand cranked films shown in picture palaces. In the case of the silent film makers to make say an actor magically disappear or appear in a scene it simply came down to scratching the actor’s image out of the nitrate film with a sharp blade.

In this digital age we are all a part of right now we are stunned by the digital CGI (Computer Generated Imagery) magic of the likes of James Cameron’s award winning film “Avatar,” or a flim like I saw last night; Rise of the Planet of the Apes and other amazing movies and television series that use state-of-the-art 3D techniques, or compositing tricks to create the illusion that different elements are all parts of the same scene to make things magically disappear or reappear in scenes.

Now you might be thinking to create this same kind of CGI magic for your own movie projects is not only super expensive, but most likely really hard to do – not at all. In fact with Premiere Elements it is as simple as shooting two clips of video, dragging & dropping them into Premiere Elements timeline and then clicking the mouse just once to achieve the same kind of CGI compositing magic of a James Cameron or making things appear or disappearing like David Copperfield on a live stage. Note in Premiere elements we call this cool trick “Video Merge,” but it also goes by a few other names like: Blue or Green Screen, Chroma Key and Compositing.

I’ve created two short Adobe Captivate screen capture demonstrations of how to do a basic Video Merge effect with Premiere Elements as well as a bit more advanced features and posted the demos to YouTube. Check out Part 1 or Part 2 (links below) to learn how you too can become a CGI magician in just a few mouse clicks using Premiere Elements Video Merge!

Part 1: Movie Magic with Adobe Premiere Elements Video Merge

Part 2: Creating Video Merge effects with Adobe Premiere Elements

Adobe InDesign – Path Animation

Adobe InDesign is no longer “just” a desktop publishing tool; it has turned into a full-blown multimedia machine!  As a former teacher and educational technologist, I highly recommend adding InDesign CS5 to your instructional technology tool bag.

The following tutorial demonstrates how easy it is to build path animations using InDesign CS5.  Imagine how much more engaging a lesson on diffusion would be if a student could animate the process rather than simply read about it!

Video 1 – Learn how to create a simple path animation using InDesign CS5


Video 2 – Create a path animation and add duration and timing settings

Prolific Powerhouse People: Teacher, Mike Skocko and the Mac Lab

Mike Skocko Keeps learning exciting and in balance in his Mac Lab

Valhalla High School teacher Mike Skocko keeps learning exciting and in balance in his Mac Lab.

 When it comes to learning Adobe software and technologies there is a fantastic cornucopia of terrific choices out there: great books, in-person seminars, online webinars, weekend hands on intensives and much, much more. I’m a visual learner so when it comes to my own way of learning Adobe tools I tend to gravitate towards one of the super online video offerings from companies like: KelbyTraining.com, VTC.com, TotalTraining.com, AtomicLearning.com, Lynda.com or our very own Adobe TV.

With the exception of Adobe TV mentioned above all of these training companies offer deep discounted education pricing to educators who subscribe to their offerings and in my humble opinion they are a super value. But what if I told you there is another source of terrific online video training available on Adobe tools and to access the videos it won’t cost you a dime?

Enter amazing prolific powerhouse Mike Skocko (pronounced skotch-ko) of Valhalla High School in El Cajon California who has produced and posted over 3,000 online video tutorials (no that’s not a typo – 3,000 and counting!) covering a wide range of Adobe tools and technologies. Best part, they’re totally FREE to watch and learn from. In fact Mike already has close to 300 videos on many of the current Adobe CS5 tools posted online and adds new ones daily.

Mike stated to me recently (and in the most humble way) he would have had near five hundred videos posted on the Adobe CS5 tools by now but since he was recently derailed by being accepted into Adobe’s Education Leaders (AEL) program and simultaneously started work on a Masters Program along with his fulltime teaching duties at Valhalla High, he’s only been able to add one video tutorial post per day. One per day!?  Five per week!?  Twenty per month!? Are you kidding me Mike!? I’m lucky if I can find the time to write three blog posts here on the Adobe Education Technologies Blog per month! So now dear blog readers you know why Mike has been picked by me as a Prolific Powerhouse Person here on our blog.

I encourage you to check out Mike’s excellent videos on Adobe’s software tools and share this great and free learning resource with your students and education associates far and wide.

The Mac Lab’s Online Adobe Software Tutorials can be found HERE.

Check out a cool interview Mike conducted with one of his former Students HERE.