Creating a 3d image effect

Today I’ll be showing you how to create a rather neat effect, that may change how you approach your website (or it might not, I’m not going to hold you to it).

This post I’m going to show you how to create a sort of 3d effect with an image, although I wouldn’t suggest creating an entire website with this; its more for the effect of having distorted imagery, or using some of the steps in the process of getting this final product to create something interesting (dutch angle anyone?!)  .

Ok first, in my ongoing theme of korean subjects, take any picture.

Image

Unlock the picture by double clicking on the lock, and then duplicate it by double clicking on the layer and selecting “duplicate layer.”

Image

Take the new layer, and change the perspective. This can be achieved by going to edit, transform, and click perspective.

Then click on the top left, and drag it up a little.

Image

I dragged it up to about 108 point something (ya I know the image says 106 -__-), which you can see on the top marked “H.” its not completely important, but don’t try to shift it too much. Also, keep the number in mind, as you’ll need it later. Press enter to complete the transformation.

Image

Now, hide this layer. On the original layer, do the same, but on the right corner. This number should be approximately the same as the original. It doesn’t have to be exact, but try to keep it close.

Image

Back on the new layer, we can unhide it, then double click it. Turn off the red channel which is marked “R” under the “advanced blending section” and ta-da, we have the basic effect.

Image

Image

Now just to clean it up a little bit, I shifted the layer over so that the towers (my main subject) lined up better, and to create a slightly cleaner finished product.

Image

Advertisements

Sports are cool; Their media? Usually not.

so, the first thing i thought of when given the arduous task of website design analysis/critique was ESPN. Then I thought of Sports Illustrated; then I had an epiphany, and thought I’d do both. 

so, first things first. 

espn.com

si.com (also sportsillustrated.cnn.com….but i remembered it before they went all 1% one me and thought they were too cool for ). 

duh. 

Anywho. 

So, ESPN and SI are the two most prominent channels providing sports highlights and news up to the minute. ESPN has their own channel, and SI has their writers on just about any important news outlet on any given day of the week (off the top of my head…CNN, NBC, ESPN, Headline News (does that still exist?) HBO, CBS)

So, on to the websites. 

I went to SI first, out of habit (I like their college sports coverage better) and the first thing I would say, is that they certainly enjoy large features. 

From their logo, 

Image

 

To the dominating presence of their headline. 

Image

 

 

 

 

 

 

 

 

 

 

And this really annoying thing. 

Image

I tell ya, I really can’t think of anything more annoying than that. 

Beyond that, Here are the things that I like about Sports Illustrated 

Clearly Differentiated Boxes

Image

(kind of sounds like a terrible geometry/calc problem) 

clearly differentiated boxes. You’ll see why when we go to espn. Navigating the two sites are relatively the same; the boxes are what seperates the two sites in terms of navigation (in my opinion) as well as…

 

Pictures

Image 

Yep. Pictures. 

So, it’s my opinion that SI has just way too many pictures on their site. Its too distracting, and adds to the clutter that both websites share. Oh and ads…can’t forget about ads, but eh, I’m not gonna fight the 1% on this. 

 

Meanwhile, over at the Worldwide Leader in Sports…

 

First thing I notice is, well, a little more color. Also it feels a wee bit less cluttered, which I would attribute to the wider margins. Also, the much smaller headline picture. My arduous, scientific approach to the size difference was taking a sports illustrated window and quickly moving it back and forth over the espn window (it’s roughly 20-25 percent smaller). 

ALSO THE StUPID AD. (but its smaller, +1 espn). 

Image

So, my biggest issue with ESPN is pretty much the same as SI: its cluttered. However, its cluttered in a different way. SI is cluttered because they have too many pictures all over the place, and it just doesn’t flow. ESPN on the other hand, also has pictures, but selectively. It just tries to jam in so much content on the homepage that its really in your best interest to go to the sport that interests you right away at the top screen navigation, and even then you’ll probably face the same problem. 

Remember “clearly differentiated boxes?” ESPN kind throws a bunch of links and text, with a few pictures, into one big box. 

Image

Nostalgically I actually remember having this problem when the internet first got big (and there was that thing called a cable modem). For example, at the top left, there’s two stories, two pictures. Its pretty clear in this, (or maybe I’m just used to it) but I used to click on the wrong link because i thought one picture went to the other or something. 

 

Prescription? To these mostly awful sites? Follow an insider/writer of your favorite sport on twitter. Much more efficient and useful. 


adding a “halo” in photoshop.

So sometimes, especially for those of us involved in student organizations or anything that involves PR, its important to know how to make a flier a little more than just a time and a place. Photoshop gives us the ability to do that. For example, we can take this ordinary picture and give it a sort of aura to it (kind of like what you might see in a video game I suppose), almost like giving it a full-body halo. Honestly, I can’t really think of a good word to call it; oh well. I first added a black and white layer so that the colors of the halo will stick out a bit more.

First take a new layer, then utilize the pen tool, and click point to point (it will automatically make a full line for you). On the 2nd point, hold down the mouse, and make a curve so that it effectively rotates around the body (“effectively,” because clearly, it isn’t; its still going in front of the body, but we can fix this later).

Then select the brush tool, and choose the brush size. Here I’ll choose a size of 9. What you’re doing is determining the future size of the halo with this. Now, go back to the pen tool, right click on the lines, and select “stroke path,” and then make sure its set on brush and click “ok.” Now, we have a full colored brush “path” on the line we created. Press enter again to remove the lines (because they’re ugly).

Next, create another layer, and with the brush key, we can now select sections of color for this “halo.” I’m using a brush size of 68, with a soft edge tool. Choose whatever colors you like. Clearly, I’m not being very precise with this, and it looks a little crappy; but that’s ok.

Now to clean this up, hold down the alt key, and click on the line separating your brush and pen layers. See? Now its cleaned up.

Double click on the pen layer (layer 1 for me); on the left side, click on outer glow. Set the opacity to 100%. Then on the left side again, we can add a stroke by clicking on (appropriately) “stroke.” Set the size as you like; I have selected 1, and have also selected the color for white.

Now for the final step. Zoom in a bit so we can get some more detail, and select the eraser tool. Pick a soft edge eraser, and gradually “clean up” the lines so that you create the halo effect. It will more or less fade away the lines, pixel by pixel as opposed to straight up erasing, and forcing us to take such strains in detail.

Ta-da! Now not only is your original picture a little more interesting, it is also glowing. I also messed around with the saturation and the brightness and such, but that’s up to you. Pretty cool ya?