Resource: Ultimate Web 2.0 Layer Styles

September 5, 2007 | Posted in Resources | 67 Comments »

Photoshoppers, this little freebie can save you hours if you create buttons or bars for web layouts on a regular basis. Dezinerfolio.com has done all the hard work for us already. All you have to do is download and install the file, and start making Web 2.0 buttons in seconds using the layer styles in Photoshop.

Ultimate Web 2.0 Layer Styles for Photoshop and Gimp

Gimp Users:

The kind folks over at Gimp-Tutorials.net have converted 30 of the styles for Gimp users to enjoy.

Ultimate Web 2.0 Layer Styles for Photoshop and Gimp

This entry was posted on Wednesday, September 5th, 2007 at 4:55 pm and is filed under Resources. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.
Stumble It
Add to Del.icio.us

67 Responses to “Resource: Ultimate Web 2.0 Layer Styles”

  1. Bandar Sep 5, 07 at 5:15 pm

    Nice ! .. i Love it ..
    Bittbox .. i do not see a contact link so am going to ask here :

    in Illustrator, i do some complex designs.. with Blend Modes and Opacity Masks and Clipping Masks .. it looks great in Illustrator, but it looks wrong and very ugly in Preview.app ( OS X ) .. i am afraid if i send it to print they will use the PDF version embedded in the .ai file .. then it may look wrong.

    can you post some tips on how to make the design looks the same in illustrator and acrobat and preview.app? i mean is there a technique?

    Please! you are an expert ..

    Thanks :)
    and i am very sorry to go off-topic ..

  2. Mark Sep 5, 07 at 5:39 pm

    thanks bitbox.

    i wish you would stop using PS for web work. It is no doubt the best Image Editor there is but is way too cumbersome for web work.

    Bout time you bought Fireworks CS3 and gave us FW resources instead (when the post is web-design related)

    Thanks again, appreciate all the help.

  3. Chris Perardi Sep 5, 07 at 5:49 pm

    Re: Bandar

    Unfortunately, complex transparencies in PDFs can be quite problematic in Preview.app. Vector transparency can be a giant pain in the ass, depending the resources of your printer and/or your on-screen viewer.

    There’s a couple ways to guarantee good results:

    1. If this is going to print, and you’re paranoid about the output, you can save the PDF as Acrobat 4/PDF 1.3. This flattens the transparency into a bitmap, so that, basically speaking, all the crazy semi-transparent gradients become very simple JPEGs. (It’s quite complex, Adobe has more info if you search around. I’m just hyper-generalizing.) There’s a few things to consider, though: this can dramatically increase your file size, and it can cause banding in gradients on high-resolution professional printers. If possible, you should send your press person an Acrobat 5/PDF 1.4 or above file (or just hit the Press Quality preset), or just send them the original AI/PSD/INDD file. However, if there are issues, Acrobat 4 files are a good last resort.

    2. If this is solely intended for on-screen viewing, you could just save as a PNG or JPEG. My favorite, and pretty fool-proof, method is to create a PDF in Illustrator or InDesign, then open it in Photoshop. Then, when it asks, rasterize it to 300dpi, then save it as a PNG, if it’s more flat and vector-y, or a JPEG, if it’s photographic in nature. Not as high quality as a pure vector image, but if it’s only for screen/relatively cheap desktop printer, it’s good enough.

    And, yes, this is all a giant pain in the ass.

  4. Bandar Sep 5, 07 at 8:32 pm

    Chris Perardi
    Thanks man ..
    I intend printing these designs .. and it is going to be very large ( at least 5 X 5 meters ) so i guess i will just send them the illustrator file ( without a PDF preview embedded ) and i will let the press feel the pain .. i will not worry about the Preview.app crappy look anymore .. as long as it looks good in illustrator ..
    Thanks again :)

  5. Bandar Sep 5, 07 at 8:38 pm

    One last thing ..
    Can you ( Bittbox ) give us a folder icon ( OS X & Vista ) so we ( the fans ) can apply it to the folder we call Bittbox where we gather all downloads from this sweet blog ?

    it would be sweet !

    Thanks ( from the fans )
    :)

  6. McKlain Sep 6, 07 at 2:43 am

    I totally agree with Mark.

    PS wasn’t made for web design. There’s a lot of things that you can make in Fireworks in a few seconds that takes you a lot of complicated actions to do in PS.

    I suposse that so many people use it because it’s the first “design” program they learned to use.

  7. Radnab Sep 6, 07 at 3:22 am

    how to use with fireworks.

  8. Dominik Lenk Sep 6, 07 at 3:54 am

    hey bittbox, thanks for the link. I would have needed it about five days earlier though:-) The idea is quite nice, because there are only so many colour combination that you will ever need. And if you need to modify them, you have a good starting point.

    About Photoshop vs Fireworks. Yes, I agree that fireworks is probably the quicker way to create layouts, yet with a little bit of extra time, photoshop can help you create much more advanced ones.
    One things that really bugs me in Photoshop though (I don’t know whether it is any different in Fireworks) is that overlapping slices ’slice each other up’, which means that you have to export your images in steps.

  9. mgrundy Sep 6, 07 at 4:20 am

    Hi Bitt, great site!

    I completely agree with the Fireworks comments, I use Fireworks 8 and love it but I just can’t seem to get away with Photoshop! I’ve been dabbling with Illustrator which seems to have similarities with Fireworks so I find it slightly easier.

    Keep up the good work!

  10. Chris Sep 6, 07 at 6:16 am

    total lazy-fest! Thanks once again.

  11. Tom Sep 6, 07 at 7:30 am

    I totally agree with the comments on Fireworks. Photoshop is for photos…Fireworks is for vectors (and is way easier to use than Illustrator!)

    Bittbox, you provide some really awesome resources. I just can’ t use any of them! :)

  12. Proj Sep 6, 07 at 10:50 am

    First off, thanks for all the amazing resources Bitt. I’ve been pimping your site off onto all of my designer friends from day one.

    Secondly, I prefer PS over FW for web work. This might just be laziness, but I get exactly what I want from PS. Since my time is about 50/50 print and web I’d rather not have to open yet another application to get the job done. I the end I suppose it’s parallel to the Mac vs PC debate.

    Mac-4-Life!

  13. michaelbrito Sep 6, 07 at 10:59 am

    lifesaver!!!

  14. df Sep 6, 07 at 2:15 pm

    I saw the dezinerfolia photoshop gradients months ago, and thought I couldn’t use this post because I only have gimp. But thanks for including the gimp link!!!

  15. Josef J Sep 6, 07 at 4:24 pm

    This is freaky, I was just thinking today about how cool it would be if they make a plug-in for PS or AI to make Web 2.0 Buttons!! anyway, thanks for the link, it rocks!!

  16. links for 2007-09-06 « toonz Sep 6, 07 at 4:33 pm

    [...] Resource: Ultimate Web 2.0 Layer Styles | BittBox (tags: photoshop plugin style gimp buttons) [...]

  17. Social Networking Resources, Tips and Secrets Sep 6, 07 at 7:50 pm

    [...] Resource: Ultimate Web 2.0 Layer Styles | BittBox [...]

  18. seo Sep 7, 07 at 6:07 am

    thanks.

  19. Mick Sep 8, 07 at 12:06 pm

    In regards to Bandar’s questions and comments regarding output of AI files for large format printing:

    I work for a commercial marketing and digital printing company in Phx. AZ and amongst a glut of things we do one is large format printing. Based on my experience with this type of printing I would recommend you send your printer of choice your native AI files (with any linked images and don’t forget to outline your fonts) and not worry about outputting to a PDF. I know that our LF prepress guys prefer the native files as they can more easily take care of transparency and banding issues before they output to a TIFF (which is the file format they will rip to press for large format prints). Also, many printers will allow you to request a test strip of your print to approve such things as color and/or known transparency issues (though this might be an add’l a cost, it is often well worth it).

    I hope that helps and good luck with your prints!

  20. Bandar Sep 8, 07 at 3:05 pm

    Mick

    Thanks, I will take your advice and always send them the Ai file.. and it makes sense.

    Thank you and thanks to Bittbox.

    :)

  21. Mick Sep 8, 07 at 11:28 pm

    Bandar:

    no prob!

  22. Web 2.0 Layer Styles » Add-ons Sep 10, 07 at 2:59 pm

    [...] mag es fast schon nicht mehr hören, aber drüben in der Bittbox liegen die Ultimate Web 2.0 Layer Styles herum, was vielleicht für den ein oder anderen Leser interessant sein könnte. Zumindest für die [...]

  23. Web 2.0 Layer Styles « Freeze1909’s Weblog Sep 11, 07 at 1:16 am

    [...] Begriff Web 2.0 noch nicht schreiend wegrennt, für den bietet die Bittbox ein paar interessante Ebenenstile an. Wenns Die Zeit zulässt werd ich da mal was mit [...]

  24. urbandesire » Blog Archive » links for 2007-09-12 Sep 11, 07 at 6:26 pm

    [...] Resource: Ultimate Web 2.0 Layer Styles | BittBox (tags: photoshop Webdesign templates Design) [...]

  25. Forum Sep 12, 07 at 12:10 am

    Good work! Thanks for this information!

  26. Adult Forum Sep 18, 07 at 3:48 am

    Thanks…

  27. be?ikta? Nov 22, 07 at 5:16 am

    Thanks for this information

  28. eglence Nov 25, 07 at 12:46 pm

    thank you very

  29. programlar Dec 19, 07 at 1:50 pm

    thanks nice text…

  30. hikaye Dec 28, 07 at 4:56 am

    thanks for all…

  31. sex Jan 5, 08 at 8:40 am

    thanks

  32. sex Jan 8, 08 at 10:17 pm

    thanks you

  33. e-okul Jan 8, 08 at 10:18 pm

    nice

  34. sex hikayeleri Jan 8, 08 at 10:20 pm

    thnks

  35. güzel sözler Jan 12, 08 at 6:51 pm

    Thank you.

  36. Porno Jan 16, 08 at 5:38 pm

    I wrote up my comments and advice for those sites

  37. porno Jan 31, 08 at 2:45 pm

    thank you

  38. kadin Feb 11, 08 at 1:05 pm

    thanks great post man

  39. RockGrrl v1.0 | GuitarAngel.net Feb 13, 08 at 9:25 pm

    [...] visuals here myself, meaning the shine effect on the images, however a lot of inspiration came from this resource for awesome Photoshop layer styles. Changing Sidebar One major thing that makes up this design is [...]

  40. Sex Feb 22, 08 at 5:24 pm

    thx..

  41. youtube Feb 23, 08 at 4:58 pm

    thanks for the post.

  42. video izle Feb 29, 08 at 8:14 am

    thanks…..

  43. sicak video Mar 3, 08 at 8:27 am

    thanks…

  44. Gelinlik Resimleri Mar 10, 08 at 10:58 am

    thak youuu

  45. atesli video, atesli videolar Mar 10, 08 at 8:38 pm

    thanx a lot

  46. mirc Mar 14, 08 at 2:01 pm

    Successful website

  47. mirc Mar 14, 08 at 2:02 pm

    thanx a lot

  48. kishore Mar 26, 08 at 6:54 am

    Woww!!. its lovly.
    http://www.kishoreblog.com

  49. alptekin Mar 27, 08 at 3:38 am

    thnks
    http://saglik-dunyasi.com

  50. limewire Mar 30, 08 at 10:23 am

    thanks a lot..

  51. porno Aug 24, 08 at 6:32 am

    online porno izleme mekani

    liseli porno

    http://www.videotuba.org

  52. partner Oct 5, 08 at 3:46 pm

    thanks admin..

  53. arkada? Oct 14, 08 at 2:00 am

    thank very nice.

  54. arkadas Oct 14, 08 at 2:00 am

    x

  55. spor yorum Jan 4, 09 at 1:46 pm

    thanks man

  56. Tyler Hurst Feb 3, 09 at 12:59 pm

    Thanks Bit Box…I like to use these when I design Decals, Custom Decals, Baners and stuff. Especially graphics it make life easy!
    123Decal.com Custom Decals, Custom Banners, Static Cling Decals

  57. mirc May 22, 09 at 11:17 am

    Thanks best regards

  58. porno May 25, 09 at 12:31 am

    thankss adminnn

  59. siki? Jun 18, 09 at 11:32 am

    thnX Admin

  60. sikis Jun 18, 09 at 11:33 am

    saolas?n Thnx.

  61. porno Jun 20, 09 at 9:18 am

    Tnhx.

  62. izle Jun 22, 09 at 3:37 pm

    online porno izleme mekani

    liseli porno

  63. ligtv izle Jun 24, 09 at 11:16 am

    ligtv izleme adresiniz

  64. porno izlesek Jul 28, 09 at 10:30 am

    porno, izle, izlesek, sicak, gizli çekim, türbanl?, liseli

  65. porno izlesek Jul 28, 09 at 10:31 am

    porno, izle, izlesek, sicak, gizli çekim, türbanl?, liseli

  66. faruk Sep 16, 09 at 8:23 am

    http://www.kralpornolar.com

    porno izle,turk pornosu,liseli porno izle,

  67. siki? izle Nov 6, 09 at 1:04 pm

    online porno izleme mekani

    liseli porno

LEAVE A COMMENT




Message: