Stiern.com

How to Use Directions with Google Maps API V3

Peter — Mon, 09 Nov 2009 00:20:59 PST

Google Maps are more fun when you can get directions. And now you can! The recent release of the Google Maps API adds two new classes in order to enable directions. In this article I will show you how to add an input field in an infobox and use that to render a route.

But before that, here’s how it looks when it is done:

Please upgrade your browser

Because of the size at the page here the infobox gets a scroll bar, but just ensure to make your map large enough, then it will not happen.

The Directions
Calculating the Route
Conclusion

What's New?

Since my last article a couple of new features have been added to the API, as you can also read about in the changelog. The most important, in my opinion, is of course the support of directions, and that's the only function I will discuss here. Worthy to note, though — you do not have to use an API code anymore.

The support for directions is possible via two new classes, DirectionsRenderer and DirectionsService. DirectionsRenderer… Well… Renders the directions, and DirectionsService computes the actual directions. But the big question is — how do we use them?

Corrections

Before we rush into the new code, we should make some corrections in our excisting code. If you haven't read my article Adding Custom Google Maps to Your Website, do yourself a favor and do so before continuing on this one.

Next, look in your code where you define your markers and ensure that your values follow these rules:

var companyImage = new google.maps.MarkerImage(’images/logo.png’,
new google.maps.Size(100,50), // (width, height)
 new google.maps.Point(0,0),
 new google.maps.Point(50,50) // (width/2, height) );
var companyShadow = new google.maps.MarkerImage(’images/logo_shadow.png’,
 new google.maps.Size(130,50), // (width, height) 
new google.maps.Point(0,0), 
new google.maps.Point(65,50) // (width/2, height) );

Dividing the image's width by 2 ensures that it's the bottom center point of the image that'll be used for the marker. Thanks to JM for this solution.

The Directions

So, first we have to call the DirectionsService constructor. Before your initialize(), create a new variable:

1	var directionsService = new google.maps.DirectionsService();

Next, we have to create the renderer. Right before the variable you just created, define a new variable directionDisplay. This variable is going to contain the renderer.

1	var directionDisplay;

In your initialize() function, right after the latLng variable, set the directionDisplay variable to this:

1	directionsDisplay = new google.maps.DirectionsRenderer();

Further down in your code, find the map variable (right after the settings variable. Write this:

1	directionsDisplay.setMap(map);

This renders the marker on the specified map, which in this case is map. Next, let's define what we want to write in our infobox by expanding the contentString variable:

	var contentString = ''+
	''+
	'
'+
	'Høgenhaug
'+
	''+
	'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
'+
	'Find your way here from:
'+
	''+
	''+
	''
+
	'
'+
	'
';

Let's look a bit into the form used to ask the user for an address:

1
2
3

	''+
	''+
	''
+

First, we write "index.html" in our action attribute. This path should be to the file where your map is placed. In onsubmit we call the function calcRoute() (which we will define later), and next we write return false to prevent the site from reloading when the user submits the form. The next two lines should be pretty self-explainable. If you want the user to be able to enter both addresses, you can just add an extra input field called end. The value of the start field can be empty or you can write a pre-defined address.

Calculating the Route

At the very end of the initialize() function, write the following:

In the form we called the function calcRoute(). That's the one we are defining here. The first thing to do is define the two variables start and end. If you inserted an extra input field before write document.getElementById("end").value; in end instead of the coordinates.
Next, define the variable request. The attributes of this one are fairly logical, but let's explain them just in case. We define the origin of the route to our variable start, and the destination to end. Also, we define a travelmode —. This can be either DRIVING or WALKING.
Lastly, insert this code:

1
2
3
4
5
directionsService.route(request, function(response, status) {
	if (status == google.maps.DirectionsStatus.OK) {
		directionsDisplay.setDirections(response);
	}
});

This issues the actual search request, and completes the initialize() function.
Conclusion
With very little effort you can show your visitor how to get to your address directly from your website, instead of sending them to Google Maps or some other place. I hope you enjoyed the tutorial — please let me know if you have questions or suggestions. You are of course free to download the source files.
While you are here, why don't you follow me on Twitter or subscribe to the RSS feed?

5 Ways to Make Money with Your Blog

Peter — Sun, 01 Nov 2009 13:45:02 PST

Maintaining a blog can be quite a job. Writing new, interesting articles and providing resources for your visitors can be a hassle, even though you enjoy every part of it. I am sure you’d like to earn a little something after your effort. This post looks into some easy ways to start monetizing your blog.

BuySellAds

BuySellAds is a very popular ad network that helps advertisers and publishers communicate. They have some very simple rules to follow to ensure the quality of the sites the ads are placed. First of all, the service evolves around design and tech sites with more than 100.000 impressions per month, which narrows it down a bit. Also, your website has to be in English. Many popular websites, such as the Tuts+ Network, use this network.
Visit BuySellAds

Google AdSense

Google AdSense is by far the most popular ad network in the world. It is very easy to setup &emdash; in less than 5 minutes, you will have working ads on your website. It takes a lot of visitors to make real money out of this, but it is definitely possible. You can use AdSense both to place ads on your website, in your e-mail newsletters, in your search results, and in your feeds.
Visit Google AdSense

TradeDoubler

TradeDoubler was founded in Sweden in 1999, and since then, it has grown to a very large marketing company. When you sign up, you will have to get your website accepted, and when you want to place ads, the companies will also have to accept your site as relevant for their products. Even though this might seem like a huge process, it can be well worth it. Some large companies, such as Apple and Dell, sell their ads here.
Visit TradeDoubler

Amazon

Amazon.com Associates puts Amazon products on your website, and allows you to make money from it. When people buy after following a link from your blog, you will get up to 15 %.
Visit Amazon.com Associates

Donations

If you’d like you can also ask your users for donation. That can be a great idea if you give away lots of free stuff. Most people won’t give you anything, but others will gladly spare a dime to help you out. For this purpose, you can use for instance PayPal. Instead of money, you can also ask for a beer.

I hope this article has given you a short glimpse into some different methods of earning money with your blog. Which services do you use, if any? Please share in the comments.

250+ Sweet Icons for Your External Media

Peter — Sat, 24 Oct 2009 07:54:48 PDT

Whether you’re a Mac or a Windows user, the system icons for external media such as cameras, memory cards, and external harddrives, can be pretty boring. Luckily, the world is filled with skilled (what a rhyme!) icon designers that create stunning icons for you to download for free. I’ve tried to collect some of the icons I find beatiful. Enjoy!

Massive Media Icons

Archigraphs’ Nano Icons

OS X Creative Zen Vison M Icons

Zune

75 Black Translucent Drive Icons (scroll down on the page)

WD External Hard Drive Icons

hard disk updated

Laura – Drives Icon Set

SSD Icon

Mac mini LaCie mini Hard Drive & Hub

Sony Microvault

Boxdrive (scroll down on the page)

Wooden Slick Drives

Classic Cameras – Vintage Camera Icons

Pentax *ist DL

Nikon D70

Nikon D40

Canon Digital Camera Icons

Camera Nikon

Canon 400D & Lens

Memory Card Icon

Removable Drive Icons

Extreme Media Pack

And that’s a wrap! Hope you like the icons, and be sure to read the licenses.

5 Cool Ways to Add Graphs to Your Website

Peter — Sun, 18 Oct 2009 06:20:35 PDT

Graphs, charts and diagrams can be used to visually describe data. Visualizing data is very important, as it helps the reader to understand the data even better. And even though some people might prefer viewing data in a table, I think we are many who feel more comfortable in viewing data graphically. Fortunately for us, there are several ways you can implement data into a graph on a website.

Basically, you have two main options; You can use Flash, or you can use jQuery. What you prefer is entirely up to you, but I’d like to show you some of the possibilities within each technology.

Open Flash Chart

An example of a bar chart made with Open Flash Chart

Open Flash Chart is—as the name states—a Flash chart. If you run a WordPress blog, you might know it from the WordPress.com Stats Plugin. It is open source, and there are lots of customization options. You can make almost any kind of chart you can imagine, and it’s fairly easy to setup if you just follow the tutorials on the Open Flash Chart website. With the new Open Flash Chart 2, you can even use it with jQuery and save your graphs as images. To see examples, and to read the tutorials, visit the Open Flash Chart website.

Flot

An example of a Flot graph

Next up is Flot, a jQuery based method for implementing graphs. It is hosted at Google Code, and it works in all the major browsers (including IE6). It comes with a great bunch of examples, but the documentation could be better. The output of Flot will be a static image.

jQuery Visualize Plugin

An example of the jQuery Visualize Plugin.

This jQuery plugin helps you implement dynamic charts into your website without using Flash. Using the HTML5 canvas element it is possible to create great-looking charts without using even images. There’s a very thorough tutorial at the site that helps you set it all up. Also, it works in every major browser.

jQuery SVG

An example of a bar graph made using jQuery SVG

This is yet another jQuery plugin called jQuery SVG. It uses SVG, a language “for describing two-dimensional graphics in XML”. SVG is supported in most browsers. Actually, it is not only a graphing plugin. You can use it to create advanced graphics on your website such as text paths. Still, for graphs it is very usable.

Google Chart API

An example of a map chart made with Google Chart API

The last method is Google’s own Chart API. It is very simple, and all you get is static images. But the static images are cool. You can easily create world maps with selected countries colored in your choice of color. As with almost every Google project, the documentation is awesome. You’ll get some very fine looking graphs with little effort, and everything is customizable.

Conclusion

Now to the big question: Which method is the best? I don’t know. I guess it’s all about taste and what you need it for. But similar for the five mentioned methods is that you have some very great, free resources that easily lets you implement graphs into your website.

Adding Custom Google Maps to Your Website

Peter — Mon, 12 Oct 2009 15:56:47 PDT

Maps are often placed on a company website to help customers find their way there. For that, Google Maps is excellent. But wouldn’t it be nice to add your company logo, parking lots, train stations, etc. to the map, to help the customer even more? It is very simple, and in this article I am going to show you how.

Before we start, check out what we are going to create:

Please upgrade your browser

Now, here is an overview:

Overview

Google Maps API
Getting the Coordinates
Adding the Map to Your Website
Adding Markers
Customizing the Markers
Adding Infoboxes
Download

Google Maps API

The Google Maps API allows you to embed maps directly into your website. All it takes is a little JavaScript, and for beautifying—a little CSS. Version 3 of the Google Maps API has just been released, and of course, that is what we will be using here. You can read the entire documentation over at Google Labs, and while you are there, be sure to get an API key.

Getting the Coordinates

As I do not expect you to know the precise coordinates of your location, I will explain a very quick way Google has provided to do this. When you know the exact address, you can put it in an URL of this form:

http://maps.google.com/maps/geo?q=1+Infinite Liip,+Cupertino,+CA+95014,+USA&output=csv&oe=utf8&sensor=false&key=your_google_maps_api_key

When you enter this in your address bar, you will see this:

The coordinates of Apple's head quarter in Cupertino

The first number is the status code, and 200 means that everything is okay. The second number shows how accurate the address is—in this case the number is 8, which is good. The last two numbers are latitudes and longitudes, which are the numbers we need.

Adding the Map to Your Website

There’s no need to hesitate – let’s add that map to your website! Open your favorite HTML editor and create a standard HTML file with UTF-8 encoding. First of all, we have to create the viewport and tell our HTML file to get the JavaScript file from Google Code. Add these lines between and :

1 2	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>

After the URL, you will notice sensor=false. As we do not use any sensor, such as a GPS, to locate the location, this is set to false.

Just below what we have just inserted, write the following:

<script type="text/javascript">
	function initialize() {
		var latlng = new google.maps.LatLng(57.0442, 9.9116);
		var settings = {
			zoom: 15,
			center: latlng,
			mapTypeControl: true,
			mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
			navigationControl: true,
			navigationControlOptions: {style: google.maps.NavigationControlStyle.SMALL},
			mapTypeId: google.maps.MapTypeId.ROADMAP
    };

Let’s split this up to ensure that we understand it fully. In line 2 we create the function initialize(). Inside this function we are going to define the basic settings of the map. In line 3 we create a new variable, latlng. latlng stands for latitudes and longitudes. The variable contains the coordinates we’re going to use as the center of our map.
After that, we create the variable settings. You have a lot of options here.

zoom specifies—you guessed it—how far the map will be zoomed in. Play around with the number to get it to fit your location.

center specifies our center. By writing latlng, we refer to the variable we created earlier, and the coordinate inside that will be used.

The last code changes the layout of the map to a bit more minimalistic look in my opinion. The controls in the upper right corner (Map, Satellite, Terrain) are changed to a drop down menu, and the scaling/navigation controls in the left size are changed to small controls.

mapTypeId: google.maps.MapTypeId.ROADMAP defines that our map should be of the type ROADMAP – you can change this to either SATELLITE, HYBRID or TERRAIN.

Below the previous code, write this:

1	var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

This code creates the variable map, and defines that the map should use the settings we just created.

Write

1 2	} </script>

to end the function, and move to , and write this:

1
2
3

<body onload="initialize()">
  <div id="map_canvas" style="width:800px; height:500px"></div>
</body>

By doing this we are telling our site to execute the initialize() function when the site is loaded, and insert a

with the size we want our map to be.

Try to view your site now. Cool, isn’t it?

Adding Markers

Now we have to add some markers. Let’s start by creating a standard marker—we’ll customize it in a moment.

Right below

1	var map = new google.maps.Map(document.getElementById("map_canvas"), settings);

insert the following code:

  var companyPos = new google.maps.LatLng(57.0442, 9.9116);
  var companyMarker = new google.maps.Marker({
      position: companyPos,
      map: map,
      title:"Some title"
  });

Try to update your page, and watch the magic. So, what have we done?

First, we create the variable companyPos, where we specify the position of the marker. Next, we create the marker itself using the variable companyMarker. You can add more settings than these, but we will get to that later. These settings are fairly logical, so I won’t go into more depth with them.

Customizing the Markers

Even though this could be enough to show your customer how to find you, we can still make it a lot nicer. Create an image in Photoshop with the size 100×50 pixels, and create something similar to this:

Create your logo

Next, create a shadow for your image:

The logo shadow

To add these images as a marker instead of the standard marker, change the marker code to this:

var companyLogo = new google.maps.MarkerImage('images/logo.png',
	new google.maps.Size(100,50),
	new google.maps.Point(0,0),
	new google.maps.Point(50,50)
);
var companyShadow = new google.maps.MarkerImage('images/logo_shadow.png',
	new google.maps.Size(130,50),
	new google.maps.Point(0,0),
	new google.maps.Point(65, 50)
);
var companyPos = new google.maps.LatLng(57.0442, 9.9116);
var companyMarker = new google.maps.Marker({
	position: companyPos,
	map: map,
	icon: companyLogo,
	shadow: companyShadow,
	title:"Company Title"
});

What we have done here is also really simple. The variable companyImage points to the name of the logo image. Then it defines the size of the image, the origin of the image, and the tip of the image (where the image will be attached to the coordinate). Next, we do the exact same thing for the shadow in the variable companyShadow. In our companyMarker variable we add icon and shadow, and that is basically it.

Now, if you refresh your site, you will se that the marker has changed into your own logo with an added shadow to it as well. To add more markers, you just follow the same method (remember to change the names of the variables).

If you have two markers very close to each other, you might want to add some z-index. The marker with the highest z-index, is the one on top:

Adding zIndex allows you to choose which marker should be on top

var companyMarker = new google.maps.Marker({
	position: companyPos,
	map: map,
	icon: companyImage,
	shadow: companyShadow,
	title:"Høgenhaug",
	zIndex: 4
});

Adding Infoboxes

To add a description of your company when the visitor clicks on the logo we can add a infobox. With the Google Maps API it’s peace of cake.

Clicking your company logo will bring up an infobox

Paste this code right after you define the map variable:

var contentString = ''+
    ''+
    '
'+
    'Høgenhaug
'+
    ''+
    'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
'+
    '
'+
    '
';
 
var infowindow = new google.maps.InfoWindow({
    content: contentString
});

The code here is fairly straight-forward, and you are of course not limited to headlines and paragraphs – there is room for images as well. To make the infobox appear when your logo is clicked, simply add this code right before the last } in the initialize() function:

1
2
3

google.maps.event.addListener(companyMarker, 'click', function() {
  infowindow.open(map,companyMarker);
});

To make the infobox just a little more pretty, add some styles in your stylesheet file:

body {
	font-family: Helvetica, Arial, sans-serif;
	font-size:10pt;
}

And there you have it. One piece of fine-looking Google Map to include on your company website, your travel blog, etc.

Download

If you’d like to download the sample files, you can get ‘em right here. Be sure to leave a comment!

8 OS X Apps With Beautiful Icons

Peter — Sun, 06 Sep 2009 02:14:33 PDT

There are a lot of cool Mac applications out there, but unfortunately only some of them has beautiful icons. I’ve tried to collect some apps that I believe have pretty icons. Just like the interface means a lot to the user experience, I actually think the icon does as well. Some software developers understands this, and some unfortunately don’t.

I’m sure there’s many other apps with cool icons out there, and if you like one in particular, please let me know in the comments.

Espresso ($78)

Now, this icon really makes me wanna lick the screen… The steam from the cup is so delicious! Espresso is MacRabbit’s web development software, and it’s not only the icon that’s nice.

Bodega (free)

Bodega is created by IDFusion Software and Centrix.ca. It is the iPhone App Store for Mac apps. It comes with a stunning interface, and it seems to be growing incredibly fast. And, oh yeah–the icon is great!

ForkLift ($19.95)

Are you as tired of Cyberduck as I am? Then you should try ForkLift. It is an advanced FTP client that is fast, and has all the features you’ll ever need from a FTP client. The interface is beautiful and so is the icon.

MindNode (free)

MindNode is a really cool piece of software. It helps you organize and structure your ideas in really neat mind maps. The icon is nothing I’ve seen before–I love the way the plant comes out of the frame.

QuickTime Player X (free)

With Snow Leopard Apple released QuickTime Player X with an entirely new interface and some cool new features (and unfortunately without some of the very useful features from QuickTime Player 7). Nevertheless, the icon got a complete redesign, and I don’t think I’m the only one who thinks they got pretty well away with it.

Times ($30)

Acrylic has tried to reinvent the RSS reader with their app Times, and I think they succeeded, although for me $30 is a bit too much to spend on a RSS reader. However, the app does feature a beautiful icon.

Coda ($99)

Coda is Panic’s web development client, and has for a long time been the by far most popular web development client as well. Now that Espresso’s out, let’s see what happens. Even though I actually never really understood why the icon is a leaf, I still think it’s a very beautiful icon.

Billings ($56)

Billings is really popular these days. It is a feature packed invoicing app with time billing and it’s very easy to use.

Enhancing Your Site with WebKit

Peter — Fri, 03 Jul 2009 07:00:36 PDT

WebKit is an open source browser engine. Apple uses WebKit in Safari, Mail, and other applications. Google’s Chrome browser, along with the S60 browser and the iPhone browser, is also built on WebKit. Some of the cool features of WebKit is transitions and transforms. With purely CSS you can create stunning animations. Your site will still work in other browsers, but the users with WebKit browsers will just get a slightly better experience.

Take for example Elliot Jay Stocks’ new website, elliotjaystocks.com. It is in it self a very beautiful website, but if you open it in e.g. Safari 4, it’s even more beutiful. When you hover your mouse over the images, the border will slowly fade into a lighter color. In non-WebKit browsers, it’ll just be a very sudden transition. This done solely by CSS.

Elliot Jay Stocks' new website

Another example is Atebits’ website. Atebits is the company behind the Twitter app Tweetie. Let’s have a look at their front page:

Atebits' website

That’s just beautiful, huh? Well, let’s dive into how we easily can add similar function to our own site.

The first property we have to learn is -webkit-transition. The -webkit-transition property is a shortcode for the three properties -webkit-transition-property, -webkit-transition-duration and -webkit-transition-timing-function.

We’ll probably learn this the best by having a look at an example, so here goes: We want to create a div that, when hovered, fades into another color. Here’s the code:

div {
  -webkit-transition: background-color, color 0.4s linear;
  background-color: #777777;
}
 
div:hover {
  background-color:#999999;
}

And here’s the example:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

This wasn’t so hard, was it? Now let’s move on to using the -webkit-transform property. It allows you to scale, rotate, translate, and skew the object. It even allows you to use matrices for advanced transformations. Let’s try to rotate and skew the div from before:

div {
  -webkit-transition: all 0.4s linear;
  background-color: #777777;
}
 
div:hover {
  -webkit-transform: scale(1.3) skew(3deg);
  background-color:#999999;
}

This is just a little glimpse into what you can do with WebKit. Hopefully, you’ll find it useful.

i55iqj8amt

Lights and Shadows in Photoshop

Andreas — Fri, 03 Jul 2009 06:53:43 PDT

This tutorial is not too advanced but mostly to help to understand the power of shadow and light in short terms! There’s no “boring” text here. So if you are not used to Photoshop, do yourself a favor and read it all before continuing to the next step! You might learn something!

The thing about a good picture is to give it a feel of depth. You need not to give the receiver any reason to speculate whether a shadow is placed weird or a light source is coming in at a wrong angle. Often I can even find shadows and light sources in non edited pictures that look unreal. That is mostly in very poorly illuminated pictures.

In this picture you have an idea of where the light source comes from. Still it could handle a bit more tension and depth!

The initial picture

To bring the picture to life, we will add some depth and sharpness. Too much editing can destroy a picture as well, so be careful not to gaze too long at your editing. Your effects and layers could end indifferent to others!

Let’s see if we can end here:

The final picture

The retouching gives the receiver no reason to doubt as to where the light source is coming from.

Let’s get to it!

And don’t worry about naming the layers. We’ll not end up with more than 5 or 6 of them. I’m usually really sloppy when it comes to naming layers. It’s the last thing I do so that I can jump right into it if need be later on.

Step 1

Open your picture.

Open your picture in Photoshop

Step 2

Take your clone stamp tool (hotkey s). Now hold down the alt key and choose a suiteable area of skin you want to clone from. Run the mouse over the part you want to edit and click. We don’t ”clean” up the impurities in the skin because they’re ”unnatural”, but because they will end up standing out too much at the final outcome if we don’t.

Use the clone tool to remove impurities

Step 3

Now take your dodge tool (hotkey o, the black lollipop) and remember to set your range to midttones and your opacity to somewhat in the 60’s (in this example). Gently affect the eyes where the light would hit them. Most often in the lower part or the whole eye. Remember not too much, even if it looks cool. We want it to look natural!

Use the dodge tool to simulate light

Step 4

Press the New ajustment layer button or go Layer » New Ajustment Layer » Curves . Now go 1/6’th up the curve and drag it down until the result is pleasing. Fill the layer with 60% black. Choose a brush with opacity of approximately 25% and a flow of about 60% and go easily around the dark areas with a reasonable large brush for the cheekbones and neck. Use a smaller brush for the lines at the eyes, the mouth, the nose etc.

Create a new adjustment layer

Step 5

Now repeat Step 4. But this time with lights instead of the shadows. That means make a new Curves layer, fill with 60% black, go 1/6’th down the curve from the top, and pull it up until the result is pleasing. For the brush part, just repeat step 4. If you need more effect with the brush choose a higher opacity setting.

Create another adjustment layer

Step 6

Now the more fun part. The ”effect”. Go Layer » New Ajustment Layer » Gradient Map. Select Dither and make sure you set the Layer setting to overlay and approximately 35-50% opacity, but again, that depends what picture you are working on, how dark the colors are, how big the picture is, etc. Play around with the gradient a little to find out which one matches your picture the best. (Look at the eyes popping out now. If you brought them out too much at the beginning they would look surreal by now, and we don’t want that.)

Let's start making the actual effect

Step 7

Select the all layers (except you source picture) and group them Cmd+G (Ctrl+G on Windows). Right click and duplicate group. Next you need to merge the new group, so go Cmd+E (Ctrl+E on Windows).

Now go Filter » Other » High Pass and set it to about 4 and a layer setting of overlay. Again, that setting depends on the size, content, quality etc. of the picture. This High Pass filter is to sharpen up the image. This will do a lot to the eyes for example, but you can see for yourself.

Step 8

With the High Pass layer now selected I would, no matter what picture you are retouching, go Layer » Layer Mask » Reveal All. Get the Brush tool with 60% opacity and 60% black and go over the largest areas. In my picture it would be the cheek, grass and the shirt. Go over the things that should not be striking to the eye at first when looking at the picture.

Step 9

Clean it up, maybe add some more light or shadow if your image can handle it.

That’s it

The final picture

Hope you learned something! Take care!

Stiern.com Relaunch

Peter — Fri, 03 Jul 2009 06:51:35 PDT

Hello, and welcome to the relaunch of Stiern.com. My former design was ugly, and so I decided to make a new one. I like it, and I hope you’ll like it too. I’ve decided not to support IE6, as the target group of this website is not IE6 users. As with many new sites, there can be some issues. I hope that you will not hesitate to contact me if you find anything unusual around here – thanks!

Well, I won’t bother you with more of this. I’ll get something posted in the near future for your pleasure.

Which Social Networks Are You Part Of?

Peter — Thu, 23 Apr 2009 14:09:52 PDT

Social networking has eventually become crucial for surviving (!), and it seems there are endless posibilities as to finding the right ones to be part of. For me, it all started with Facebook about two years ago. My friends tried to convince me to sign up, and I finally gave in. Since then, Facebook has developed in to a commercial monster, and I hardly log on anymore. But still, Facebook was where it begun. My interest in social networks has only grown since then, and I tell you, there is a cornucopia of social networks out there. But which ones should you be a part of? It is a jungle. I’d like to take you through the social networks I’m a part of, and also mention a few that I’ll never be a part of.

Twitter

Twitter is for me the most important social network. It is the place for me to share links to great articles, ask questions about software or design related stuff, and lots of other stuff. If you’re not a member of Twitter, you’re falling behind. Twitter is the fastest growing social network ever with an increase of unique visitors of almost 1400 % in one year. That’s crazy, and the number speaks for itself. Sign up now!

Follow me on Twitter

Facebook

I think I can surely say, that you’re a member of Facebook. If you aren’t—good for you! Facebook has over the last year become more and more commercial. Oh, and there’s also this thing about them owning your pictures (which they, as far as I know, are changing) and using them in advertisements. Still, Facebook is probably where most of your friends are. And in the end, it is a great way of keeping in touch with long distance friends, or just knowing every step they take. A couple of my friends have deactivated their Facebook accounts (you can’t delete it), and I’m considering following in their footsteps, but I don’t think I’m ready yet…

Be my friend at Facebook

Flickr

Until recently, I haven’t really used Flickr as much as I want to. Flickr is a great way of sharing your photos with your family and your friends, or with the world. Flickr became attractive to me the minute I found out that users with free accounts suddenly were able to create more than three sets, a feature that until then only was available for users with pro accounts. I’ve searched for similar photo sharing services, and there’s a lot of different alternatives to Flickr, such as Picasa, Zooomr and Fotonauts, but I just don’t think that any of them can live up to the features and the high standard of photos at Flickr.

Be my contact at Flickr

Vimeo

Vimeo is my new favourite social network. The cool thing about Vimeo over e.g. YouTube, is that it consists of only original videos. The design of the site is amazing, and it’s incredibly easy to use. It’s not as big as YouTube, hence not so immense. There’s a lot of great stuff for inspiration there, and you should definitely check out the Staff Picks channel, where some amazing videos can be found.

Be my contact at Vimeo

Dopplr

I only recently discovered Dopplr, a place to share you travelling experiences and plans. It allows you to plan your trip into details, and find other people who are going the same places as you. You can invite people to follow your trips, so you can keep them updated while you’re away. I haven’t tried this while I’m travelling yet, but I’m looking forward to this summer where my wife and I are spending a month in the states. Who know, maybe Dopplr will come in handy?

Connect with me at Dopplr

LinkedIn is mostly for work related stuff. It’s a great place to meet new or future colleagues, and some have found their new job through LinkedIn just by knowing people who knows people, who knows people, who… You get the point! Use LinkedIn to build up a large network, and make sure you’re introduced to other peoples’ bosses—maybe they’ll hire you. LinkedIn is you professional identity online, contrary to e.g. Facebook which is… Well, not so professional.

Be my contact at LinkedIn

Social Networks I’m Not a Member Of

If I should pick one social network, that I know for sure I’ll never be a member of, it has to be MySpace. It is very infrequent I find a well-designed MySpace profile. It’s just all too confusing to me. I’ve tried using Last.fm and similar, but they just never fell into my taste. I like owning my own music. i use this, Wakoopa, and other equivalents, are not my style either, but hey, maybe someone like them…

That’s about it for me. Now it’s your turn! Which social networks are you part of? And why? Which social networks will you never sign up to? And why? Please leave you comment below!