40 Beautiful Grunge Photoshop Tutorials Advertisement By Jacob Gube Grunge is a popular trend that gives designs a more organic and realistic look. It also provides a stark contrast to the simplistic, polished and rigid Web 2.0 trend, opting instead for a less uniform and more elaborate form of design. We’ve discussed grunge style in modern Web design before, as well as tips and tricks to achieve the grunge look. Beautiful Grunge Photoshop Tutorials Antique Ace of Spades This tutorial shows you how to create an old, stained playing card by using Blending modes. Creating an Old-Collage-Effect Poster Create a textured, old-school collage poster by following this excellent Photoshop tutorial. Quick Grungy Poster Learn how to create a grungy poster by using smart filters and a few image adjustments. Creating a Stunning Old-World Look in Photoshop In this Photoshop tutorial, you’ll learn how to create an old-world look using stock vectors imported into Photoshop. Want to find more Photoshop tutorials? (al) It's done.
CSS3 Dropdown Menu While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered. View Demo CSS3 Dropdown Preview The image below shows how the menu will look if CSS3 is not supported. One Gradient Image is Used A white-transparent image is used to achieve the gradient effect. The instensitiy of the gradient can be changed by shifting the background image up or down. CSS Code I’m not going to explain the CSS line by line. Update Apr 13 2010: Pure CSS Dropdown (No Image Used) The following demo used CSS gradient and IE gradient filter instead of the gradient image.
30 Recent Photoshop Tutorials for Web Designers Photoshop is near-ubiquitous with graphics-based web design. Even if you don’t consider yourself a graphic designer, having some Photoshop skills can really come in handy with your web design work. And tutorials take a lot out of the learning curve, so you can just follow the steps and get up to speed fairly quickly. This article shares with you the 30 Recent Photoshop Tutorials for Web Designers. Without further ado, here are 30 Recent Photoshop Tutorials for Web Designers: Web Layout Photoshop Tutorials Create a Clean, Minimal Website Design in Photoshop Create a clean, minimal website design using some simple techniques. Create a Consulting Web Layout Create a consulting web layout. Design a Fresh Web Service/SaaS Website Interface Design a clean and fresh interface that can be used for any web service or SaaS-based web app. Design an Innovative Portfolio Site Using Alternative UI/UX Create a portfolio site that stands out. How to Create an Effective Coming Soon Page Flickr Box
40+ Greatest Web Interface Design Photoshop Tutorials, Part I Whether you kick off a web interface design by sketching on papers or blank Photoshop canvas, it’s good to get some guides and inspirations. Here we’ve compiled some of the nicest Photoshop tutorial that guides you, step by step, building up a web interface all the way from scratch. While you are at it, here’s more design related content we’ve written previously that might interest you Full list after jump. Beer/bar restaurant website layout Design a Web 2.0 tab with Photoshop How To Create a Stunning Vista Inspired MenuHow to make a semi-transparent Vista-inspired menu using gradients, shadows, and blurring to produce a stunning modern effect. Author: Hongkiat Lim How to Create a Grunge Web Design Using Photoshop In this step-by-step web design tutorial, you will learn how to craft a beautiful and eye-grabbing grunge-themed web layout using Photoshop. This tutorial is geared for beginners and intermediate-level Photoshop users. This is a two-part tutorial series that will show you how to create a grunge web design using Photoshop, with the second part as a follow-up web development tutorial providing you instructions on how to convert the design mockup to a fully-functioning web page using standards-based HTML and CSS. Update: The second part of this tutorial series has been posted: Part 2: How to Code a Grunge Web Design from Scratch Final Result Click on the following image to view the full-scale version of the design that we will be creating together in this Photoshop tutorial. Setting Up the Photoshop Document 1 Create a new document in Photoshop with the dimensions 1200px x 1160px and with the document settings shown in the following figure. Creating the Layout’s Background 9 Create a new layer.
50 Brilliant CSS3/JavaScript Coding Techniques - Smashing Magazi Advertisement CSS3 is coming. Although the browser support of CSS 3 is still very limited, many designers across the globe experiment with new powerful features of the language, using graceful degradation for users with older browsers and using the new possibilites of CSS3 for users with modern browsers. That’s a reasonable solution — after all it doesn’t make sense to avoid learning CSS3 (that will be heavily used in the future) only because these features are not supported yet. The point of this article is to give you a glimpse of what will be possible soon and what you will be using soon and provide you with an opportunity to learn about new CSS3 techniques and features. In this post we present 50 useful and powerful CSS3/jQuery-techniques that can strongly improve user experience, improve designer’s workflow and replace dirty old workarounds that we used in Internet Explorer 6 & Co. Visual Effects and Layout Techniques With CSS3 Navigation Menus With CSS 3 Learning New CSS3 Selectors
760+ Photoshop Tutorials For Web & Graphic Designers We have compiled together the ultimate Photoshop tutorial list for web and graphic designers. There are over 700 Photoshop tutorials in this list, covering various subjects, from PSD slicing to fantasy art, logo design techniques to text effects, and so much more. Whether you’re looking for free Photoshop tutorials to learn how to create websites, logos, text effects, textures, patterns, icons, or even photo retouching effects, this list covers all your needs! Some tutorials are for beginners and others are more suitable for advanced users, but you will find something for everybody! Upgrade your Photoshop skills with these awesome tutorials! 20 Free Texture PS Tutorials In these amazing tutorials, you will learn new techniques and how you can use them to create various projects such as posters, banners, commercials, and more. Pin Post-Processing Photoshop Tutorials: 20 PS Tutorials for All Designers 25 Awesome Movie Effects PS Tutorials 20 Brilliant Sci-Fi/Space PS Tutorials PhotoshopStar
25 Excellent Photoshop Web Design Layout Tutorials By Marcell Purham Photoshop is a popular web design tool. With it, you can create web design mock-ups that can later on be converted to a functional HTML/CSS template. This collection of tutorials features top-notch techniques on how to create web design layouts using Photoshop. 1. Clean Style Portfolio Layout A step-by-step Photoshop web design layout tutorial using basic techniques. 2. Learn how to make a dark-themed blog design layout in this Photoshop tutorial. 3. Discover how to use patterns in website layouts through this Photoshop tutorial. 4. This Photoshop tutorial uses 960 Grid System for laying out the web page. 5. This simple tutorial shows you how to apply background textures in your web designs. 6. Learn to make a dark-themed photo gallery via this excellent Photoshop tutorial. 7. In this Photoshop tutorial, you’ll use layer styles to create great web design elements. 8. Learn techniques for creating elegant web designs in Photoshop through this tutorial. 9. 10. 11. 12. 13. 15. 16.
Create a Sleek, High-End Web Design from Scratch In this tutorial, we'll put together a high-end Web design using a crisp, thin font, gorgeous background images, and clever use of space and layout. You can easily use the technique to create your own unique designs. Then when you're finished reading this tutorial, you can cross over to our sister site NETTUTS and follow along as we build the design into clean and simple HTML. OK let's rock'n'roll! The End Design It's quite an elegant design, which would probably suit a designer portfolio-type site, but really could be altered for all sorts of purposes. The real power of this design is to show you what can be accomplished by keeping it simple. It's a simple structure: horizontal menu, main heading panel, and content area. Step 1 First of all, create a new document. Now our first task is to create a nice abstract background. Step 2 Now we want a visually interesting background which is abstract enough that it doesn't distract from the text. Step 3 Step 4 Step 5 Step 6 Step 7 Step 8 Step 9 Step 10
44 Examples of Unique and Inspiring Green Logos Awhile ago, we have posted an article which centered around creating logos with one color-scheme… The brown logos collection proved to be quite unique and artistic… At this time, we give you another post similar to this. We are proud to present 44 Examples of Unique and Inspiring Green Logos to our readers… Undoubtedly, these logos will help you get ideas for your master pieces.. Take time to check out the logos below… Relish and get educated with the creativeness indulged in this creation by several designers in the net… Enlivening logos are hard to come by, so here’s a chance for you to be exalted and get as many ideas as possible… Have fun!!! Ads Among these different kinds of Green Logos, which was your favorite?
25 Photoshop Tutorials for Web Designers Adobe Photoshop is the tool of choice for most web designers. From creating a website template to objects and components such as content boxes and buttons, Photoshop doesn’t fail to deliver. In this collection, you’ll find 25 excellent Photoshop tutorials geared towards web designers. You’ll find a variety of tutorials that include creating full web page templates, navigation menus, headers, and content boxes. If you know of a good Photoshop tutorial for web designers – why don’t you share it with all of us in the comments.
35 Tutorials for Creating Website Layouts in Photoshop Photoshop is an excellent tool for creating attract websites. Fortunately, if you’re looking to brush up your skills or learn some new tricks for creating layouts and designs in Photoshop, there are plenty of tutorials specifically for this purpose. The 35 tutorials featured here will each take you through the process of creating an example website design in Photoshop. The are all different types of websites and styles of design represented, so you should certainly be able to find some useful tutorials from this group. Looking for hosting? WPEngine offers secure managed WordPress hosting.
Tips for Coding and Designing Usable Web Forms Jan 21 2010 By Louis Lazaris The web form has been one of the most discussed elements in web design for more than ten years now. We can’t help it. Call-to-action functionality often leads users to a form; purchases are made using forms; users register or subscribe using forms — the uses for forms are endless. While it is fairly easy to slap together a form in HTML, it’s not as easy to code, style, and design your form in a manner that makes it usable and accessible to the majority of users. Two-Column vs. This decision will generally depend on the content of the form, but it’s often preferable to avoid a two-column layout if the form is fairly simple. Below is a good example of a simple form that places each label above its related form element. What are the benefits to this type of form layout, as opposed to a two-column form? By contrast, look at the two-column form below: Use Inline Form Validation Really Easy Field Validation Group Related Fields Cosmicsoda Registration Form Further Reading