Article Archive by Shawn Escott

Social Media Telekinesis

by Shawn Escott

I recently saw a video on CNN about a new product from a company called NeuroSky, which enables users to control a floating ball with their mind. The user wears a headset that reads brain signals and sends a message to the device which floats a ball inside a cylinder.

The technology will be marketed as a toy at first and later extended into reality T.V. shows, automobiles, and video games. It’s also being used for professional archers competing in the Olympics.

Imagine this type of technology in conjunction with handhelds and touch screens in which you could send a tweet with your thoughts or download an app to relieve stress. You may even be able to connect with your audience in new emotional and intellectual ways which have never before been achievable.

NeuroSky boasts a Brainwave Visualizer, Bluetooth Audio, Developer Tools, and even a video game with a character named NeuroBoy in which the user can mentally float objects and throw them.

It seems like the stuff of science fiction, but technology is changing the way we live our lives everyday. The future is now! You knew I was going to say that, right?

Universal Selector in CSS

by Shawn Escott

All browsers have built-in margins and padding for html and can impact the meticulous layout of a design. Browsers such as Internet Explorer, Firefox, and Safari may all render the spacing of the H1, p, ul, li,etc. differently.

To alleviate this problem and force the design to the margins and padding we specify, we must first set all of them to 0 pixels. This cancels out browser defaults. Now we can set our own heights and widths where needed. Below are two ways to accomplish this:

1.  List all elements of the html and set the margin and padding to 0 pixels like this:

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, p, blockquote, th, td {
margin:0;
padding:0;
}

– OR –

2.  Use the Universal Selector which does the same as above, but in much lest code.

* {
margin:0;
padding:0;
}

Keeping your code clean and simple can decrease file size and ensure your pages load quickly.

Creating a 3D Catalog Graphic in Photoshop

by Shawn Escott

In this tutorial, we will take a flat catalog image and create a more exciting 3D version.

Prepare your catalog image in a Photoshop layered file.

From the top menu select Edit > Transform > Perspective

Select the right bottom handle and slowing drag up a few pixels and you will see the perspective of the image change. When you get it to a similar angle as below, press Enter on the keyboard to accept the change.

Make a new layer. Select Layer > New > Layer

Select the Rectangular Marquee tool and draw a rectangular box on the left side of the image. This will be the spine of our catalog.

Choose a color from the Foreground Color picker.

From the top menu, select Edit > Fill
Make sure the Foreground Color is selected and click ok.

Your image should look like the one below.

From the top menu, choose Select > Deselect

Next, from the top menu, select Image > Transform > Perspective.

Select the left bottom handle and slowing drag up a few pixels, just like we did on the cover image. Press enter on the keyboard to accept the change. (If you have an actual image of the spine you can do the same technique to add perspective and align it with the cover.)

Lets finish it up with a nice drop shadow. Make a new layer. Select Layer > New > Layer

Select the Lasso Tool from the side tool bar and draw a shape similar to the one below. Control click on the PC, Command click on the Mac. Fill the selection with black and then deselect.

Now, let’s soften the edges of the shadow. From the top menu, select Filter > Blur > Gaussian Blur. Drag the slider until you achieve the look you want.

Adjust the opacity of the Layer to 15%.

Click and drag Layer 3 below layer 1 and you’re finished!