Web 2.0 Style Graphics

In keeping with the theme of last weeks tutorial, I’d like to round out the discussion of Web 2.0 styles. Last week we took a look at using Photoshop to create Web 2.0 style text and type, while this week we turn the focus to Web 2.0 style graphics. With the emphasis on Web 2.0 style effects lately, one may ask what this has to do with photography. Well, in creating our photographs, we often like to use the web as a means of displaying them. With the myriad of cookie cutter templates out there, creating a customized and personalized web site is becoming more and more crucial if you want your images to stand out.

If it helps, think of the web as your framing process. Sure, you could hire it out. There are web designers out there that would be fully capable of creating a custom web site for you. But, if you are limited in your budget, and are like many of us, you can create a nicely polished website that will enhance your images nicely. The website in this sense represents the mat and the frame through which your clients and customers view your products.

This is not to say that a photographer should dedicate serious amounts of time to web and graphic design. Au contraire! Rather, take a default template from the likes of the Photoshop and Lightroom options you already have, and customize them with your own graphics. It’s not that difficult and can serve to take you to the next level of quality image presentations. Now, having said all that, it should also be noted that next week, I will be returning to more photography-specific tips and tricks for the weekly tutorials, so we’re not going to be stuck in web graphic design forever.

I also wanted to offer a brief explanation for the late posting of the tutorial… someone had emailed saying that the intro was producing a white line on the left side of the video. As it turns out the intro was recorded at a different resolution so I took some time tonight to correct that. The timings were a little off afterward so I had to adjust for that as well. But, it is now fixed. The reason I am saying this? The animated text has gotten a little boring. I would like to move toward a flash-based intro (the original was recorded in Powerpoint *shudder*). But, I really don’t know much about Flash. I am on day 7 of the trial version and have miles and miles to go before even grasping some of the basics. So…if any Flash gurus out there would like to do a charity case, feel free to email me – you’ll see your name up in lights, (I’ll set up a contributor tag in all future videos) and I’ll be more than happy to provide a link to your website. (Hey, it’s all about helping one another out, right?) 🙂

One final note is that Canon Blogger is now in iTunes! After some initial testing of graphics, audio, and determining what feeds best for iTunes from the blog, there’s a good working feed where you can subscribe to the shows from there. Stop in and check it out. Feel free to share your ideas on the value (or lack thereof) by offering a review. It looks like a few have found it already, but no reviews as of yet. Be the first and review the show on iTunes today! I’ll likely be adding an iTunes feed button to the sidebar tomorrow too, but in the meantime, just search for “Canon”, and I’ll be the second podcast under the “Software: How To” section, right beneath Rick Sammon’s show… it’s getting late, but I’ll try to get a link feed generated for the sidebar tomorrow. In the meantime, you can view the show directly in iTunes from here: iTunes Feed

Okay…enough of me blathering – on to the tutorial!

Web 2.o styled Graphics

Shiny Web 2.0 Text Effects Tutorial

As promised, the Tuesday tutorial is up today for viewing. The web version will be linked first, with the iPod/iTunes version for download listed second. A brief note on this – I’ve made some adjustments to the video quality, and am trying to keep the sizing consistent, so these are set to display now at 1024×768 which is the standard resolution for a 15″ LCD monitor. If you are at 15″ or higher, you shouldn’t have any problems. I’ve also added a graphic to the web flash, and cleaned it up a little more in my production software. The effect is a little more polished, but I may tweak the html a little as time permits. The PDF version of this will also be up shortly too, as the video moves pretty fast (I cover a lot of ground in this one…)

For the Wednesday Web links, since I am talking about text effects in the tutorial, it seems only fitting to mention a few resources for fonts on the internet. Here’s a couple I know of…if anyone has their own suggestions or resources, feel free to share them in the comments section. So, here’s the font sites I’ve used and heard good things about:

www.dafonts.com – Great resource for tons of free fonts online.

www.myfonts.com -If you need a professional set of fonts with a little more polish and visual appeal, some really well done ones are available here.

www.minifonts.com – This should be self-explanatory, but this site specializes in mini fonts. Tiny ones used in avatars for example, or in favicon images for websites (note the new one used for Canon Blogger – refresh your cookies if it’s a fuzzy CB logo)

Now, on with the tutorial materials:

Web Flash Version

PDF Download

[display_podcast]

Tuesday Tutorials Temptation…Trashed

Well, I came home from work today, set up the tutorial for recording (with my new preamp in place for truly the best audio recording thus far), and after a few dry runs, recorded everything with no interruption. When I went to review it, I realized that the “microphone” option in my recording software was not checked. I never recorded the audio! So, the hype and setup for the Tuesday tutorial has thus been a tease, as I had to trash it. (Doncha just love my alliteration? It literally rolls off my fingertips! 🙂 )

I will re-record it tomorrow (with audio) and finish production on it tomorrow, so it’ll be a day late this week. For the time being though, I got this question in an email from Dave in California:

Hey Jason,

Can you do a video demo on how to set up and use the ST-E2 with multiple
flashes and different light ratios?
That would really helpful.

-Michael

This is a great idea Michael, and I would love to do one – but alas, I do not have multiple flashes, nor the ST-E2. Additionally, my recording capabilities are limited to on-screen subject matter, as I do not have a video camera. I could tell you how it’s done according to some stuff I’ve run into on other sites, but that kind of defeats the purpose of preparing tips, tricks, and tutorials for you to read on Canon Blogger directly. So, I’d love to see if anyone else has the means to do so! That’s right – open audition night for CB – submit a video clip (in AVI or MOV format please) of the set up, and I can port that into the format. Naturally, the original recorder would retain all copyright, and I would be more than happy to help promote your work if you have a website.

The terrible truth about me and lighting is that I tend to prefer ambient light. I do have a 550 EX, and have used it on occasion, but am not very well-versed in off-shoe lighting techniques. I’ve read all about it and know it’s the way to go, but I’ve just not pulled the trigger (or should I say “tripped the shutter”? ) on doing much of that yet. A great resource for learning about this is one of my favorites too: Strobist, a site run by David Hobby that truly is the mecca for anyone with lighting questions. If you have a question, post it in the comments and believe it or not, you will likely get an accurate answer, usually within about an hour or so. His site is just hoppin’! Not meaning to leave you in the dark Michael, but lighting suggestions and recommendations are really out of my league. I did find something within the vicinity of an answer on SportsShooter, so check this out along with Strobist for more details.

Feel free to throw me audition tapes! 🙂 Thanks to Michael for the great idea, and I’ll be sending you an email shortly. In the interests of full disclosure, I would also like to help Michael out by offering a link up to his website – he’s got some really cool photography set up at Sage Photography. My one recommendation would be to add title tags to your header info. Each page comes up with a title in my browser of “Untitled Document.” Does not help with Google crawling…

In lieu of a tutorial, I would like to point out a key factor in the behind-the-scenes of the tutorial – stamp visible! This is a great utility in Photoshop that lets you create a new layer out of all existing visible layers that is fully editable. This is great if you want to have multiple versions of a base workup, you can create multiples with this function. The keyboard combo is Command + Option + Shift + E. (In Windows it’s Control + Alt + Shift + E). Quite a large keystroke set to remember, but it sure provides the ability to take things to the next level! I’ll show it to you in action tomorrow – I promise! In the meantime, Happy Shooting!

Friday Frenzy

Rather than the Friday follies, it was something of a Friday frenzy. I realized belatedly that next week Tuesday is New years Day, and I would be spending that time with family. So, to avoid going that long without putting out a new tutorial, I decided to put together a short one on vignetting. Since we’re all enjoying some slower times at work, and more times with family over the holiday season, I figured a vignetting tutorial might be an appropriate one given all the family and portrait shots that people are likely capturing.

So, I put together some materials for posting as a PDF, and decided to do the video-versions as well. So, in a rather rushed manner, here’s the latest tutorial from Canon Blogger. Since I will likely not be posting again between now and after the first, this is probably my last post of the year. I had wanted to get 25 in before years end, but falling only one shy is okay in my book. The other piece of exciting news is that I have finally finished the addition of a tutorial section for the website – ALL the video, PDF, and article contents, nicely assembled in one page. I’ve also thrown together some contact information, started a photo gallery section, and some other neat stuff. Many links are still not verified, but I suspect will be finished before the end of the year. Feel free to check back on your own as I’ll likely not have a chance to make that announcement directly until after the 1st. Here’s the link to that page:

Tutorial and Additional Resource Center

So… without further ado, enjoy the tutorial, linked below (I am using larger sizes that are not blog friendly, but on completion of the video, you do get bounced back here…)! Also take some time to enjoy family, friends, and loved ones for the rest of the holiday season, and I’ll resume the posting and podcasting next year! 🙂 Happy New Year all…

CB #24: Artistic Vignetting

Suddenly silent…

Hello to the possibly dozens of viewers of Canon Blogger. I must first apologize for the suddenly silent turn the blog took these past four or five days – after Saturday’s shoot, I had a few days of rather nasty flue-like symptoms. Hopefully no one was waiting on baited breath to hear the next words I utter online or in video podcasts. Anyway, I think I am in the clear now though, so have ventured out of my cave and back to the microphone. Yup, my Tuesday tutorial got pushed back to Wednesdays. I know…it’s not like I’ve been too consistent in publications thus far, but that is something I would like to change. Ideally, I would have a scheduled theme to each of my weekly posts. One that has been buzzing my head as been along these lines:

Monday – Minutiae – trivia relating to photography

Tuesday – Tutorial – video podcast released showing the latest tip/trick in Photoshop

Wednesday

Thursday – Thoughts – My chance to wax philosophic on whatever photography discussions have been on the hot plate for the past week. I bet y’all are standing in line to hear that one, eh? 🙂

Friday – Follies – Fun silly stuff to wrap up the week…perhaps a joke or two, maybe a reference to a particularly funny comic (What the Duck comes to mind, as does Dilbert).

Anyway…just a new format/schedule I am toying with. If anyone has ideas, suggestions, or thoughts on tweaking that based on what you would like to hear/read/listen to, feel free to email me. My address (as always) is jason <AT> canonblogger <DOT> com.

But, enough of all this logistical stuff, what you want is tutorials, right? Alrighty then – here’s this weeks installment:

Rounded Corners (a.k.a. Web 2.0 graphics)

Rounded corners on graphics are really the mainstay of the “Web 2.0” movement, so I figured it might be helpful to show a nice and easy way to apply a rounded corners effect to your images. It’s a little bit longer of a tutorial today, going upwards toward 5 minutes, as there’s some other news that I’ve shared in there as well. Rather than spoil the surprise, it’ll suffice to say here in this context to be on the lookout for a new link soon with just tons of content, with videos, PDF support documentation, and relevant attachments like actions and lots of other fun stuff.

Anyway, without further ado, here’s the Rounded Corners video, first in Flash, then in Quicktime format! 🙂

Notes in Pictures

Good morning all – fast breaking news as I have an extra tutorial this week. I was working on my portion of a collaborative project last night and saw a note pasted into the picture for me as a reminder of some rather important settings for the layer masks. It reminded me of the usefulness of making notes and saving those with the pictures! You can make text notes or audio notes with this feature, so check it out at your leisure. I’ll link to the dedicated page for now, and upload a flash version when I get home later today. In the meantime, enjoy!

Notes in Pictures

Whitening Teeth

While it’s not the most glamorous thing in the world, when we do portrait work, a lot of the post process focuses on minimizing flaws and maximizing peoples assets. Part of this process can include giving a little more polished look to people’s teeth. Today, I walk you through the process of how to do this in Photoshop. It’s pretty straightforward, but a very useful skill to have regardless. Anyway, give it a try after watching the tutorial, and in the meantime, feel free to share your thoughts on the podcasts thus far either via email or the comments section. I’ve also published an article in m previous post that explains various settings for apertures and shutters to achieve the best composition in your photography, so check that out too.

Fair warning on the tutorial this go around – I think I have the format issue figured out for those on Macs and to increase the portability factor, but these files are pretty big (.mov format), so it may take a while for you to get these downloaded. I will still have the flash as an option for web viewing, so feel free to view online and download for playback later at your convenience. Since iTunes picks up the first uploaded attachment, the Quicktime version will appear first. The flash-based version is right below that though, so pick your poison. Let me know if either of these doesn’t work for you. Thanks and looking forward to the feedback on this one! Have a good night and happy shooting!

Link to Quicktime format for downloading: Whitening Teeth

Creating re-sizing actions in Photoshop

For those who like to create actions for their own work flows in Photoshop, I’ve created a set of re-sizing actions that I use pretty regularly to resize image from their camera raw settings to either 800px or 600px on the longest side. It took a bit of manual, but simple math, and then some tedious manual size adjustments, but the results are far better than anything you would get from a one-stop adjustment tool (unless of course it’s another action). If you’d like to see the completed action, just drop me a line and I will be happy to share the action on an as-requested basis. Thanks again for tuning in, and enjoy the podcast!

Watching paint dry…creating worlds

Today as I entered the final stages of my home projects (2nd coats of paint), I proceeded to enjoy some Sunday football as the paint dried. Not being one to sit around much lately, I kept the TV on in the background and looked around for something else to do on the project list. Since I was waiting on the last coat of paint to dry, I was left to either watch football, watch paint dry, or create a new tutorial. Creativity won out, so here’s the latest installment for the video tutorial series…creating globes via special effects in the program we all know and love – Photoshop! Enjoy, and I’ll post back later this week with the series of home improvement projects I’ve been working on so much lately.

Special Effects Globes