31. May 2008

Free Photoshop 101 Web Design Tips, Tricks & Techniques e-book for limited time

Site point is giving away PDF version of The Photoshop Anthology book. It consists of full fledged Photoshop designs especially for web designers. Usually most of the Photoshop books available across market contain tutorials based on print designs but this book is aimed fully at web designing and how Photoshop impacts it.  Corrie Haffly, a famous web designer and developer is the author who created over 400 website templates and designs. You can have a look at her works in her official site CorrieHaffly.com.

This e-book consists of step by step instructions and tutorials about creating effects and graphics for your website. This is a must for every web-designer who uses Photoshop for their development. Although you can order a hard copy of this book from site point, for a limited period of time they are giving away free download of PDF Versions of this book. As a web designer I myself should not miss this opportunity and so wanted to share this news. Still 12 days remaining for the offer to end, i recommend everyone to download this book doesn’t matter you have to be a web designer but it helps you enhance your Photoshop skills.
What you learn from this book

  • Learn the basics: image sizing, layers, vector shapes, transparency, and more.
  • Create a multitude of attractive buttons: aqua-style, metallic, glassy, etc.
  • Improve digital workflow
  • Create seamless tiling backgrounds: rice paper, brushed metal, and granite, plus many others.
  • Work with text: style it, create special effects, and wrap it around 3D objects.
  • Touch up photographs, match colors, and combine different images.
  • Use eye-catching special effects.
  • Isolate objects from images.
  • Make graphics for CSS rollover buttons.
  • Design an entire web site and easily switch between different versions
  • Optimize graphics for web use.
  • Work smarter: automate your workflow with batch commands and actions.
  • Create animated GIF and more….

Site point provide the download of book in two versions of PDF, High quality version is 64mb and low quality is 23mb. You can simply download the book by entering your website in this site.
Download Now | Sitepoint | Author: Corrie Haffly |

30. May 2007

Creating a simple web 2.0 favicon - Tutorial

Inspired with the favicon design of web 2.0 sites like Tech Crunch, Lifehacker, Technorati, etc? Well follow this simple tutorial for creating web 2.0 fav icon using Photoshop. All you need is just Adobe Photoshop software installed.

favicon1.giffavicon2.giffavicon3.gif

Ok let’s get started!

Open a new project in Photoshop either by navigating to File > New or just press Ctrl + N.

pic1.gif

Now make sure the width and height its 400px so that you can get a square shaped fav icon with the background color as white.

Now select the desired background color you want to use for your fav icon by clicking set foreground color as show in the figure. Choose a nice web 2.0 color from the Color library.

pic2.gif

pic4.gif

After selecting the BG color to be used, in the tool box of the Photoshop select Gradient tool or just press (G).

Now below the menu bar you will get a gradient color option, which looks similar to the screenshot posted below, click it and select foreground to transparent palette.pic5.gif

After selecting, drag your mouse from the outermost top of the project to its extreme end via +y to –y axis and leave down to get a color background. While dragging if you seem to have white color over the bottom then press ctrl + z to re-drag and this time drag it out of the bottom extreme to make the white color disappear,

After getting desired web2.0 background for the fav icon, select the horizontal text tool from the tool box and type the first name of your website or added two different layers of text if you need two initials in your fav icon.

After typing your desired initial, select a color for the text which matches the background perfectly or your website theme. (Basically both the background and foreground should match the website theme color). But if you add two initials in the fav icon make sure you give two different colors then.

Now the next part is the optional part of adding 3-d effect. If you satisfy with the current design you can skip this step otherwise add a bevel or emboss effect to the text by right clicking the text and selecting the blending option.

pic7.gif

That’s it now the next process is exporting the created project as jpeg image by navigating to File > Save as > and selecting jpeg as format and click save.

The exported jpeg can be easily converted to .ico favicon by visiting this website.

Please forgive me if you have expected more about the design coz I have already mentioned the title as how to design a “SIMPLE” web 2.0 icon which made my tutorial concise after all this is my first tutorial. I have uploaded the .PSD files and made available for download which you can modify according to your wish.

Last but not least, I am expecting your comments and suggestions

Download: Sample 1 | Sample 2 | Sample 3 (PSD Format).

[update]: Sample 2,3 are live at Technical Blog & BlogTalkz please don’t inherit the same design.

27. May 2007

Just Upgraded to Photoshop CS3 Extended

pscs3.pngIt has been weeks since Adobe Photoshop CS3 released I still haven’t upgraded, so now i got time for it and finished the process of upgrading from CS 2 to CS3 just. Well the ultimate mistake I made is that I upgraded to CS3 extended instead of just CS3. Since Extended version contains more features that are really not worth for a graphic designer but for professional motion editors, animators etc while the Photoshop store itself suggest CS3 is enough for graphic designers.

For those who are confused about what I am talking, I want to say that the new Photoshop CS3 is available in two different versions, the ordinary and the other with a Extended Tag.

After installing CS3, I found it incredibly faster than CS2. I thanked god for not equipping Image ready with it but it contained an alternative called Adobe Stock Photos CS3. Also I wish to reveal out some cool resources and information for Photoshop users that i found out.

For dudes who wanna try the Trial version of Photoshop CS3, you can download from Adobe labs.