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!


Patty Pioneers

Patty Pioneers

Engelbart and his burger. I guess it’s true what they say: They don’t make em’ like they used to! Look at the size of that thing!

Just so you know, this is a picture of Douglas Engelbart, the creator of (probably one of the most important input devices) the mouse, with a picture of a triple baconator. Ah, truly a man of great technological vision AND taste!

Speaking of not making them like they used to, Wendy’s took off the triple baconator from their menu!

I’m going to put up some more picture variants of this later (maybe). Probably the full color original burger with Engelbart pre-final version one. It shows a stark contrast compared to this (horribly done) black and white version.

Ah, and one last thing: I edited this picture using photoshop in case you were wondering.

And one very last thing: I also have made this (Patty Pioneers) into a ds106 assignment, so if you want to try your hand at making something like this, now you can! Go for it!

Here is the link for the assignment so you don’t have to go searching for it.

You got trolled! Thrice!

You got trolled! Thrice!

There you have it! A triple troll picture, so to speak. Let me give you the run down on why I fashioned the picture in the way that I did. First, I chose three people who were close related through their work on or relating to a machine called the Difference Engine, conceptualized in the 1800’s. From top to bottom, they are: Charles Babbage (Name on the quote), Vannevar Bush (who the quote really came from), and Augusta Ada Lovelace (in portrait). I felt that the picture should be Ada Lovelace for a number of reasons, but I felt that since she shared the same time frame as Babbage, not to mention worked with him, she should be the one to be pictured saying the quote. Speaking of quotes, I chose that particular one because it was taken from the future mouth of Vannevar Bush, in a time where building Charles Babbage’s brainchild was quite possible. When considering that Babbage wanted nothing more than to see his invention successfully completed, it makes it quite ironic. Coupled with the fact that Lovelace is quoted as saying the line makes it even more so.

Some of you may not be familiar with what a Difference Engine is, so let me give you the definition taken from Wikipedia to save you some time searching. That is:

“A difference engine is an automatic, mechanical calculator designed to tabulate polynomial functions. The name derives from the method of divided differences, a way to interpolate or tabulate functions by using a small set of polynomial coefficients. Both logarithmic and trigonometric functions, functions commonly used by both navigators and scientists, can be approximated by polynomials, so a difference engine can compute many useful sets of numbers.”

In a really simple sense, this just means it does simple mathematical calculations. At the time, however, it was so incredibly advanced that Babbage, the machine’s intellectual creator, would never get to produce a real working machine during his lifetime due to the insufficient advances made in engineering.

How was Ada Lovelace related with all of this? Well, to keep things in the most basic terms, she was Babbage’s colleague in his pursuit to make his dream machine a reality. Sadly, she too did not live long enough to see a working model of the difference engine, having died even earlier than Babbage despite being younger. This incredible conceptual breakthrough was too important to forget about, however, as Vannevar Bush, a 20th century scientist, took this idea and pushed it even further into the developmental stage. Finally bringing the world at the time, one step closer to an analogue computer.

I hope everyone enjoyed that! Let me know what you think!

Here is the link back to to the assignment!