Kids Media Centre engages kids in the technology conversation

I dropped by my former stomping (er, teaching) grounds last week to say hi to my many friends at Centennial College’s School of Communication, Media and Design. And while chatting with the Dean, Nate Horowitz, about my role here at Adobe, he suggested I call on Debbie Gordon, the Director of the KidsMediaCentre at Centennial College. Debbie and I had a great chat about digital readiness in public schools and she shared with me the KMC’s new blog, just hot off the digital press last week.

The kidsmediacentre is an industry and creative content think tank at Centennial College’s Centre for Creative Communications.  Working alongside Centennial’s Children’s Entertainment Program, they research kids’ relationships with 21st century media and connect their students with industry partners to help incubate and produce the next generation of children’s entertainment and media. Their hope is to engage kids in assessing the worth and contribution of a media product or idea: what works for kids and what constitutes a good idea and value proposition for the industry. One of the kidsmediacentre’s main goals is to help bridge that gap.

Based on what I read on their site, it’s working.

The kids aren’t just listening and learning; they’re involved in the conversation. You’ll see some of their contributions on the KMC site, in a section called the Kid’s Panel. Broken into three age categories, 4-8, 9-15 and 16-19, these kids test out a review a wide variety of media and technology, from games to music, books to eBook readers, iPhone Apps to software reviews on products like Adobe Photoshop. And the reviews are remarkably on point, honest and act as a window into how kids see certain aspects of the world. I found the Kids Panel blog posts refreshing.

For example, the review on Photoshop  (Bella checks out Photoshop) examines some pretty savvy points about self image and our culture – from a 15 year old!

In the 4-8 category, 6 year old Salmah checks out the book, The Missing Piece, which was read to her class by her teacher (Gosh, I still remember those days…), and summarizes that “… it is good to keep going. When you keep going, you can learn more things.”

There are reviews of music and politics, among other things, in the 16 – 19 category. 16 year old Ian gives a very knowledgeable review of the Miles Davis album, On Green Dolphin Street.

I was impressed by the insight provided by these young people. And I think you will be, too. These are not kids who are just blindly using technology; they’re engaged, aware and see technology for what it is – a tool to help extend creativity or productivity or personal growth, not a replacement for the passion that makes those things possible in each of us.

Amazing Photoshop Touch Technique

Russell Brown thought up a great Photoshop Touch hack that is just too darn cool! Check out this short video on how to use Photoshop Touch and a flashlight to create some AMAZING lighting effects.

 

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… 

Adobe MAX 2011: an education perspective

MAX 2011 and pre-MAX sessions such as the full-day Education Summit gave educators many opportunities to learn from the industry, from Adobe and from each other.

The room fills up quickly as doors open for the first keynote

The room fills up quickly as doors open for the first keynote

Having been a teacher in Higher Ed for 20+ years, it’s natural for me to look at events like MAX with an educator’s eye. This is a perspective I hope I never lose, to be honest.

While MAX is a great networking occasion for professional designers and developers, it also gives teachers a chance to some important networking as well. They have the opportunity not only to learn new tips and techniques, but to talk to the people working in the industry, learning what skills are used, and what ones may be lacking. I think this is invaluable information; gaining this knowledge can help immensely when planning new courses, or updating existing ones to be more relevant.

The keynotes and sessions revolved around a major theme of Change, in my opinion. In the keynotes, Adobe continued to remind the industry that they are aware of – and actively involved in  - changes in the marketplace and user trends. Continue reading…

Publish Photoshop 3D layers to PDF

In my last tutorial I showed you how to take an image and apply that image to a 3D object in Photoshop. In this tutorial I will show you how to publish a 3D layer to PDF.  Anybody with Acrobat Reader will then be able to interact with your 3D object.

 

  1. Create a 3D object in Photoshop (tutorial here)
  2. Right click on the 3D layer
  3. Select Export 3D layer
  4. Name the file and select U3D from the Format dropdown menu
  5. Click the Save button
  6. The 3D Export Options dialogue box will open.
  7. Make sure that JPEG is selected from the Texture Format dropdown
  8. Use ECMA1  for the U3D Options

 

The steps above exported the Photoshop layer to a U3D file.  The U3D file can now be published to PDF.

 

  1. Open Adobe Acrobat X
  2. Select File>Created PDF>From File
  3. Browse to the U3D file you saved earlier
  4. An Insert 3D dialogue box will open.  Select OK (You may want to check out the “Advanced” options by clicking on the Show Advanced Options check box.  There are some neat options to play around with).
  5. Click on your 3D object to interact with it.  Also notice the 3D tool bar that appears.

Cool!  Now anybody with Acrobat Reader can view your 3D content!

Use Your Imagination and Win $10,000!

Adobe has launched Adobe & Imagination Challenge, a new contest for students 15 years of age and older, encouraging them to show off their creative abilities with Adobe Creative Suite® 5.5 software products. Individual students who submit their creative pieces will have a chance to win $10,000. First prize winners in each of the four weekly judging sessions, and the grand prize winner, receive a $10,000 prize and will have their work showcased on Adobe.com!

Work must be submitted online, where it will be featured for fellow students to vote on. The pieces will also be reviewed by a panel of professionals — including DeadMau5, Jake & Amir, Rivers Cuomo, and Scott Dadich — who will select the top 10 finalists for each of the weekly judging periods. Students in North America can submit entries from August 21 to October 15, 2011, for weekly judging.

Let your students know about this rewarding opportunity to express themselves and show off their talents with CS5.5 tools.

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…

Build a 3D Planet in Photoshop

Imagine a satellite traveling thousands of miles into space, flying around distant planets, snapping pictures of their surfaces, and returning the images to Earth.  Well, it has been done, and the images are amazing (Thanks NASA).

What is even more amazing is that you can find the images using a simple Internet search (keywords:  Jupiter, surface, map) and wrap them around  3D objects created in Photoshop!

This makes for a great student project.

Here is how…http://youtu.be/uqQ9TTALw7U 

In my next tutorial I will show you how to export the 3D layer to an Acrobat PDF file.  This will allow mom, dad, or another student to view and manipulate the 3D object using the (free) Acrobat Reader.

 

 

 

 

 

 

 

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…