Graphic Design vs. Web Design

by Lillian 25. February 2010 03:48
I am new here at Bonsai and here's my little story.

I am not professionally trained in graphic design but somehow have become a “graphic designer” recently and a potential web designer. Thanks to Elliott for showing me a great video that discusses the differences between graphic design and web design. After seeing it, I feel like I am on my way to go for web design.

http://www.killersites.com/blog/2010/graphic-design-vs-web-design/

Yes. I am a newbie in design, and web design to be specific. Being with Bonsai, I could sense that I can always learn something new about design each time at this internship opportunity. At first, I was kind of overwhelmed by the amount of new stuff/books/ideas/terminology… but thanks to Google and Wikipedia, I am able to at least get a good start on what’s going on with PNG, WYSIWYG and so on. Though what I will be doing here is more related to web design, I still find these skills and knowledge are valuable to my print design work.

Coming from a print-based world (CMYK-jpge-ai-pdf environment), I have to start thinking in the web-based design platform (PNG, CSS/HTML, file-size, loading time, usability, hierarchy and all that.) This is just the beginning of an extremely long list. But I am sure by the end of this internship, I might be able to know “enough” and call myself a web designer. Thanks to Bonsai, "Don't Make Me Think", and "Beginning CSS Web Development".

I am also telling myself to have fun and learn as it goes. So walk with me.

Tags:

Bonsai Media Group Internship | General | Graphic Design | Web Design and Development

Are you a designer? Own an iPhone? You're out of your mind if...

by Elliott 30. September 2009 17:28

    As an Interactive Media Designer I often get the question "So Interactive Media…. what exactly do you do?" Up until about 2 years ago I would direct people to various examples of my work on the internet or try in varying degrees of success to tell them what it is I do. Then I did what all tech savvy, geeked out, people in the design field did. I bought an iPhone. The iPhone has revolutionized the way I share my work with people away from a computer. From storing my T-shirt designs in my Photo Library to keeping iPhone compatible versions of my motion graphics projects in my iPod feature, I try to utilize every aspect of the iPhone to turn it into my own mobile portfolio. The biggest upside? It's with me all the time. Even at the bar where I just ran into a business owner who is unhappy with her website's design and functionality and is looking to make a switch.


    I've never met another designer that has taken the time to set up their iPhone to make it work for them. In fact, if you're in graphic design, web design or motion graphics an
d you have an iPhone and you aren't using it as a personal portfolio and sales piece you are out of your mind. Personal devices like the iPhone that allow you to keep examples of your work at the touch of a finger are going to set you apart from the designer with only a business card that likely gets logged away in a wallet.
    I personally keep my phone branded and positioned to sell my services as a designer, screen printer, and motion graphics animator. I usually have between 3 and 4 wallpaper images that I optimize for display on the iPhone. I can cycle through these images depending on where I'll be and to whom I'll be talking to. That sets the stage. Then I keep a log of all the shirts I have designed, (whether they get printed or not), logo's, website comps, and flyers in my Photo Library. This way if I meet someone who is interested in having a run of hoodies or T-shirts done I have a visual example of what Gryphen Graphics is capable of. I also keep my pricing guide on mobile.me as a .pdf so I can quickly and accurately give them a quote. Next I make sure to have all apps related to the services that Bonsai Media Group offers. Facebook mobile, TweetDeck, YouTube, and Safari usually suffice. This way When I run into the owner of the new bar down the street and get to talking about how he can use SEO, Social Media Marketing, and effective Web Design to drive local business to his bar, I have access to these apps and can demonstrate to him how it's done. Finally when I meet the business man who simply isn't impressed with static images of t-shirts and logo design I open the iPod feature of the iPhone to Videos and show him one of my motion graphics pieces which showcases the versatility and capability of Bonsai Media Group.
    When I bought the iPhone the first week it came out, I knew that it would primarily deal with software upgrades not hardware. In fact it hasn't changed much from what I call the "OG" (1st generation iPhone) to the 3G and 3GS except for the metal casing, which I favor over the latter. The nice thing about the iPhone is when the next one comes out you are not going to have to re-size, re-export or re-encode your files. Once you've got your mobile portfolio library built and optimized it's simply a matter of updating and adding new work.


    These are just 3 examples of ways that you can take casual conversation about your career and transition into the networking side of business just by being prepared to show somebody what exactly it is you do. I would strongly suggest putting in the time to design yourself a great looking business card and please, spend the money to have them done right. Even more impressive after a brief portfolio tour of your work is a business card that they can take with them that they will remember. It's all about separating yourself from the pack, finding your zag and I believe this can be a great compliment to any conversation a designer will have concerning the work they produce.

 

 

please feel free to ask questions, there are many ideas behind this strategy that I haven't thought of and for the better of the graphic design community we should hurl our thoughts, ideas and questions into the design-o-sphere.

Shave time off CS4 projects and become more valuable to your employer.

by Elliott 23. September 2009 08:32

Last week I had a few tips for working between Illustrator and Photoshop to help improve your cross-media design skills. This week I'll revisit some of these tips from Computer Arts and shift the focus from Illustrator to InDesign. These tips will help you move more quickly between Photoshop and InDesign giving you an advantage when deadlines are staring you down.

 

Content-Aware Scaling - If an imported photo isn't working with the InDesign layout you had in mind, take advantage of Photoshop CS4's Content-Aware Scaling. This feature enables you to retain the important details and composition of the original photo. Select the area you want scale, then go to Edit>Content Aware Scaling. Use the 'Protect Skin Tones' option (click on the human silhouette icon) when working on photos of people, as this usually yields the best results.

Adjustment Layers - Adjustment layers in Photoshop CS4 are much more powerful and easier to control than in earlier versions and are now well supported in InDesign. Within Photoshop CS4 is a sub-panel control that enables you to adjust settings such as levels, curves and saturation with much more efficiency. After clicking on a setting, use the arrow located in the bottom-left corner to go back to the settings menu (as you would in your internet browser)

Refine selection - One option hidden away in Photoshop CS4 is the Refine Selection button, which enables you to quickly and accurately fine-tune your selections. After creating a selection, look for the button at the top of Photoshop's Menu pane - it will open a box featuring a number of sliding variables, along with an option enabling you to see your selection on a variety of different colored backgrounds. This is very useful when an accurate clipping is needed, be it in InDesign or any other application.

Grouping and naming layers - To help you modify the images in your InDesign layout without having to go back to Photoshop, ensure that you initially name and organize your layers in accordance with what makes sense for your project. The order in which you organize your layers is very important, as a group can have a pass-thrgouh blend applied which affects either every layer in the group or only those that you individually adjust. To group the layers, select those you wish to group then drag them to the Folder icon at the bottom of the Layers panel. Drag the folders into the required hierarchy or group them into another folder for easy adjustment in InDesign.

Quick Copy Merged and Paste - When working on a document with a lot of images, constantly saving and placing the separate images into InDesign can be quite time-consuming. To get around this on small and simple jobs, Select All (Ctrl/Cmd+A), Copy Merged (Shift+Ctrl/Cmd+C) and Paste (Ctrl/Cmd +V) the image straight into InDesign (or any CS4 program). This trick is not recommended for use on large documents, however, as it adds to the file size and does not enable easy editing and linking.

 

InDesign and Photoshop are two of the greatest tools a print designer could have ever asked for. The interoperability of the two programs is second to none and as we've seen with the CS series, cross-program compatibility will only become more powerful in the future.

Tags: , , , ,

Web Design and Development

Improve your cross-media design skills with these useful tips

by Elliott 16. September 2009 06:19

One of the toughest challenges designers face today is keeping pace with emerging and evolving technologies. With the release of Adobe's Creative Suite 4(CS4) and the upcoming MAX convention I thought I'd share with you some tips that I've picked up about workflow between the Adobe programs. Two programs that I use daily are Photoshop and Illustrator. In fact using these programs together allowed me the control I needed to produce the design for the Bonsai website, Snohomish Artist Guild Video, and Bonsai Built It video. Here are a few tips for using Photoshop and Illustrator together, that I've picked up from Computer Arts.


-Sharing Swatches - Share the solid swatches you create by saving a swatch library for exchange. By doing this, it ensures that your colors are the same across all applications (as long as your color settings are sync'd up.) In the Swatches panel, create the swatches you wish to use then select 'Save Swatches For Exchange' from the Swatches panel menu. Now load the swatches in whatever program you wish. You can also create and share color group swatches by using the Kuler panel or the Kuler website at http://kuler.adobe.com (Excellent color resource)!

-Exporting layers to files - To export a variety of layers on the fly, you can export and save layers as individual files using a variety of formats including PSD, BMP, JPG, PDF and TIFF. A good use for this option is when the majority of your design is vector-based in Illustrator and you want to sue multiple raster images to aid your composition. To do this, go to File>Scripts>Export Layers to Files. Options to choose from include the type of file you want to export, its quality and its location.

-Using Photoshop artwork in Illustrator- Adobe Illustrator can both open or place Photoshop files, so you do not need to save or export your Photoshop image to a different file format. If you place an image into an open Illustrator file, you can either incorporate that image as if it were any other element in the artwork or you can maintain a link to the original file. Although you can't edit a linked image within Illustrator, you can jump back to Photoshop using the Edit Original command to revise it. Once saved, any changes you make are reflected in the version in Illustrator.

-Merge Smart Objects - Smart Objects are layers that contain image data from raster or vector images, enabling the preservation of an images's source content. There are several ways to create Smart Objects: by using the Open As Smart Object command; placing a file, pasting data from Illustrator; or converting one or more Photoshop layers to Smart Objects. To edit the Smart Object, select Layer>Smart Objects>Edit Contents, make your changes, save and it automatically updates.

-Vector paths from Illustrator to After Effects - Sophisticated shape paths in Illustrator can be used as invisible motion paths for animated objects in After Effects. Create your path shape in Illustrator. Select and copy it whilst After Effects is open. Create a new layer solid in your After Effects composition and paste the paths onto it to create your motion path. Paste any of these paths into the Position or Anchor Point properties for a layer.


Hopefully you find some of these useful in your everyday work. These tips are designed to shave time off your projects and increase workflow between these applications. Over the next few weeks I'll be blogging more about how you can improve your cross-media design skills using Adobe's CS4.

Elliott Omlin
Bonsai Media Group

Tags: , , , ,

General | Web Design and Development

Powered by BlogEngine.NET 1.5.0.7
Theme by Mads Kristensen

About Bonsai Media Group

Bonsai Media Group is rooted in the ideas and opportunities that Search Engine Optimization (SEO), Social Media Marketing and Web Development have to offer.

Fueled by a passion for success, technology, and helping businesses stake their online claim; Bonsai quickly found a niche in the Search Engine Optimization industry. We are idea people. We are forward thinkers who have the vision and know-how to implement successful, innovative campaigns for our clients.