Now: Tutorial for Web and Software Design > Photoshop > Web Layout > Photoshop Content
> PhotoShop - Tech Lines [Bookmark it]
PhotoShop - Tech Lines

Here you will be taught to create those tech lines I used in a few of my layouts.

1. Open a new file, 600 x 500. Make the background color anything but white.

2. Make a new layer. And make a thin rectangle. For every box your make you must make it a new layer

image 1

3. Select the Polygon Lasso Tool

image 2

4. Cut up the box in a cool patter. Make sure you hold down the Shift key. This will make all your angles 45 Degrees and will prevent jaggy edges. Here what I have now.

image 3

5. You need to make at least 4 of these types of shapes, but the more the better. Make sure there all different, either in height or length. Heres a few more I made. Remember to keep them on different layers.

image 4

6. Now you need to position these shapes. Heres mine after I positioned them.

image 5

7. Now I will duplicate a few pieces, rotate, flip and recut them so that it appears that theres alot more unique pieces. Changes the size of pieces also helps. My images now looks like this.

image 6

8. Now merge all the shape layers togethers (not including the background). Go to Edit > Transform > Scale and set the scale to 25% of the original size.

image 7

9. Duplicate this layer a few times and position them so it looks good. You might need to recut some parts. Here what I have.

image 8

10. Ok, almost done. Select the Line Tool and make about 8-10 lines around your shapes. Heres what mine looks like with the lines.

image 9

image 10

11. Go to Layer > Rasterize > Shape. Do this for each line your made in the above step. We need to do this so we can erase some lines. One that is done, merge all the line layers together. This will make the next step easier.

12. Select the eraser and make the size about 35. Now erase all the ends of the lines so they appear to be fading out. You can also erase the lines in the middle to make it appear as though some of the lines are pulsing. Heres my final product.

image 11

13. Now Merge all the layers togethers, open up your background image and copy and paste this onto it. Set the opacity to about 66%. I used this technique on the last version of my website.

Tech Lines Tutorial: Final Result


[Bookmark][Print] [Close][To Top]
  • Prev Article-Photoshop:

  • Next Article-Photoshop:
  • Related Materias
    Old Photo's
    Photo Frames Never Easier!
    Realistic Spotlight Effect
    Smooth Button (video tutor
    Professional Web Host Layo
    Smooth Shapes (vieo tutori
    Turning A Sliced Image Int
    Some Pixel Art? Why Not!
    Realistic Microphone in Ph
    Creating A Basic Web Layou
    Topics
    Photoshop Tutorial
     

    Special Effect

      3D Effect
      Photoshop Articles
    Programming Tutorial
     

    C/C++ Tutorial

      Visual Basic
      C# Tutorial
    Database Tutorial
     

    MySQL Tutorial

      MS SQL Tutorial
      Oracle Tutorial
    Graphic Design Tutorial
     

    Coreldraw Tutorial

      Illustrator Tutorial
      3D Graphics Articles
    Webmaster Articles
     

    Domain Service

      Web Hosting
      Site Promotion
    Java Tutorial&Articles
     

    Java Servlets

      JavaEE Tutorial
     

    JavaBeans Tutorial

    XML Tutorial&Articles
     

    XML Style Tutorial

      AJAX Tutorial
      XML Mobile
    Flash Tutorial&Articles
     

    Flash Video

      Action Script
      Flash Articles
    OS Tutorial&Articles
     

    Linux Tutorial

      Symbian Tutorial
      MacOS Tutorial