Got Web?

Tim Burners-Lee

*Click Image or Here to see Ds106 submission page

Did you ever wake up in the morning, and say:

“Man, I’m so grateful that the World Wide Web exists! What would I do without it?”

Well, if so, the vibrant guy in the picture above, Tim Berners-Lee, is who you should be thanking!

Hmm, wait a minute. This guy was knighted by the Queen of England, right?

Better make that Sir Tim Berners-Lee instead! (According to Wiki, the rank he was giving was Knight Commander of the Most Excellent Order of the British Empire)

Compared to the old days, it must have gotten a lot easier to become a knight considering all he had to do was invent the web!

Anyways, since I guess he is kind of like royalty now, how about we go ahead and give him the Royal treatment? The Royal Photoshop treatment of course!

With that being said, I’m going to go ahead and give you guys a really really simple tutorial on how to use filters and a few other tricks in Photoshop to get any picture looking like the one I posted above!

Okay, so first lets start off with the base picture. Here is the photo I used (taken from this wiki) in case you want to use the same picture to practice on.

Lets start up by opening the file in Photoshop. Your screen should look something like this:

Next, go to your layers window and right click on the layer named “Background” then click on the option “Duplicate layer”. For this tutorial, let’s duplicate it twice. When you’re done, your screen should look something like this.

After that, select Background copy 2 to work on simply by clicking it in the layers window. Once you’ve done that, click the drop down Filter menu at the top of the screen and select Filter Gallery. (For those of you using older versions than Photoshop CS3, you may have to manually select the type of filter you want to use instead of using the Filter Gallery.)

Your screen should look something like this once you select Filter Gallery:

Filter Gallery Window:

Once the filter gallery is open, simply select the type of filter you wish to apply and (for the sake of brevity) experiment with the filter options using the sliders on the right side of the window. Each filter is unique so try out each one to see what you like the best! Just click Okay to apply the filter after you configure your settings.

Now, your window should look something like this depending on what filter you chose to apply:

For our next step, lets go back and try doing what we just did with the remaining layer. Once both layers have been modified with filters, your layers window should look something like this:

Oh, and for those really unfamiliar with layers, you may be wondering why you can’t see the other layer’s filter effect even if you click on it. Just remember that the layer on top in the layers window is the first and most visible one. Just think of layers like paper, and in our example there are 2 pieces of paper. Background and Background copy. Background copy is the one on top of the pile, with the layer Background on the bottom. If you want to hide a layer to view the ones underneath, just click on the eye icon next to the layer you want to hide in the layers window.

For this tutorial, we’re going to put the layer Background copy 2 on top of  Background copy before we continue. To do so, just drag and drop the layer to the top of the box on top of Background copy.

Again, your window should now look something like this:

Now that we got that settled, we’re ready to do a little magic with our handy-dandy quick masking tool! Select it by clicking on the (circle in the rectangle) icon in your tools menu box.

Once selected, you should see your background colors automatically switch to black and white. This is important, as the color black in quick masking mode selects the areas you want to work with when you exit quick masking mode. The color white, on the other hand, is used for removing the mask, so to speak.

Applying the mask is easy. Just select the layer you want to work with, your paintbrush tool, adjust your brush size, opacity, flow, etc., to your liking and then click on the areas you wish to mask. Again, if you make a mistake, just select the color white and paint over the area you wish to undo. ( ctrl+Z to undo your last action)

The masked areas should appear red, and your screen by now should look something like this.

At this point you should exit quick masking by clicking on its icon again in your tools menu. You should now see the area you painted in quick masking mode encircled. Next, click on the eraser tool and then use it inside the selected area to uncover parts of the layer underneath.

When you’re finished deleting the area you selected and want to delete the mask, simply go back into quick masking mode and paint over the red area using white. This will deselect the area when you exit quick masking mode as well.

You should now be able to see through to the layer underneath the top one, giving your photo a unique feel to it. You can adjust the opacity and flow of the eraser tool to suit your needs as well. The highest settings aren’t necessarily the best.

This should be what you final image should (kind of) look like:

After you familiarize yourself with all the steps, you should try and make an even more amazing multi-layered, multi-filtered picture on your own! There are many more fun and interesting things you can do with photoshop as well. I recommend experimenting with the other effects on your own and/or look up other tutorials on the web.

Here is my final image after making more layers and applying different filter effects!

…and that’s all folks! This picture also fulfills the requirements for a DS106 assignment! Want to see the assignment page, or know more about DS106? Just click the picture or here!

I hope my (very first) tutorial helped you out at least a little bit and many thanks for giving Sir Tim Berners-Lee the royal Photoshop treatment with me! I’m not sure if my final picture inspires you at all, but I’m sure you can make something amazing if you try! Feel free to leave a comment and if you can, tell me what photo-editing software you use (include the version please)! If I left out anything along the way, as in you get stuck following my explanation, please tell me what that was as well. I want to make this tutorial as good as possible!

Thanks  again and good luck!


8 responses to “Got Web?

  1. This picture on reader is really big! Just so you know, it is normal here. Also maybe tell us more about the guy and the quote, who is he? Maybe take the text out of the picture in the background too because it makes the yellow text that you have put in hard to concentrait on.

    • This will actually be where I make a photoshop tutorial, but its taking quite longer than expected for me to finish it. I thought I might as well put the original image up in the mean time. I should have this more developed in the next few days.

  2. I think it’s great you’re doing some tutorials for those of us who don’t use Photoshop, but might be nice to put them in a separate post so they’re easier to keep track of. This shows up as a ds106 assignment “Image with a Message” so I had no idea there was a tutorial tacked on the bottom!

    • Regarding Paul’s comment – yes, it is great that you are making such a useful tutorial. There is a tag that should be used for such tutorials. The format is VisualTutorials### – you can see the exact way to phrase it on the assignment page.

      Which reminds me, I don’t think I found a link to either of the two assignments you tutorialized while reading your post. Can you add them please?

  3. Hi … As the one who created the “image with a Message” assignment, I want to congratulate you on your endeavour. I am assuming that you were hoping to submit your creation under more than one category as your tutorial is quite detailed.

    May I suggest that you change the colour of your quotation so that it is much more dominant. I am slightly colour-blind and I almost missed the quotation which is supposed to have as much impact as the image complementing it.

    I do not want to dampen your enthusiasm but I had requested in this assignment to use a Creative Commons-licensed picture from Flickr. Perhaps your photo was shared through Flickr but I see no reference to its source address. I suggested that participants select a Creative Commons image because, as an educator, I want students to properly cite their sources. I realize that a URL at the bottom of a photo may be somewhat distracting but it is a visual reminder to always record your image source when downloading for possible later credit.

    I share this constructive feedback for your consideration.

    Thanks for sharing your creativity with the Ds106 community.

    Take care & keep smiling 🙂 Brian

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s