How to Create a Sexy Small Download Icon Hi there folks, I’m back with another tutorial on how to create a sexy small download graphic. It doesn’t even have to end up as a download graphic, it can be anything. Think of a loading bar, a upload thing or even a cool button. In this tutorial you will learn simple but elegant techniques that you can apply on your designs! Resources for this tutorial The only thing you need for this tutorial is the Open Sans font. Download PSD Here. Step 1: Setting up the Document Start by creating a document in Photoshop, something like 600 x 400 px.Fill the background with the bucket tool (G). Step 2: Working on the base shape Here we go. First, grab the Ellipse tool. With that anchor point selected, hold shift and press your down arrow twice. Let’s style that thing up! Gradient OverlayInner shadowStroke Settings below: Next is the little lip at the bottom of the main shape. I made this with the pen tool. Drop ShadowInner ShadowColor overlay Step 3: Let’s bring in some colour Layer styles:
Designing the Web: Photoshop Tutorials for Designing a Website Feb 17 2012 For those of us in the business of designing the web, one area of resources that always prove invaluable to have in our design arsenals is tutorials. Learning how other web designers have crafted their designs, and which tools they always rely on can always help to guide us as we are either developing or honing our own skills. So we search the web for useful tutorials. Well today we have done the searching for you. Given that Photoshop is one of the most powerful and popular graphics programs for web design related projects, we decided to turn our focus in that direction for the search. Designing the Web Create a Modern Lab Theme Web Design in Photoshop This tutorial from Design Instruct will show you how to create a web layout with a sleek and modern look using Adobe Photoshop. Other important lessons learned in this tutorial: Design a Professional, Clean Community Blog Theme in Adobe Photoshop How To Build a Stylish Portfolio Web Design Concept More on Page Two
Textured Web: Showcase of Textured & Patterned Website Designs Feb 22 2012 When it comes to design resources, textures and patterns are among some of the most popular tools on offer. And while we may never be able to get a single, definitive answer from the community as to why this is, one can surmise that their popularity is probably due to their extreme usefulness. In fact, one need only look around the web to find some stunning examples of these elements being deployed with fantastic results. Textured Web Rockatee is a dark design with a geometric patterned header and footer and two different textures. Create Digital Media has a beautiful open, expansive website, and the minimal design is complemented by the light textured background. Celebration Invitations has a large header that uses a light texture to really make the space pop and not feel at all underused. Stedesign is a vintage styled site in which the design uses a number of textures to really pull the look off with flawless execution. (rb)
CSS Tools for Designers and Developers CSS tools are important for web designers and developers because they help them by simplifying the jobs they have to do. Considering time is money and such generators spare time, it is easy to understand why many web developers are excited about these tools. The only problem is that some of them are not well-known, therefore I made a showcase for you with CSS tools and generators which developers and designers can use to create functional and optimized websites faster. Tools for layouts Templatr If you don’t know HTML or CSS and want a website, Templatr can create a layout for you in a matter of seconds. CSS Template Generator CSS Template Generator is not as complex as templatr, but offers some nice features too. What I like about YAML is the amount of options you have. Others: Firdamatic, CSS Portal, CSS Creator, Layout Generators, CSS Layout Generator. Tools for the grid system Variable Grid System Gridinator Gridinator allows the user to customize the layout more than the previous tool.
40 CSS Reference Websites and Resources Jan 13 2012 If you want to design websites or modify your existing website design, then you need to have at least a basic knowledge of Cascading Style Sheets (CSS). Thankfully, CSS is a very easy language to get to a grip on, however you may find it takes a little more time to master it. Today we would like to share with you 40 resources that will help you on your CSS journey. CSS Reference 1. It’s perhaps not the most user friendly reference available, however the official CSS3 specifications from the World Wide Web Consortium lists everything you ever need to know about CSS. 2. A user friendly list of every CSS property you can think of. 3. As one of the largest webmaster communities on the web, Sitepoint doesn’t disappoint with a great reference for learning CSS. Where the resource really comes into it’s own is the unique play area that each property has. 4. A dedicated CSS website that has useful reference pages for CSS properties, CSS shorthand properties and CSS3 selectors. 5. 6. 7.
Product Graphics: 6 Techniques to Make Images More Informative Web designers have become very crafty with marketing techniques. Luring page content is always good, but when it comes to grabbing your visitors attention images are the most popular form of media. They don’t require sound like demo videos and they can quickly relay important information within a matter of seconds. It may seem easy, but there are some notable techniques to building informative images on websites. These include feature labels, close-up screenshots, price comparisons, and other minute details. Check out the ideas below where we offer not only tips but real-life examples of beautiful product graphics jam-packed with great info. 1. Informative images should not be used in place of good web page content. When you try to demonstrate a software tutorial (such as Photoshop tutorial) it can be difficult to convey the message into written text. On the original article page this image adds a much clearer picture into your head towards what you’ll be creating. 2. 3. 4. 5. 6. Step 1
How to Grow as a Designer or Developer - Noupe Design Blog Jun 22 2011 For many of us in the design and development communities, when we first begin down this path, we tend to go in hungry searches for knowledge and like a sponge we soak up all we can find. However, at times we can come to a plateau where we comfortably set up our virtual camp and we work from this place. Our quest for knowledge somewhat settles as does our thirst as we become distracted by trying to make our mark and establish ourselves in the community. This is not a blanket pandemic, but it does happen, and it is in these times that we need the subtle reminder that we should always be moving forward, reaching for that next plateau. Fighting Complacency Life has a tendency of getting in our way from time to time, but generally the problem that we are dealing with when we find ourselves comfortably resting on our laurels is one of complacency. Time Management You want to manage your time effectively or before you realize, it will have all slipped away. Ego Check d. Experiment (rb)
A Graphic Design Primer, Part 2: The Principles of Design - Noupe Design Blog Jun 20 2011 In the last part, we covered the elements that make up most designs. In this part, we’ll cover the principles you can apply to those elements to create a design. Learning to recognize and apply these design principles to your own work is a key step in becoming a better, more competent designer. Balance Balance is the way elements are distributed throughout a design. There are three basic types of balance: symmetrical, asymmetrical, and radial. Asymmetrical balance is when the two sides of a design aren’t the same, but have elements that compliment one another and still provide the same kind of stability a symmetrical design provides. Radial balance occurs when design elements are laid out in a circular pattern. Balance can be achieved through the use of shapes, lines, colors, textures and other elements. Examples Scribble and Tweak An example of slightly asymmetrical balance, especially in the header. Quirky Kid Clinic A good example of a symmetrical design. Proportion Contrast