Wednesday, January 19, 2011

10 Efficient Tools to Test Your Website on Mobile Devices

10 Efficient Tools to Test Your Website on Mobile Devices: "

It is needless to say about the fast-growing market of smartphones, tablets and other mobile devices that allow users to browse through the Internet. The problem is that sometimes standards are not as fast as the technologies and if you don’t catch up with them you might find your website outboard of the mobile web. But don’t worry – there is a solution that will help you fix this situation immediately. We’ve decided to collect tools that will help you see how your website renders on various mobile devices.



1. Google Mobilizer




* * *


2. Opera Mini Simulator






* * *



3. Blackberry




* * *


4. iPhoney




* * *



5. iPad Peek




* * *



6. Official Android SDK Emulator




* * *



7. W3C mobileOK Checker




* * *



8. Windows Mobile Emulator Images




* * *



9. Gomez – Mobile Website Readiness Test




* * *



10. Adobe Device Central CS5




* * *

"

Sunday, November 28, 2010

Creating a Cartoony Print-Ready Business Card in Photoshop

Creating a Cartoony Print-Ready Business Card in Photoshop: "

Business cards are your little marketing companions. They’re small enough to carry anywhere, yet big enough to contain all essential details a prospective client has to know about you.


In this tutorial, we are going to learn how to create a print-ready business card in Photoshop. Designs made for printing have to be prepared in a special manner. Before sending to the printer, it’s best to make sure that your file is ready so you can avoid all the hassle of redesigning, or better yet, the anguish brought by a printing disaster.


Preview


Business cards vary in shape and size. In this tutorial, we are going to design a standard rectangular card with the dimensions of 3.5″ x 2″.


Step 1: Create a New File


Every design made for print is required to have an allowance for bleeds. A bleed area is an additional border around your design. Trimming technology is not an exact science. If you want your design to extend to the edge, the background or images must also extend to the bleeds.


Printing companies have different requirements for bleeds, so you may have to check with your printer first before getting started on your design. The printer I work with requires a bleed of 1/8″ or 0.125″ on each side. Therefore, in setting up our file, we’re going to have to add (0.125 + 0.125 =) 0.25″ to its height and width.


With the added bleeds, our final dimensions become 3.75″ x 2.25″.


Files must have a resolution of 300dpi or higher. Saving your file with a high resolution ensures that blurry or pixelated prints are avoided. Printers also use a different color model for the printing process. When you create a new file in Photoshop, the default color mode is RGB (Red, Green, Blue), which we will have to replace with CMYK (Cyan, Magenta, Yellow, Black). Saving your file in RGB will cause a shift in color when it is converted for printing; use CMYK for higher color accuracy.


Now, open Photoshop and create a new file with the following specifications:


Create a New File


Step 2: Add Guides


Before we start on the actual design, I recommend setting up guides. Guides define the card’s actual dimensions. We have to make sure we don’t forget about the bleeds we’ve added. These guides also represent the trim line.


Press CTRL + R to view the ruler. Go to View > New Guide, then enter the values for your guides.


New Guide Prompt


The term safe zone is another part of printing jargon. Printers require that any important text or images do not go beyond this area. Printed products could still be misaligned when it’s set up for trimming. The safe zone reduces the probability of cropping any significant part of your design.


To define the safe zone, we need to add four more guides, which are 1/4″ or 0.125″ away from the bleed guides. When entering values in the New Guide prompt, just add two one-eights of an inch. That’s 1/8″ + 1/8″ = 1/4″ or 0.25″ on each side.


Canvas with Guides


Step 3: Create the Design


This Step is comprised of creating three parts: the patterned background, our little green friend, and the holders of the contact details.


First, duplicate the background layer. Fill your new layer with a pale shade of green using the Paint Bucket Tool. The color I used is #AFD9B1.


Canvas Filled with Green Background


Create a group called pattern by going to Layer > New > Group. Creating groups helps in organizing your layers. Then, select Custom Shape Tool > Shape > Symbols > Bull’s Eye.


Bull's Eye Shape


Before we create the the pattern, press CTRL + to enable the Grid. Grid lines are useful when aligning and snapping certain elements of a design.


Use #E9EB81 as the shape’s color. First, create a single shape and move it to an intersecting point of two grid lines. Your shape will automatically snap to the intersection. Duplicate the shape and create a whole row.


Create Pattern


Next, right-click the group and select Duplicate Group. Drag down this new group and create more duplicates until you fill the whole canvas.


Duplicate Rows


Now, it’s time to bring our little green friend to life. Use #73BF44 for the foreground color. Select the Pen Tool and create the shape shown below. The alignment doesn’t have to be perfect.


Create Monster Shape


Now, select the Convert Point Tool and use the Bezier handles to adjust the curvature of each point.


Bezier Handles for Curvature Adjustments


To add the eyes and mouth, use the Ellipse Tool. Press CTRL + T if you need to adjust the size and shape. Select the Pen Tool and set the color to #ED1A5D to create the tongue.


Create a glossy effect by tracing the shape shown below and set its opacity to 70%.


Create Gloss Effect


To hold your contact details, we need to add a talk bubble and two boxes. Go to Custom Shape > Shapes > Talk Bubbles and select Talk 1.


Talk Bubble Shape


Drag on your canvas to create the talk bubble. Right-click the layer and select Blending Options. Enable the Drop Shadow and Stroke features, and copy the following values:


Add Drop Shadow and Stroke


Press CTRL + T to tilt its angle to -19.7 degrees and drag it to the upper-right corner of the canvas.


Tilt Talk Bubble


Create two green boxes under the talk bubble using the Rectangular Marquee Tool and fill it with the same shade of green. Add a drop shadow by performing the same procedure we did on the talk bubble.


Card Design Without Contact Details


Notice that the boxes don’t go beyond the safe zone guides. For the talk bubble and our little green friend, the parts outside the safe zone is not so important.


Step4: Insert Contact Details


The final Step of this tutorial is adding the contact details. We are going to use a default MS Windows font for the text.


Use Arial Rounded Font


Use 12pt. Regular Arial Rounded MT Bold for the dialogue inside the talk bubble and 9pt. for the email address and website. Again, remember to place all text inside the safe zone as shown below.


Design Elements Inside Safe Zone


Save your work; check with your printer for valid file formats. TIFF, JPG, and PSD are usually accepted. You may also import your design to PDF.


And voila! We are done!


Conclusion


Here’s the final design after trimming:


Final Design


I hope you enjoyed this tutorial! Please take a minute to chime in and leave a comment below ;)

Friday, November 26, 2010

Feast on Fantastical Food Art Landscapes for Thanksgiving!

Feast on Fantastical Food Art Landscapes for Thanksgiving!: "

foodscapes, food art, eco art, art made with food, carl warner, green design, eco design, sustainable design


This Thanksgiving, if mom is giving you grief for turning mashed potatoes into gravy-covered mountains, maybe you can get her to appreciate your handiwork by showing her these fantastical food photos. It’s all the work of Carl Warner, a UK-based photographer who has spent the last ten years, well, playing with his food. But this is no mealtime distraction: each image involves the work of a team of model-makers and food artists who, in true Thanksgiving spirit, share the leftovers from each photo shoot. Read on to learn more about making breadstick piers and jalapeno shrubery…










Read the rest of Feast on Fantastical Food Art Landscapes for Thanksgiving!http://www.inhabitat.com/wp-admin/ohttp://www.inhabitat.com/wp-admin/options-general.php?page=better_feedptions-general.php?page=better_feed





Permalink |
Add to
del.icio.us |
digg


Post tags: , , , , , , , , ,



"

Monday, November 22, 2010

14 cool free fonts

14 cool free fonts: "

It’s been a while since our last collection of free fonts. Most of the fonts shared in this post shouldn’t be used for blocks of text, but they can be interesting for titles.

1. Lobster

A script font with tons of ligatures and alternate.

2. Dekar

Clean and lightweight sans-serif font.

3. Null

Extra-bold rounded sans-serif, not very readable but some letters are really cool (the capital “N” for example)

4. Anonymous Pro

Monospaced font designed for coding.

5. Code

Very light and elegant sans-serif font.

6. AW Conqueror

Font pack by Jean-François Porchez for Conqueror.

7. Marcelle

A grungy script font.

8. Matryoshka

A font in a font in a font, Matryoshka is inspired by russian wooden dolls.

9. Chopin Script

Elegant script font.

10. Molot

Bold and powerful font with a squared look.

11. CP Mono

Font inspired by the letter style of British car plates.

12. Hitchcock

Font inspired by the work of Saul Bass.

13. Capricorn OSF

Nice bold sans-serif font.

14. Chunk

Ultra-bold slab serif typeface that is reminiscent of old American Western woodcuts, broadsides, and newspaper headlines.



"