Presenting a free training session on Windows 8 UX

I will present a training session on how to take advantage of charms in Windows 8 apps this coming Tuesday, February 12th at the Boston Windows 8 App Developers & IT Group.

Creating App Experiences with Charms
In this UX focused session you will discover how your users can take advantage of the Search, Share and Settings charms to enable unique integrated experiences between your app and the Windows 8 platform. You’ll also see why you should create and implement scenarios where your app’s users can integrate with other apps or services on the platform. Helpful guidelines for the implementation of charms is also included.

Posted in User Experience Design, UX Design, UX Design training, Windows 8 | Leave a comment

Photoshop 3D Tutorial and Illustrator 3D Tutorial: Wrapping patterns around objects

Recently I was teaching a team of designers about wrapping textures and patterns around objects in Photoshop.  I thought that it was useful enough to create a tutorial to help others. I teach these techniques in the Illustrator Classes and Photoshop Classes that I teach.

For this tutorial, you will need a copy of Adobe Illustrator and Photoshop. This technique can be used with any version of Photoshop back to version CS, it does not use the 3D tool, or the displace feature. It is rather simple, but you will be taken through a series of steps using masks to complete the project.

  1. Open the image of the object that you want to wrap a pattern or texture around. In this example,  I use a coffee cup.
  2. Make a selection of the part of the image that you want to select. For my selection, I use the Pen tool, but you can use any technique you want for your selection.

    My selection was made with the Pen tool.

    My selection was made with the Pen tool.

I could keep this vector path and convert it directly into a mask, but to make sure you can follow along, I will go to the Paths panel and convert this path into a regular pixel selection.

02pathtoselection

Hold down the Control or Command key and click on the path thumbnail to activate a selection from it.

3. Select Windows > Paths. There you see your Work Path. Hold down your Control (PC) or Command (MacOS) key and click on the thumbnail of the path that you see in the Paths panel. Your Pen path is now an active selection.

4. Save your selection by selecting Select > Save Selection. In the Save Selection dialog box, name your mask mymask and press OK.

03saveselection

Name your selection and press OK to save it for later.

5. Deselect by pressing Control + D (PC) or Command + D (Mac OS)

6. If you do not see your Layers panel, choose Windows > Layers.

7. Hold down your Alt or Option key and click on the Create new layer icon at the bottom of the Layers  panel. This creates a new layer, and offers you the opportunity to name it first. Call the layer MyPattern and press OK.

03b layer

Alt or Option+Click on the Create new layer button to create and name a new layer.

Creating a pattern or texture

If you already have a pattern or texture ready to use, you can skip this step. If not, I will now take you through a simple process of taking a pattern from Illustrator and using it in Photoshop.

1. If you don’t have Illustrator open, launch it now. Keep Photoshop launched as you will be pasting your Illustrator art back into it shortly.

2. Create a new document, I just use the default setting for Basic RGB, the page size does not matter, as you will just be copying a pattern out of this file.

3. Choose Windows > Swatches. We will now find some interesting patterns to use.

4. Click on the panel menu in the Swatches panel and select the following:
Open Swatch Library > Patterns > Nature > Nature Animal Skins. You can pick a different set of patterns if you would like. The pattern panel appears.

04panelmenu      05_patternlib

5, Choose the pattern that you want to wrap around your object in Photoshop, and drag it right out of the Swatches panel onto the canvas. I selected Cheetah.

Click and drag a pattern from the Swatches panel to the canvas.

Click and drag a pattern from the Swatches panel to the canvas.

6. With the pattern art still active choose Edit > Copy and return to Photoshop.

7. In Photoshop Choose Edit > Paste. When the Paste dialog box appear, leave it set to Smart Object and press OK.

Paste your copied art from Illustrator into Photoshop

Paste your copied art from Illustrator into Photoshop

8. Since this is a placed smart object you can scale it as needed. When you have the pattern sized to a scale value that you are happy with, press the Enter key to confirm the placement.

the pasted pattern in Photoshop.

the pasted pattern in Photoshop.

Defining the pattern in Photoshop

Now you will define the pattern in Photoshop.

1. Choose the rectangular marquee tool and find the repeat rectangle that is displayed in your Illustrator pattern.

2. Click and drag using the rectangular marquee to select the repeat area. Use Select > Transform to transform your selection if necessary.

Use the Rectangular marquee tool to make a selection of the pattern's repeat area.

Use the Rectangular marquee tool to make a selection of the pattern’s repeat area.

3. Select Edit > Define pattern. In the Pattern Name dialog box, name your pattern, and press OK. I named mine Myanimalprint.

Name your pattern.

Name your pattern.

4. You don’t really need the pattern anymore, simply drag it to the Trash can in the Layers panel.

Filling your layer with a pattern

You will now fill your entire layer with the pattern.

Return to your Selection tool and make sure the MyPattern layer is active, and that you have nothing selected, press Control or Command + D to be sure.

2. Select Edit > Fill and choose Pattern from the Use drop-down menu and then select your pattern, press OK. The entire layer is filled with your pattern.

Select to fill the entire layer with your pattern. You can do this with your own pattern or texture as well.

Select to fill the entire layer with your pattern. You can do this with your own pattern or texture as well.

The pattern is applied to the entire layer

The pattern is applied to the entire layer

Applying your saved selection to the pattern

Now you will apply your selection to the pattern layer.

1. Choose Select > Load Selection and select mymask from the Channel drop-down menu. Press OK, and the selection appears.

Select to load your saved selection.

Select to load your saved selection.

2. In the Layers panel, make sure that the MyPattern layer is still active and then click on the Add layer mask button at the bottom of the Layers panel. You pattern now has a layer mask that was created from your saved selection.

Your pattern may fit the selection, but might not show any shading. I usually apply a blending method to see the shading in the image below. The blending mode that you select my vary depending upon the pattern that you selected and the values in the underlying image.

1, To experiment with different blending modes make sure that you are on the Selection tool and then select Darken from the Blending drop-down menu in the Layers panel.

Change the blending mode to see the shading.

Change the blending mode to see the shading.

2. Press Shift + the arrow up or down to now cycle through all of the blending modes and see them immediately applied to the pattern layer. Pick a blending mode that works for your pattern.

Wrapping the pattern

In this next section we distort the pattern layer to make it wrap more realistically around the cup.

1. Make sure you are on the Selection tool and then make sure that you have no selection by pressing Control or Command + D.

2. Look for a chain icon between the MyPattern thumbnail and layer mask. Click on it toi unchain the mask from the layer.

Click on the Chain icon in between the layer thumbnail and the layer mask.

Click on the Chain icon in between the layer thumbnail and the layer mask.

2. Make sure that the MyPattern thumbnail is active by clicking on the left thumbnail. This is selecting the pattern, but not the mask that you made.

Click on the layer thumbnail to make sure you have it active and not the mask.

Click on the layer thumbnail to make sure you have it active and not the mask.

3.  Press Control + T (PC) or Command + T (Mac OS) the transformation handles appear.

4. Do any overall scaling that you want at this point, I am going to go right into the distortion.

5. Click on Switch between free transform… button in the upper right of the Options bar.

Warp your pattern using the presets or custom warp tool.

Warp your pattern using the presets or custom warp tool.

6. You can try some of the preset warps for your object by selecting a warp from the Warp drop-down menu in the upper –left of the Options bar, or you can click and drag on the warp directly on your image.

Notice that as you warp the image, the selection remains intact. This is because you unlinked the mask from the pattern layer.

7, Create the warp that works well for you can then press Enter to confirm.

This technique also works great when you have large areas of texture to fill in to. We have used t to make garments look .like tweed, leather and more.

Have fun!

Posted in Adobe Creative Suite, Adobe Photoshop, Adobe Photoshop CS5, Digital Classroom, Free Photoshop Tutorials, Photoshop for Fashion Design and Apparel Design, Photoshop Tutorials | Leave a comment

UX Training Classes in Boston

workshopI’m excited to be teaching another UX Training Class at American Graphics Institute in Boston on March 11-12, 2013. If you’re interested in learning more about the user experience design workflow, join me for this UX training workshop. The workshop is an opportunity to work, hands-on from concept to wireframe, on a project. Come ready to brainstorm, sketch, iterate, and more! Details are here:

http://www.agitraining.com/classes/ux-training.html

Posted in Uncategorized, User Experience Design, UX Classes, UX Design training, wireframing | Leave a comment

See DigitalClassroom.com for my new Windows 8 training content

Check out my free training video Video:Layout Grid to see how to build a great layout for your Windows 8 app.
The use of the grid in Windows 8 apps goes back to it’s inspiration from Swiss graphic design, but it also helps the designer communicate information clearly. Learn how to use the grid to design your Windows app in this video.

If you want the complete series you can subscribe to DigitalClassroom.com to access to the complete Windows 8 series as well as helpful e-books and training videos on subjects that range from business, to web, print, and interactive design.

Posted in Adobe Fireworks, Adobe Photoshop, Adobe Photoshop Books, Adobe Photoshop CS5, Digital Classroom, Fireworks, Free Photoshop Tutorials, Photoshop Tutorials, Uncategorized, User Experience Design, User Experience Design Expert, UX Classes, UX Design, UX Design training, Windows 8 | Leave a comment

Video: Design Fundamentals for Windows 8 app development

I am excited to be working on a video series that covers information about design geared specifically for UX designers and developers who are creating Windows 8 apps. This video series includes information about basic design, layout, grids, typography and more. Look for the entire series to be released soon. For now, you can see the first video in the series. Enjoy! Design Fundamentals for Windows 8 app development

Keep in mind… Microsoft Windows 8 User Experience (UX) Design Training is also available at our American Graphics Institute location in Woburn, MA.

Posted in User Experience Design, UX Design, UX Design training, Windows 8 | Leave a comment

Condensed Windows 8 UX session will lead to others

Last night I presented a condensed UX session covering 10 steps to design a better Windows 8 app. I had to cram in a great amount of information, but don’t worry if you did not get it all. The Windows 8 Meetup group is having me back in February to provide UX tips and tricks for creating successful charm scenarios for Windows 8 apps. Join the Boston Windows 8 App Developers Meetup group to receive notices of future Meetups and content.

Looking for a two day session on User Experience? I teach a UX class that is generic and applies to mobile, web, and Windows 8, at American Graphics Institute in Woburn,  MA. See UX Training course online.

Posted in Expression Blend, User Experience Design, User Experience Design Expert, UX Design, UX Design training, Windows 8, wireframing | Leave a comment

Free session: Design for Windows 8

Hello all! I will be speaking at the Boston Windows 8 Meetup group next week on the topic  “Designing successful User Experiences for Windows 8 apps.”

Come find out what makes a great Windows 8 app, and how you can start or improve your own.

See http://www.meetup.com/Windows8Boston/ for more information.

Posted in Uncategorized, User Experience Design, User Experience Design Expert, UX Classes, UX Design, UX Design training, Windows 8, wireframing | Leave a comment

Upcoming UX Classes

Here’s a schedule for upcoming public UX classes in early 2013 that I’ll be teaching at American Graphics Institute: January 28-29, and March 11-12 – both sets of dates are in Boston. I expect that I’ll also be teaching some upcoming UX Classes in NYC as well. For a complete outline, the most up-to-date dates, and additional details visit their UX Classes information page or give them a call at +1 781-376-6044.

Posted in UX Classes | Leave a comment

Photoshop Tutorials

We’ve recently released several chapters from my Photoshop Books as free Photoshop tutorials. These include tutorials Photoshop tutorials for CS5 along with tutorials for Photoshop CS6. Enjoy!

Posted in Adobe Photoshop, Adobe Photoshop Books, Free Photoshop Tutorials, Photoshop Tutorials | Leave a comment

Learn directly from the authors of the Digital Classroom Series

The incredible staff of authors/instructors from Digital Classroom, and AGI Training, are preparing for a great conference in Orlando, Florida this coming February 21st-23rd, 2013.
Digital Classroom Live
is part of the GOA (Graphics of Americas) conference, and has in-person sessions in design fundamentals, transferring print skills to web/interactive, as well as tips and tricks for creating eBooks.
The GOA 2013 Seminar Tracks include:

  • Prepress & Production
  • Digital Printing
  • Sales & Marketing
  • Management
  • Wide Format
  • Design & Creative
  • Photoshop
  • Web & Interactive
  • InDesign & Publishing

Take all the sessions you want by Registering for a Total Access Pass: Only $369 if you register by 1/31/13.  $399 After 1/31/13

Posted in Adobe Creative Suite, Adobe Fireworks, Adobe Photoshop, Adobe Photoshop Books, Adobe Photoshop CS5, Color Management Consultant, Digital Classroom, Digital Classroom Live, Photoshop for Fashion Design and Apparel Design, Prototyping, Seminar Series, User Experience Design, User Experience Design Expert, UX Classes, UX Design, UX Design training, wireframing | Leave a comment