Archive

Archive for the ‘Designing’ Category

How to Create an Animated Gif Using Photoshop

November 25th, 2010

Want to impress the world with your Web site? Create your very own animated gif using Photoshop.

Instructions

Creating the Art

  • 1

    Open Photoshop 5.5 and create a new image file measuring 100 by 100 pixels. Set the resolution to 72 pixels per inch and the mode to RGB color.

  • 2

    Choose Show Layers from the Window menu. This will bring up the Layers floating palette.

  • 3

    Select the pencil tool. Use it to draw a picture.

  • 4

    Click on the Layer palette’s submenu arrow and select Duplicate Layer.

  • 5

    Click on the eyeball icon to the left of the bottom layer on the Layer palette. Use the pencil tool to add to the image on the top layer. Select the erase tool to remove part of the image.

  • 6

    Under the file menu, select Jump to, and then Adobe ImageReady 2.0. Save when prompted.

  • Animating in ImageReady

  • 1

    Choose Show Animation from the Window menu. This will bring up the Animation floating palette.

  • 2

    Click on the Animation palette’s submenu arrow and select Make Frames from Layers.

  • 3

    Use Save Optimized As to save the animation under a new name.

  • admin Designing , ,

    Win 10 Amazing WordPress Themes From Obox Design

    July 14th, 2009

    Today, the cool guys over at Obox Design introduced their new line of professional WordPress themes called “The Obox Signature Series”.

    Thanks to David and Marc, we will be giving away a total of 10 copies of the “Arcade” and “Left Handed” themes (single user license).

    All themes are packaged with OCMX-Live, a powerful add-on to the WordPress backend which allows you to control and customize many of the elements of your theme.

    To participate in this great competition, simply follow @oboxthemes and leave a comment below with your Twitter username and anything else you’d like to say about these awesome themes.

    The 10 winners will be chosen at random on Tuesday, July 14th and they will be notified via email as well as announced here on WDD. See the previews below…

    Arcade

    arcade

    “Arcade” is a great WordPress theme inspired by Martijn van Dam who creates some incredible designs. The theme is perfectly suited for gamers or sci-fi subjects with a touch of retro design.

    Left Handed

    lefthanded

    Left Handed is perfect for those who have an art orientated blog and don’t want to be left in the field with just another blog template. This theme will impress your readers with its attention to detail in the custom hand drawn fonts and comment sections.

    All winners will receive a full year of support for their new theme for free. For more info you can visit the Obox Design website where you can view their full theme collection and more details on support and pricing.

    Once again, in order to participate in this great competition, simply follow @oboxthemes and leave a comment below with your Twitter username and anything else you’d like to say about the themes.

    admin Designing , ,

    10 Amazing Designers In A Community

    July 14th, 2009

    I come from a print background of 9+ years. The last 4-5 I have been designing for the web. I have been following these 10 amazing designers that have influenced and taught me plenty through their books, websites & even recent portfolios. I asked around for other designers opinions of whom their favorite’s were and realized the choices were pretty close if not the same. I chose to feature a little bit about each one and show some work they have done. I think the following designers have influenced and shaped the way we (younger designers) think today.

    Jason Santa Maria

     

    Jason Santa Maria is a Graphic Designer living in sunny Brooklyn, NY. He serves as Creative Director for Happy Cog Studios, both in New York and Philadelphia. This status grants him access to most black-tie galas and groundbreaking ceremonies.

    Cameron Moll

     

    Recognized as one of the industry’s most balanced new media designers, Cameron Moll is proficient in functional web design, clean markup, and savvy print design. Cameron has been involved in the design and redesign of scores of websites, and his influential techniques have found favor in circles across the web. He was a contributing author for the book, “CSS Mastery”. Cameron’s work has been recognized by respected organizations such as National Public Radio (NPR), Communication Arts, and Veer. His personal site, CameronMoll.com, delivers design how-to in the form of engaging conversation, on-topic banter, and downloadable artwork source files.

    Jeffrey Zeldman

     

    Jeffrey Zeldman was one of the first designers, bloggers, and independent publishers on the web, and one of the first web design teachers. In 1998, he co-founded—and from 1999 to 2002 he directed—The Web Standards Project, a grassroots coalition that helped bring standards to our browsers.

    He publishes A List Apart “for people who make websites;” has written two books (notably the foundational web standards text, Designing With Web Standards, 2nd Edition); co-founded the web design conference An Event Apart; and founded and is executive creative director of Happy Cog™, an agency of web design and user experience specialists.

    Dan Cederholm

     

    Dan Cederholm is a web designer and author living in Salem, Massachusetts. He’s the Founder and Principal of SimpleBits, LLC, a tiny web design studio.

    A recognized expert in the field of standards-based web design, Dan has worked with Google, MTV, AIGA, ESPN, Blogger, Fast Company, Inc.com, and others. With each new project, comes an opportunity to minimize markup and embrace the flexibility of CSS.

    Dan co-founded Cork’d, a social network and reviewing application for wine aficionados, and launched IconShoppe, a storefront for stock web icons hand-crafted by SimpleBits.

    He is the author of two popular books: Bulletproof Web Design (New Riders, 2005) and Web Standards Solutions (Friends of ED, 2004). Dan also runs the popular weblog SimpleBits, where he writes articles and commentary on the web, technology and life.

    Daniel Mall

     

    An interactive designer, living the heart of Philadelphia, PA. To me, being a designer doesn’t just mean I make pretty pictures (although I can do that too); it’s about conceptually and visually helping to solve people’s problems. Professionally, my passion is generating ideas, theories that haven’t been explored yet. Technically, I specialize in Flash, XHTML, CSS, and typography.

    Andy Clarke

     

    Andy was making web sites for food when the dinosaurs roamed the earth. These days, he pretends to work hard as Creative Director at Stuff and Nonsense, but according to his wife he actually has rather an easy life. In his spare time he dreams of having a misspent youth and blogs at For A Beautiful Web.

    Shaun Inman

     

    Shaun Inman is a successful designer and developer living and working out of Chattanooga, Tennessee. Originally from Norwood, Massachusetts, he studied Graphic Design at the Savannah College of Art & Design after which he spent a few years in Baltimore, Maryland. His interest in design gradually shifted to web design and development thanks to many well-documented open-source and standards-based technologies.

    Dave Shea

     

    Dave is a graphic designer for his own Bright Creative in Vancouver. He’s the creator and cultivator of the highly influential css Zen Garden, as well as being a member of the Web Standards Project. Dave writes about all things web for his daily weblog.

    Andy Budd

     

    Andy works as senior web designer for Message Digital Design Ltd. In his spare time he runs SkillSwap.org, a project that provides FREE training for his local new media community. He also occasionally posts to his blog.

    Eric A. Meyer

     

    .Eric is an internationally recognized expert on the subjects of HTML, CSS, and Web standards. A widely read author and sought-after speaker, he is the founder of Complex Spiral Consulting, a company that aims to help clients save money and increase efficiency through the use of standards-oriented Web design techniques.

    admin Designing , ,

    12 Essential Rules To Designing A Logo

    July 6th, 2009

    The logo is the face of any brand — the very first impression — so its design is extremely important.

    When executed correctly, a logo is a powerful asset to your client’s brand.

    However, creating an effective visual representation of a brand requires much more than just graphic design.

    Like any line of work that involves a set of specific skills, logo design requires plenty of practice and experience for it to be successful; knowledge is definitely power for any graphic designer.

    For this reason, we have outlined 12 essential rules to follow in order to design an effective logo.

     

    1. Preliminary Work Is a Must

    EXTERN_0000

    Preliminary sketches are an important first step in designing an effective logo.

    These can be as simple as paper and pen drawings or drafts made using a vector program, such as Illustrator.

    The bottom line is that you compromise the final result if you rush, or skip, this step.

    Start with 20 to 30 sketches or ideas and then branch out to create variations of the original ideas.

    If nothing seems to work, start over and begin sketching new ideas.

    An effective graphic designer will spend more time on this preliminary work than any other step in the design process.

    2. Create Balance

    Balance is important in logo design because our minds naturally perceive a balanced design as being pleasing and appealing.

    Keep your logo balanced by keeping the “weight” of the graphics, colors, and size equal on each side.

    Though the rule of balance can occasionally be broken, remember that your logo will be viewed by the masses, not just those with an eye for great art, so a balanced design is the safest approach.

    3. Size Matters

    When it comes to logo design, size does matter. A logo has to look good and be legible at all sizes.

    A logo is not effective if it loses too much definition when scaled down for letterheads, envelopes, and small promotional items. The logo also has to look good when used for larger formats, such as posters, billboards, and electronic formats such as TV and the Web.

    The most reliable way to determine if a logo works at all sizes is to actually test it yourself.

    Note that the smallest scale is usually the hardest to get right, so start by printing the logo on a letterhead or envelope and see if it is still legible.

    You can also test for large-scale rendering by printing a poster-sized version at a print shop.

    4. Clever Use of Color

    EXTERN_0001 Color theory is complex, but designers who understand the basics are able to use color to their advantage.

    The basic rules to keep in mind are:

    • Use colors near to each other on the color wheel (e.g. for a “warm” palette, use red, orange, and yellow hues).
    • Don’t use colors that are so bright that they are hard on the eyes.
    • The logo must also look good in black and white, grayscale, and two colors.
    • Breaking the rules sometimes is okay; just make sure you have a good reason to!

    Knowing how colors evoke feelings and moods is also important. For example, red can evoke feelings of aggression, love, passion, and strength.

    Keep this in mind as you try out different color combinations, and try to match the color to the overall tone and feel of the brand.

    Playing around with individual colors on their own is another good idea. Some brands are recognizable solely by their distinct color.

    For example, when you think of John Deere, you think of the “John Deere green” color, and this sets this brand apart from its competitors and, more importantly, makes the brand all the more recognizable.

    5. Design Style Should Suit the Company

    EXTERN_0002

    You can use various design styles when creating a logo, and to pick the right one, you should have some background information about the client and the brand.

    A recent trend in logo design is the Web 2.0 style of 3D-looking logos, with “bubbly” graphics, gradients, and drop shadows.

    This style may work well for a Web 2.0 website or tech company, but may not be effective for other kinds of brands.

    Research your client and its audience before you begin your preliminary work.

    This will help you determine the best design style from the start and save you from having to return repeatedly to the drawing board.

    6. Typography Matters… a Lot!

    Choosing the right font type and size is much more difficult than many beginner designers realize.

    If your logo design includes text, either as part of the logo or in the tagline, you will need to spend time sorting through various font types — often, dozens of them — and testing them in your design before making a final decision.

    Try both serif fonts and sans-serif fonts as well as script, italics, bold, and custom fonts.

    Consider three main points when choosing a font to accompany your logo design:

    • Avoid the most commonly used fonts, such as Comic Sans, or else your design may come off as amateurish.
    • Make sure the font is legible when scaled down, especially with script fonts.
    • One font is ideal, and avoid more than two.

    Strongly consider a custom font for your design. The more original the font, the more it will distinguish the brand. Examples of successful logos that have a custom font are Yahoo!, Twitter, and Coca Cola.

    7. The Goal IS Recognition

    EXTERN_0003

    The whole point of creating a logo is to build brand recognition. So, how do you go about doing this?

    Well, it varies from case to case, but the goal with the logo is for the average person to instantly call the brand to mind.

    A few examples of this are the logos for Coca-Cola, Pepsi, McDonald’s, and Nike.

    Just a glimpse of any of these logos is all you need to recognize the brands.

    The key to making a popular and recognizable logo is to combine all of the elements discussed in this article: size, style, color, typography, and originality.

    Overlooking any of these during the design process will impair the quality of your final design. Examine your own logo design and see whether it meets all of these criteria.

    A quick test to determine if your logo is recognizable enough is to invert it using any graphic design software and see if you can still recognize the brand. Additionally, you should mirror the logo and see if it’s easily recognizable in this state.

    Keep in mind that logos aren’t always seen head-on in real world situations, for example, on the side of a bus or a billboard that you drive by.

    Therefore, you should make sure to view your logo design from all angles and ensure that it’s recognizable from any direction before submitting it to your client.

    8. Dare to be Different

    To stand out from the competition, you must distinguish yourself as a designer with a distinct style. Rather than copy another design or style, be innovative and stand out from the crowd.

    So, how can you be different? Try breaking the rules of design and taking risks.

    Try a variety of styles to find the one that works best for your client. Try different color combinations until you find one that makes your design truly original.

    Have fun with the design program you use, and keep tweaking the design until you feel you’ve got it right.

    9. K.I.S.S. (Keep it Simple, Stupid)

    EXTERN_0004

    The simpler the logo, the more recognizable it will be.

    For example, the Nike swoosh is an extremely simple logo and is also one of the most recognizable in the world.

    Follow the K.I.S.S. rule right from the start of the design process, when you are brainstorming ideas and doodling sketches.

    Often, you’ll find that you start with a relatively complicated design and end up with a simpler version of it in the end.

    Work the design down to its essentials and leave out all unnecessary elements.

    10. Go Easy on Effects

    Adobe Illustrator, Freehand, Photoshop, and other graphic design programs are extremely powerful tools and have many filters and effects that you can apply to your logo, but don’t get carried away!

    There’s a time and place for these powerful tools, but it is not necessarily to design a logo.

    Of course, playing around and seeing whether they enhance a logo is fine, but just remember that simplicity is key.

    11. Develop a Design “Assembly Line”

    To produce consistently high-quality logos, you need to develop your own design process, or “assembly line.” This should include the following steps:

    • Research
    • Brainstorm and generate ideas
    • Preliminary sketches
    • Develop vector designs
    • Send to client
    • Add or remove anything the client wants
    • Finalize the design and resubmit to client

    Although you may want to tweak the order slightly, you should follow these basic steps with each logo design.

    This will help you streamline your work, stay organized, maintain focus, and deliver better quality and more consistent results with each job.

    12. Use Other Designs for Inspiration Only!

    The last rule for designing an effective logo is quite simple: don’t copy other designers’ work! While there’s nothing wrong with being inspired by other designers, copying another person’s ideas or work is morally and legally wrong.

    Gallery websites exist that let you use vector art images free of charge, with proper attribution under the Creative Commons License, but I strongly recommend not going this route.

    These websites can be helpful for getting ideas during the brainstorming stage, but you’re better off starting your design from scratch and making it 100% original.

    admin Designing ,

    Free Website Style Guide Photoshop Template

    July 6th, 2009

    If you are a website designer, you probably know that a style guide should be a core element of every professional website design and development process. Having a clear and well prepared style guide can save an enormous amount of time for developer and save the designer from having to explain the design details over and over. I have created a blank website style guide template.

    Download it exclusively from Sharebrain:  a fully layered, well documented, blank Photoshop PSD template, with all design elements, typography tags, comments, ads, poll and many more, to speed up your design process and make your developers happier. It’s well documented layers make it super easy to adjust it to your needs, apply layer styles and add colors or effects as needed. Using the 960px grid system with guidelines makes layout rearranging a matter of seconds.

    blank_style_guide_website_template_m

    Features:

    - 960px grid system with photoshop guidelines
    - Header with Logo, Company name and company slogan
    - Two level menu
    - Two column layout with right sidebar
    - Headline tags H1 - H4
    - Typography formatting, including hyperlinks
    - Category and Tags
    - Video player with FlowPlayer layout
    - Inline Image
    - Quote box
    - Social Bookmark icons
    - Comments with avatars and comment form
    - Search box
    - Poll with voting results, Events with calendar icons, Ads and
    Comments blocks in sidebar
    - Footer with main menu links

    Now please do 3 things:
    a. Download it & use it :-)
    b. If you like it, tell everyone about it so we can bring you more freebies.
    c. Share your designs with us in comments to this article.

    admin Designing , ,

    Create Fireworks in Flash

    July 3rd, 2009

    This article was submitted by Enric Godes, project manager at Vasava, a design studio. Godes and Vasava were commissioned by Adobe Software to create this tutorial.

    Today we’re going to develop a virtual fireworks display in Flash.

    To follow along, you’ll need:

    How to Proceed

    Step 1: Change the Flash movie to 800×600 and 65 fps.

    today1

    Step 2: Draw a 4 px circle and transform it on symbol by pushing F8.

    Step 3: Edit the MovieClip and animate it from left to right on a straight line. These are the sparks eminating from the center of the individual fireworks.

    We used a shape interpolation for this. Later, you can also try varying animation types and change the timing to create different results. Insert a stop on the last frame.

    today

    Step 4: Find the MovieClip on the library and right click to open the properties window on the class field and change it to “Particle"

    today2

    Step 5: Make a new symbol and put it on the scene. On the properties window, change it to "nightSky." This is where we will put the fireworks.

    Step 6: And now the coding. First, import the classes we are going to use

    import caurina.transitions.Tweener;
    import flash.events.*;

    Step 7: Next, define the movie vars.

    var fwParticlesCount:uint=200; // particles in each explosion
    var fwTimer:uint=2000; // time between explosions
    var timer:Timer = new Timer(fwTimer);
    // this adds a timer, in each step of the timer it will call fire() function
    timer.addEventListener(TimerEvent.TIMER, fire);
    timer.start();

    Step 8: We want to use a lot of random numbers, so we created the following function to save some time.

    function randRange(min:Number, max:Number):Number {var randomNum:Number = Math.random() * (max - min + 1) + min;    return randomNum;}

    Step 9: And now the main function, which is putting the particles in a circle, animating them and setting their opacity and position.

    function fire(event:TimerEvent){

        // the origin coordinate for the firework
        var x0:uint=randRange(100,700);
        var y0:uint=randRange(100,500);
        // now i’m going to create and define the properties of each particle in the firework
        for(var i:uint=0;i<fw Particles Count;i++){
               var tempParticle:Particle=new Particle();
               tempParticle.x=x0;
               tempParticle.y=y0;
               tempParticle.rotation=randRange(0,360)
               tempParticle.scaleX=tempParticle.scaleY=randRange(.3,1)
               //add to the stage
               nightSky.addChild(tempParticle)
               //the particle is going to start with the animation you prepared on the Movie Clip
               //then with a little delay the Tweener animates the y an opacity,
               //onComplete remove the mc from stage and deletes the particle
        Tweener.addTween(tempParticle,{y:y0+200+randRange(50,50),alpha:0,delay:1,time:2,transition:"easeInSine",onComplete:function(){nightSky.remove Child(this);delete this}});

                                      
      today3

    That’s all you need to do. Now just sit back and enjoy the show!

      Enric Godes is a project manager at Vasava. Started in Barcelona in 1997, Vasava is a   communication studio with 18 young designers who specialize in cross-media projects: print, web, motion, 3D animation, and video. To unleash creativity and meet the deadline-driven demands of clients, Vasava relies on the integrated, cross-discipline tools found in Adobe Creative Suite Master Collection software.

    admin Designing, Webmasters Resources , ,

    Kyle Bean Tech Cardboard Artwork Is Awe-inspiring!

    July 2nd, 2009

    Most of us have grown up making nondescript shapes out of cardboard in the art clagalleryss, and perhaps, it was the desire to create something eclectic, one that stands out among insipid, mundane works of juvenile creativity. Or, was it an inherent understanding that in every discarded piece of paperboard was a masterpiece waiting to be unlocked? Well, Kyle Bean, the author of ‘The Future off Books’ has no qualms admitting this rather apparent fact. With ample evidence, at that! Laptop boxes manifest into tiny lifeless cardboard laptops; while camera boxes get a shape makeover, replicating the object that they once housed. Simply amazing electronic art.

    One of the most striking aspects of Kyle’s creations is the compactness in design. Each paperboard object seems to have been chiseled out of cardboard; not cut, bent and shaped into the designs that we are completely in awe of. Logic dispels doubts about the latter and this greatly magnifies the dexterity of this designer.

    admin Designing , ,

    Free veiny leaf textures

    June 9th, 2009

    Leafy graphics are often loved by designers for the soothing effect and natural feel. Here are a dozen textures of various types (lush green, partially dry/destroyed, fully destroyed, underside of leaves etc.). Below are previews for two of my favorites from the collection.

    Click on the images below to download them (in full size), or visit the Texturewell site linked at the end for the full package (those guys have lots of useful textures).

    Grapevine leaf texture

    free-grapevine-leaf-texture

    Ficus texture

    free-ficus-leaf-texture

    Leaf Textures pack [T

    admin Designing ,

    Free Seamless Pattern Background Resource

    June 6th, 2009

    PatternCooler is a a free Seamless Pattern Background Design Resource. You can add your own colors to contemporary and retro pattern designs, or browse from thousands of pre-colored patterns in the seamless pattern background library.

    All artworks on this site can be used freely for blogs, MySpace profiles, Twitter, mobile phone wallpapers, scrapbooking, personal artwork, and non-commercial web projects.

     

    background-pattern

    admin Designing ,

    How to Build a Dynamic Flash Gallery with Slider Control

    May 23rd, 2009

    Flashtuts has published: Build a Dynamic Flash Gallery with Slider Control. In the tutorial, you will learn how to create a flash gallery which displays all image files in a given directory, with a slider that is used to browse easily through the images.

    The flash gallery is still low on functionality. The loaded images all need to be the same size and do not have a larger preview. You could add a resizing function and an option to view a larger preview of the image when clicked. Furthermore, an option to browse left or right with buttons or with a keyboard event could be added.

     

    photo-flash-gallery

    admin Designing ,

    eXTReMe Tracker