Bernskiold Learning

Upcoming Webinar: From Photo to Composite with Glyn Dewis

Erik Bernskiold — Mon, 15 Aug 2011 10:51:43 +0000

Today I want to tell you about an upcoming webinar at Bernskiold Media called “From Photo to Composite” with Glyn Dewis on September 4th at 3 p.m Eastern Time. Glyn is a very talented photographer and a famous compositing artist. In this webinar, he is going to show you his process when going from a photo to a finished composite in one hour.

By registering for the webinar, you will automatically get an OnDemand version of it, available to watch at any time afterwards. If you are unsure whether you can make it to the live event, register anyhow! If you find out that you can make it, you are registered and if you can’t come, you get the OnDemand version quicker.

The webinar costs $24.99 and is limited to 95 attendees live. Seats are going quickly so again, register now if you want to have the chance to participate live.

Register here!

Embedding Non-Standard Fonts on Your Website Using Google Web Fonts

Erik Bernskiold — Fri, 12 Aug 2011 04:00:35 +0000

Back a few years ago it was almost impossible to use any other font than a standard system font on a website, without serious usability implications. Today, it is all about comparing the best solution for the project. In this tutorial, I’d like to show you how to use a non-standard font on your website by selecting from the great Google Web Fonts library which has got many high-quality fonts to choose from that in most cases have fair licenses.

Choosing a Font

Google has really grown their web fonts library and at the time of writing, it contains 214 fonts to choose from. Just head over there and start browsing to find a font that you would like. You can search by type (serif, sans-serif etc.) and then narrow down from there. Don’t forget that most fonts are available for download so that you can use them in your design mockups in say Photoshop. Once you have selected the font you like, you have the option to add it to your collection so that you can easily find it and download it to your computer, should you wish.

Embedding the Font

To start with the embedding process, click on the “Quick Use” icon in the font listing to be taken to a page with all necessary code. Google makes it very easy for you and walks you through this process. First you need to select the variations you’d like. Remember that each variation you add and call will add to the page load time. This means that you shouldn’t go crazy and add all variations “just in case” if you don’t think you will need them. Should you need them later, you can always go back in and add the font. Google will actually tell you the load time implication for the specific font selection on a scale from 1 to 100 (where 100 is really bad).

Scroll down a bit and copy the link code which should be something like this, depending on the font that you have chosen. Place this between the tags in your header.

<link href='http://fonts.googleapis.com/css?family=Ovo' rel='stylesheet' type='text/css'>

Finally, in your CSS, just use the font name like you would call any other font. Make sure to do a nice degradation series, should the custom font not load fine for you. You’d want to specify a font that looks close to the one you have selected.

font-family: 'Ovo', Georgia, Times serif;

With this, you are all set to have some text (preferably header text) presented in a more custom font that the standard set of web fonts.

Photoshop Quick-Tip: Set Your Tool Opacity With a Keyboard Shortcut

Erik Bernskiold — Thu, 11 Aug 2011 04:00:09 +0000

There are keyboard shortcuts for almost everything in Photoshop, including changing the opacity of a tool. To change the opacity for any tool that supports it, just press any number from 1 to 0 and the opacity will change from 10% up to 100%.

For more control over this, you can press (for example) 7 then 5 to get 75% opacity.

Add Natural Local Light to a Photo

Erik Bernskiold — Tue, 09 Aug 2011 04:00:46 +0000

Light is very tricky to work with and there are few techniques that simluate the increased light as it would look with increased sunlight for example. This technique will however preserve the texture and add both light and color to just the areas you want.

Preparing Layers

Open a photo of your choice and create a new layer. Set its blend mode to “Color Dodge” and lower the Opacity to around 15%.

Setting Up Brush and Picking Color

The way this technique works is by utilizing the color doge mode to lighten and subtly increase the color in the area you choose. To do so, first grab the Brush Tool (B) and select a soft bush of ample size. After that, hold down your Alt/Option-key to pick a color. In this case I am going to increase the light in the bushes and therefore pick a light color from the bushes.

Painting in Light

Lastly paint over the area with the color that you wish to enhance, sampling a new color when moving on to a new area. In the image above, I have enhanced the entire scene.

Adding a Custom Image Size to Post Thumbnails in WordPress

Erik Bernskiold — Mon, 08 Aug 2011 04:00:34 +0000

When you are working with templates in WordPress that use post thumbnails embedded using the the_post_thumbnail(); function, you can change the thumbnail size from the default, to a custom one. This is very useful if you would like to output the same post thumbnail for a post differently based on where on the site it is displayed (for example index listing and sidebar feature), or just want to give the thumbnail of a post type a custom size for display. Let’s have a look at how easy it is to add a custom image size to your WordPress theme.

Looking at the Function

The built-in function that is going to be used is called add_image_size(); and has been in WordPress since 2.9. It is now the only way to set a specific size to be used for the post thumbnail function. Here is the function in question, with some example values:

1	add_image_size('custom-thumbnail-size', 250, 150); ?>

By adding the function above to your functions.php file, you will have access to use a new thumbnail size which has been named “custom-thumbnail-size” and it scales the images to be 250×150. By default and using the function as it is, it will keep the aspect ratio of the image, should it be larger and therefore scale to the largest of the two values (either width or height, whichever is largest).

Having it Crop Images

If you want, you can have the function crop the images to perfectly fit the desired dimension, all you need to do is change the default crop value from false to true, by adding a true at the end, like this:

1	add_image_size('custom-thumb-size-cropped', 250, 150, true); ?>

Since the crop value defaults to false, you will only need to have it in there when you want to have cropping enabled.

Using With Post Thumbnails

To use a custom image size with the post thumbnails, you will need to pass the image size name when you call the post thumbnail. This is done like this:

1	the_post_thumbnail('custom-thumbnail-size'); ?>

IMPORTANT: If Targeting Older WordPres Versions

If you are targeting older WordPress versions or want to enable compatibility with them, you need to check whether the add_image_size function exists (as well as the post thumbnail function) before proceeding to call it or you will get errors. A simple if statement will do it for you:

1	if(function_exists('add_image_size')) { add_image_size('custom-thumbnail-size', 250, 150); } ?>

OpenGL Drawing and Color Selection Features

Erik Bernskiold — Fri, 05 Aug 2011 04:00:48 +0000

In this tutorial, you will learn how to use three very nice features enabled when OpenGL support is on: Interactively Change Brush Size and Two New Color Picker Methods.

Illustrator Quick-Tip: Flexible Rounded Corners

Erik Bernskiold — Thu, 04 Aug 2011 04:00:27 +0000

For more flexibility when working with rounded corners in Illustrator, you can instead of using the rounded rectangle tool, use the standard Rectangle tool and draw your base shape. After that, go to Effect > Stylize > Rounded Corners. This will be saved in the appearance panel with the bonus that you can go back and change the settings whenever you want.

Free Webinar: Integrating a Lightroom Gallery with a WordPress Website

Erik Bernskiold — Wed, 03 Aug 2011 09:34:16 +0000

Just a heads up that I will be hosting a free webinar this coming Monday, August 8 on the topic of Integrating a Lightroom Gallery with a WordPress Website. The webinar will be an hour long and during the hour, I am going to show you two techniques for taking a Lightroom gallery and putting it inside of WordPress, making it look just like any other page on your site.

Join me at 2 p.m eastern time (11 a.m Pacific; 7p.m BST; 8 p.m CEST; 4 a.m Sydney) for the webinar. There is a limit of 90 people attending so if you want to be sure to get your spot, please register (it’s free) in advance on the webinar page. Looking forward to seeing you there!

Lightroom Panel Tricks

Erik Bernskiold — Tue, 02 Aug 2011 04:00:56 +0000

In this tutorial you will learn to use some of the neat panel tricks inside of Adobe Lightroom. These tricks will help you optimize the interface for your setup and thus work faster.

Automatically Convert Background Layer to Regular Layer

Erik Bernskiold — Mon, 01 Aug 2011 04:00:14 +0000

In this quick-tip tutorial, Erik Bernskiold shows you how to set up an automatic script to automatically convert the background layer of any document you open to a regular layer.