Creating Reusable & Versatile Background Patterns

Posted by admin in CSS, Photoshop tutor... | 08.16.2011 - 1:15 pm

I haven’t written any Photoshop tutorials for a while. Today I’m going to share a simple tutorial on how to create reusable background patterns with Photoshop and CSS. I learned this trick from designing WordPress themes. The trick is to create one reusable transparent PNG background and use CSS background-color property to create various color […]
Advertise here with BSA
Technorati Tags: blog, blogger, blogging, feed, news, google

Original post by Nick La

    Technorati Tags: , , , , ,


    iPhone Gift Ribbon

    Posted by admin in CSS, Photoshop tutor... | 12.01.2009 - 7:48 pm

    I recently spotted an iPhone ad which inspired me to write this tutorial. It is a gift ribbon, consisting of various app icons, wrapped around an iPhone. This effect can be easily achieved with Photoshop Warp transform tool. Christmas is around the corner and I hope you may find this tutorial useful for upcoming projects. If you are not familar with the Warp tool, I sugest you read my Photo Strip tutorial first.
    (more…)
    Technorati Tags: blog

    Original post by Nick La

      Technorati Tags:


      Photo Strip (Photoshop Tutorial)

      Posted by admin in CSS, Photoshop tutor... | 01.14.2009 - 1:01 pm

      This is a Photoshop tutorial on how to create a beautiful photo film strip, as seen in Apple’s iLife package design (’06 version) and DigitalMash website. The warp tool will be used to create the twisting effect (so, you need Photoshop CS2 or above to complete this tutorial). With the completion of this tutorial, you will be able build a photo strip with your own photos or artwork. Don’t miss out this fantastic feature!
      View Final Image
      Download Photoshop File (more…)
      Technorati Tags: blog, blogger, advertising

      Original post by Nick La

        Technorati Tags: , ,


        Photoshop: Hand Drawn Design

        Posted by admin in CSS, Photoshop tutor... | 06.30.2008 - 11:35 am

        In case you haven’t noticed yet, the hand drawn style is one of the hottest design trends. There are several ways to create hand drawn images — you can create it from scratch in Photoshop or you can scan an actual hand drawn sketch. Personally, I like to use a scanned drawing because you get a realistic drawing texture. Here is a quick tutorial to show you how to create a hand drawn design in Photoshop using the blending mode and alpha channel. (more…)
        Technorati Tags: blog

        Original post by Nick La

          Technorati Tags:


          Parallax Gallery

          Posted by admin in CSS, Photoshop tutor... | 04.25.2008 - 7:23 pm

          In this tutorial, you will learn how to make a Flash parallax scrolling gallery from scratch. Parallax scrolling is frequently used in most 2D animation and games, where the background images and foreground images scroll at different rate of speed. This will create an illusion of depth as the background images are moving slower than the foreground images.
          View Demo Gallery
          Download Demo ZIP (more…)
          Technorati Tags: blog

          Original post by Nick La

            Technorati Tags:


            Chroma Wallpapers

            Posted by admin in CSS, Photoshop tutor... | 02.01.2008 - 8:41 pm

            By Rick, Color Charge
            This tutorial explains how to create a energetic, vibrant, colorful wallpaper, like the ones available at Color Charge. These lines, which we’ll call Chroma were highly inspired by the iPod Nano Ad from 2006 and some Quantum Chromodynamics nerdery stuff. You will learn how to bend blurry shapes with Warp tool to draw the lines, beams, and steams. Then you’ll know how to add some glowing and vibrating color effects, and finally polish your drawing. Aside reading this tutorial, you’ll need Photoshop CS2 or CS3, and preferably a computer with a lot of memory and a larger screen to achieve that effect.
            Download Photoshop file (more…)
            Technorati Tags: blog

            Original post by Nick La

              Technorati Tags:


              Vector Polishing Techniques

              Posted by admin in CSS, Photoshop tutor... | 11.23.2007 - 4:23 pm

              Someone emailed me and asked how did I do the illustration background on Next2Friends. It inspired me to write this article. He asked "Did I do it in Photoshop or Illustrator?" Well, it is a mixture of both. First I created the artwork in Illustrator, then polished it in Photoshop. Here I will unveil all my secret techniques. This tutorial includes 9 Photoshop techniques that will show you how to add more depth, color, contrast, and texture into your vector art. (more…)

              Original post by Nick La

              1. design process
              2. Design Tutorials
              3. Illustrator
              4. Photoshop tutorials

              Design Watercolor Effect Menu

              Posted by admin in CSS, Photoshop tutor... | 10.25.2007 - 2:13 pm

              This is a two-part tutorial on how to create an artistic and un-typical CSS list menu as seen on Web Designer Wall. In the first part (this article), I will show you how to design a watercolor effect menu in Photoshop. Then in next tutorial, I will show you how to slice the menu and code in CSS. If you need some inspiration on creating an artistic menu, visit our previous post on artistic websites. Ready? Let’s begin Part 1. (Update: Part 2 is ready - Advanced CSS Menu) (more…)

              Original post by Nick La

              1. design
              2. Design Tutorials
              3. Photoshop tutorials