Archive for the ‘Technical’ Category

PhotoShop Tip: Using Actions to Resize Images

13Aug

My-Actions1As an artist, one of the most useful tools in my digital arsenal is the Actions Palette in PhotoShop.  An Action is a way to record a sequence of frequently used operations that you can save and play back on other images, or on an entire folder of images at once.

This one tool has saved me countless hours of time that I used to spend doing repetitive tasks to the digital images of my art — such as resizing them, making image adjustments, and creating thumbnails.

The following is a step by step example of recording an action on one typical image to resize it, add a watermark, and save it as both a PhotoShop file and for the web; then I’ll explain how, with a few clicks, you can use that action on entire folders of images.

Preparation

Make sure that you have prepared all your source images: that they have been neatly cropped, color-corrected and saved with meaningful filenames.  I find this whole process works best when I name my images by their title, and save them in folders named for the image size, type and purpose.

To be sure you do not write over your original high resolution images, before proceeding further, create destination folders for your various desired image sizes and types, such as “Website PSDs,” “Website JPGs,” and “Website Thumbs.”

Recording an Action

New-Action1

  1. Open one of your typical source images.
  2. On your Actions palette, click on the tiny down arrow and 3 horizontal lines at the upper right, then click on “New Action…”
  3. Give your action a meaningful name, then click “Start Recording.”  PhotoShop will now record the whole set of commands you perform on your image, until you tell it to stop.
  4. Click on “Image,” “Image Size” in the top main menu, make sure “Constrain Proportions” is checked, and type your desired width in the width box; then click “OK.”
  5. To add a watermark, select the Type tool, set your desired color, font, font style, size and alignment. Click on your image where you want the text, then type your watermark text.
  6. You may then want to style your line of text, perhaps changing the opacity and adding a light drop shadow.
  7. Next, click on “File,” Save as…” and save the file in your desired folder.  Do not change the filename, as that will cause problems for you when you run your actions on other images.
  8. Export using “Save for web.”   I generally find the “JPG High” preset options to be a good trade-off between size and quality for web images of artwork or photographs.
  9. You could continue to resize and crop your image to create thumbnails or you can stop your action at this point.  To stop it, click the square “Stop Recording” button on the bottom of the Actions palette.

You now have your first custom action.

Running an Action

Automate-BatchTo use the action, make sure the correct action is selected in the Actions palette, then click on “File,” “Automate,” “Batch…,”  choose your Source Folder, and click “OK.”

As long as you included your destination folder(s) for your new smaller files when you recorded your action, you can just let the action run until it has processed your whole folder of images.  And that’s it!

Going Forward

PhotoShop Actions are very powerful time-savers.  Play with them a bit to discover the best sequence of useful steps for your images.  It may not be long before you have created a whole library of your own actions.

There are also many preset actions that you may find very useful (or just fun to fool around with).  Should you run into any problems using Actions, you can find out more detailed information in the PhotoShop Help files.

If you haven’t been using Actions for preparing your digital image files, I think you will find them to be really quite invaluable.

Did you find this tip useful?

Tags: , ,
Posted in How-to, Tips | Comments (1)

Site Tested Cross-Browser — Known Issues

15Jan

I’ve tested this site in many browsers and on several platforms, and for the most part, everything works as it should.

Tested and all is well:

  • Platforms: Windows Vista, Windows XP, and Windows 2000:
    • Firefox 3.05
    • Internet Explorer 7
  • Windows Vista:
    • Google Chrome 1.0
    • Opera 9.63

Tested with a glitch or two:

  • Safari 3.21
    • fonts on nav bar less tall than on other systems, leaving gap below on hover
  • Opera 9.25 on Windows Vista:
    • weird anomaly on portfolio hover images wherein all images seem to display at once — very dizzying
    • text links on portfolio pages do not work
  • Internet Explorer 6 on Windows Vista (tested through IETester):
    • hover on navbar buttons does not work; alternate links provided
    • hover on portfolio images does not work; alternate popup versions provided (but with less information)
    • javascript “onclick window.open” script opens window with no Flash animation
  • Internet Explorer 8 (beta) on Windows Vista (tested through IETester):
    • text in large portfolio image (on hover) does not appear
    • right box border containing large portfolio image (on hover) too far to the right
    • on-page links on FAQs page do not work
    • javascript “onclick window.open” script causes web design portfolio page not to show
  • Netscape 7.2 on Windows Vista (because I could):
    • bottom row of Illustration portfolio thumbnails extend slightly past containing box

Tags: ,
Posted in Technical | Comments (0)

Testing Image Galleries

13Jan

I am pretty happy with how my image galleries came out.  I knew exactly what I wanted: a small set of thumbnails arranged in rows and columns that, when you roll over them, a large image appears elsewhere on the page.

I found a very elegant way to do this, using an unordered list, spans and hovers, and absolute positioning in CSS.  It allowed me to display all large images in the same location when you roll over a thumbnail.  Only, I wanted to add more than one line of text to the hover image, so I would have needed to use a break, which would invalidate the page, as breaks aren’t allowed within list items. And paragraph tags aren’t allowed within spans.

I had to give up on using the elegant unordered list, and ended up assembling a way to do exactly what I wanted with nested divs, spans and hovers.

Only then I couldn’t get my emulation of IE6 to recognize the large images on hover!  It’s always something!   And if it’s trouble, you can bet it’s usually caused by Microsoft.  Sigh!

Finally I found a small JavaScript tutorial with CSS that was easily added to my existing code (yes, I had already coded all my portfolio pages before discovering the anomaly with IE6!).

This pops up a window with the large image when the thumbnail is clicked, for those 26% of folks still using IE6.  Can’t ignore them, you know.

Probably not the most lovely solution, but see what you think.  I have installed the script on the Web Design Portfolio page.

After you look at it, please head on back here, and let me know if you like it, hate it, if it doesn’t work for you, or if you know of a sleeker solution!  And if you wouldn’t mind, please let me know what browser you’re using on what OS (always helpful).

Thanks!

Tags: , ,
Posted in Technical | Comments (2)

Machines: 1; Human: 2 — I Win the Battle of the Code!

13Jan

Sometimes, the best thing you can do when your eyes are bugging out of your head from staring at the same damn code hour after hour, day after day, while the solution to a tiny niggling code alignment issue still escapes you — is quit. Step awaaaay from the computer, have a great dinner and conversation with your sweetie, drink some beer or wine (or both), watch The Daily Show and the Colbert Report, and then get a good night’s sleep.

In the morning, suddenly it becomes clear.

As did my footer alignment issue this morning when I took a fresh look at the code. Duh! Of course, the way I had originally coded it was pushing it out of line, but I just couldn’t see that yesterday, after it seemed to break once I corrected my missing div. After days of it appearing perfectly correct (while the pages wouldn’t validate), I was just so anxious to be done with my new design already!

And now, I am very nearly done! Woo-hoo!

Immovable object, meet irresistable force!

Tags: ,
Posted in Technical | Comments (0)

Designing for Internet Explorer Browsers

12Jan

Whenever you design a website, whether you start from scratch or you are doing your own design in WordPress, you have to take the non-compliant browser IE6 into your design considerations — at least for a while longer. The latest stats from Browser Stats show that use of IE6 has dropped to less than 20%. But your beautiful tiny (hopefully) proper code will look crappy in IE6 if you don’t incorporate workarounds to make it look good. All of which is documented extensively elsewhere on the web, of course.

IE7 is better, but not perfect. It got up to about 27% of market share a few months ago, but is dropping slightly again.

Microsoft has finally given in to creating a standards compliant browser with IE8. I’ve tested it a tiny bit, and so far, my sites look the same in IE8 as in all the other (good) browsers. Yeah! I’m looking forward to the official release; maybe then IE5.5 and older can finally die their long-overdue deaths.

I’m officially giving up forever on IE5.5 and earlier IE browsers. Yes, 3 or 4 people per month still visit my old design site using that horrid excuse for a browser, but at some point, it’s just not worth the many extra hours to code for. Sorry, you IE5 hangers-on! I’d really rather paint or learn something new. And really, no offense intended, but there are many excellent browsers to choose from that work very, very well. I have FOUR on my desktop that are great, and 2-3 additional ones that are better than IE5.5 and IE6.

Here are links to some of the best browsers — all FREE!:

Alas, an old favorite, Netscape, is gone for good (except for the legacy versions still installed on some of our systems :) ).

Tags: , , ,
Posted in Technical | Comments (0)