Web Design Tutorials osCommerce Template Tutorials
New osCommerce Templates osCommerce Specials osCommerce Forums Search Our Site Contact Us Resources Web Design Tutorials
Web Designers Library- Tutorials and Articles
Tutorial Search
  Advanced Search
 
Tutorial Menu
 
 Video Tutorials
  · Dreamweaver
  · osCommerce
  · Installations
 
 Photoshop
  · Tutorials
  Photoshop Basics
  Special Effects
  Text Effects
  3D Effects
  Textures & Patterns
  Web Layout
  Drawing Techniques
  Color Management
  Photo Editing
  ImageReady Animation
  Miscellaneous
  · Articles
 
 Web Design Basics
  · Design Principles
  · Website Usability
  · Color Theory
  · Templates & Tuning
 
 osCommerce
  · osCommerce Knowledgebase
  Catalog Area
  Installation and Upgrades
  Administration Tool
  General Information
  Developers Section
What's New
Latest Tutorials and Articles
Video Tutorials
osCommerce Tutorials
Template installation with cPanel and Ipswitch
Photoshop
Photoshop CS3: Output Sharpening
Change Color on an Object
Sunlight Effect
Autumn Effect
Eyes in Green Pea Pod
Web Design Basics
A To Z About RSS
Elements of Great Websites
The Next Generation Website Model
Why Use a Web Design Template?
Web Site Templates and Their Benefits
osCommerce
SSL - This page contains secure and non secure items
Post-Installation
Security - .htaccess
SSL - This page contains secure and non secure items
Tax Proposal
Photoshop : Tutorials : ImageReady Animation Last Updated: Apr 15th, 2008 - 18:38:37


Scanlines: Expert Circuit
Author: Thomas Ella
Authors Website: thomasella.sobertillnoon.com
Jan 22, 2007, 14:52

Email this article
 Printer friendly page

Most scanline tutorials just show you the most basic of scanlines and leave you hanging, showing none of the potential scanlines have if you take the time to explore them. Not this one. I've showed you the basic, so let's go advanced. Let's get started.

First we're going to experiment with colors. Open up your original document again, then make a new layer. Fill it with 50% Gray, then use Halftones at the default settings to produce some funky red-blue-green circle shapes:
Web Designers Library- Tutorials and Articles
Scanlines: Expert Circuit


From here, you have two choices, depending on what you need the image for. Let's make it look retro first:
Web Designers Library- Tutorials and Articles
Scanlines: Expert Circuit

To do that, I set it to Hue and 48% opacity. The higher the opacity, then older it looks, but the colors start to become an eyesore, so don't over-do it. Now let's try using another red-green-blue technique. Make a new document, 6x1 pixels. Grab the pencil tool and color the left two pixels Red #FF0000, the middle two Green #00FF00, and the right two Blue #0000FF so that it looks like this:


Now define it as a pattern and go back to the original image. Make a new layer and fill it with your new pattern, then mess with the various settings to get your desired effect:
Web Designers Library- Tutorials and Articles
Scanlines: Expert Circuit


I used Soft Light and 60% opacity, but this effect, like the previous one, looks best on images with a good balance of red, green, and blue, rather than this one, which is more blue-heavy. Now let's make a surprisingly smooth transition into the next technique. Take the previous two coloring scanlines and combine them (on separate layers) and mess with their settings:
Web Designers Library- Tutorials and Articles
Scanlines: Expert Circuit


That makes for a more interesting effect. Let's work a little more on combining different scanline techniques. Try combining the two dot scanlines I showed you in Scanlines: The Basics:
Web Designers Library- Tutorials and Articles
Scanlines: Expert Circuit


See that? That's a pretty cool pattern we just made. Trying to make that from scratch would've been exhausting, but by combining scanlines, it only takes a few clicks of your mouse. There's not much more I can show you about simply combining scanlines, since it's mostly just experimenting to see what works, but here's another example:
Web Designers Library- Tutorials and Articles
Scanlines: Expert Circuit


That was done by combining the 1px and 2px horizontals from The Basics. The possibilities are endless, so keep at it. Now let's try some more drastic filter effects. These can be useful if you're planning on using the image as a TV in a future project, which we'll be doing in a moment actually.

Anyways, let's continue. There are a few ways to achieve this effect that I know of, so let's go over them all so you can decide which is best. Make some normal 1px horizontal scanlines, then apply a diffuse glow on them at these settings:


Good. You'll get something that looks really, really horrible, but don't worry about that. Duplicate the layer, then set the duplicate to Multiply and lower it's opacity, maybe to around 60%. Then set the original to Screen and somewhere around 20% opacity:
Web Designers Library- Tutorials and Articles
Scanlines: Expert Circuit


This allows each layer to control a certain area of influence. The duplicate layer will affect the lighter areas and the original layer will affect the darker areas. Now let's try it another way. Put the layers you just made into a group and hide it for now. Then make another layer of horizontals and this time use sprayed strokes at these settings:


Do the same deal as last time, with the duplicating and everything. You'll get something like this:
Web Designers Library- Tutorials and Articles
Scanlines: Expert Circuit


I know that doing this a third time is going to be mind-numbing, so I'll try and make it quick; I promise. Group your new layers and hide them, then make a horizontal scanline layer and apply some grain with these settings:


I found those grain settings at Photosector, who also have a good (though nowhere near as informative or in-depth) scanline tutorial. Anyways, when you apply the multiply and screen effect again, you'll get something like this:
Web Designers Library- Tutorials and Articles
Scanlines: Expert Circuit


All right, done with that effect. Let's really quickly try out one more thing from the Photosector tutorial that I thought was especially clever of them. To sum up their three paragraphs on it, do this:

  1. New layer.
  2. Select all.
  3. Border at 1px.
  4. Invert selection.
  5. Smooth at 15px.
  6. Invert selection.
  7. Fill with black.
  8. Gaussion blur at 15px.
  9. Lower the opacity to around 50%.

They called it a "vignette," which is the black border around the edges of some TVs, and looks like this:
Web Designers Library- Tutorials and Articles
Scanlines: Expert Circuit

Last thing is animation. This is fun. I won't exhaust this since is really straightforward and this tutorial is pretty hefty already, so let's do two examples. For the first one, make an new image 4px taller than your other one and use your basic 2px scanlines again and do whatever effects you want to them. Put that layer on your original image and place it so the 4 extra pixels are coming out of the top.

 Now pull the image into ImageReady and create a new frame by pressing this button:    Now grab the Move tool and press down once, make a new frame, press down again, etc until you have 4 frames. Now press play and you'll get this:
Web Designers Library- Tutorials and Articles
Scanlines: Expert Circuit


Awesome. Now let's try using that new kind of scanline I showed you. Use whichever technique you wish, but re-do it around 5 times (don't just copy the layers) and put each in groups. Then hop to ImageReady and hide all but one. Then create a new frame and hide the one you just used and unhide another. Keep doing that until you've used all of your groups, then press play:

Web Designers Library- Tutorials and Articles
Scanlines: Expert Circuit

I went the extra mile to show you a practical way of using this tutorial. I found an image of an old TV, cut out the screen, stuck my image under it, and combined the animation I just told you to do with the halftone scanlines to give it an old TV sort of look. Scanlines are really useful, so to anyone actually still reading this, good luck using them- they rock!

Holy crap, we're finally done!




Top of Page

 
Level Ten Hosting