2010 June | ATrickDesign.com

Archive for » June, 2010 «

Designer Icons – Professionally Hand-Crafted Free Icon Set

30
Jun 2010

This Free Icon Pack is for use in your personal and commercial projects, and can be used without attribution. It may not be redistributed.

12 Professionally Hand-Crafted icons for designers and creatives. Each Icon is 32×32px with a transparent background.

You won’t find many free designer icons like this anywhere else. This set of icons was professionally crafted by professional icon artist, Parthiban Mohanraj. This set has all the values of stock icons, but we’re making it available for free here on Tutorial9.

Download the Icon Set

Download “Designer Icons”

This Icon Pack Contains:

Paint Brush Icon
Paint Bucket Icon
Easel Icon
Palette Icon
Camera Icon
Wacom Tablet Icon
Photoshop Icon
Blueprint Icon
Macbook Icon
Pencil Icon
Folder Icon

Category: Tutorial Tags: Designer, Free, HandCrafted, Icon, Icons, Professionally Leave a Comment

45+ Must Have iPhone Applications for Developers and Designers

30
Jun 2010

admin

Every iPhone owner should know that he/she possesses a device which is more that just a cell phone to call or text.You can use it as your second computer when you are not at your home or office, and we think this was the purpose of creating iPhone. It has great interface and superb Wi-Fi compatibility which places it in Elite class among other mobile devices. “iPhone as a computer” happens mainly because of its applications, you can have any application you like whether it is related to entertainment or your work. If you are a web developer or a graphic designer and you own an iPhone, then you can take advantage of your mobile phone by using important and essential applications designed specially for you people to help you if you’re in state of mobility.

Finding these kind of applications can be a very difficult task but today we have done this task for you people. We have collected some of the most useful and helpful iPhone applications for developers and designers which can help you when you are out of your office desk.

1. WordPress

WordPress is the most popular publishing platform, now you can use it directly from your iPhone for free. You can create new posts or edit the existing ones, add photos, check spelling and create links without writing HTML codes.

2. PHOTOSHOP

Photoshop is leading photo-editing software. Now you can use it on you iPhone by just installing this FREE application. It has all important features for photo-editing like crop, rotate, change color and if you have done something wrong then you can undo your recent actions.

3. Database Viewer Plus

This application Synchronize any desktop side database with you iPhone. This allows to sync with Microsoft Access, Microsoft Excel and any ODBC compliant database like Oracle.

4. CameraBag

CameraBag let you edit you photos and give effects for the new ones. You can use the option panel to set camera behavior, image size, cropping and boarder effects and more. It costs $1.99.

5. 1Password

Every iPhone user uses password manager, but if you dont then this is the application you should use for managing you passwords and identity. It has more than 1 million users and costs $6.99.

6. Analytics App

Google Analytics is very important for every web developer. This application gives you the opportunity to access your Google Analytics data from anywhere using your iPhone.

7. Pingdom for iPhone

Pingdom is an uptime monitoring service and this application will help you to connect to it from your iPhone. You can get alerts directly to your iPhone, view current status of monitored sites, view uptime and response time stats and get information about each check such as monitoring resolutions.

8. GoodReader

GoodReader allows you to read huge PDF and TXT files. It extracts pure text from PDF files and automatically wraps words. It offers full screen reading without bars or buttons.

9. PayPal

PayPal for iPhone can make your life easy, when you want to send money instantly when you are not near your desktop, you can use this application for this purpose.

10. Photobucket

Every web and graphic designer has a deep relation with Photobucket and what a pleasure it will be if you can use it on your iPhone. Using this application you can search Photobucket media library, download any photo and manage you albums.

11. Evernote

Evernote lets you create notes, snap photos and record voice memos that you can access any time from you iPhone, computer or web. This application is free.

12. FTP On The Go

If you website need some fixes and modification and you are not you desk then this application will helps you. This application lets you login into your sever from your iPhone.

13. Ego

Ego provides you the pleasure of one central location to check web stats which you like to view. You can quickly view the number of visits to your website, feeds subscription total and changes, how many people are following you on twitter. It supports Ember, FeedBurner, Google Analytics, Mint, Squarespace, Tumblr, Twitter and Vimeo. It costs $1.99.

14. Dropbox

Dropbox is a very famous online backup service and now you can use it from you iPhone. You can access you Dropbox, View documents, videos or photo galleries. Share and send files via email, text message or copy paste links to use in another application. This app is free.

15. Tweetie

Tweetie is very powerful Twitter client which offers variety of different features. You can handle multiple Twitter accounts. You can work offline and your actions will be synced as soon as you go online.

16. BlogPress

BlogPrees is a real-time blogging application which supports most of mainstream blogging platforms like WordPress and Blogspot. You can upload multiple photos in your posts; send same post to multiple blogs, and many more features you are looking for.

17. Brushes

Brushes is a painting application featuring advance color picker, several realistic brushes, multiple layers, extreme zooming and simple interface.

18. Source Viewer

This Source Viewer application enables you to view HTML, CSS and JavaScript source code of any website. This application costs $0.99.

19. iMy

iMy is a full MySQL client for the iPhone. It features the ability to generate complex queries, save them for future use, export query results to Google spreadsheets. Many more features are included. It costs $5.99.

20. iWiki

iWiki enables you to read and browse Wikipedia on your iPhone. It offers 32 different languages. You can same articles for reading without the internet connection and view your previous browsing history. It costs $1.99.

21. TouchTerm

TouchTerm is a fully featured SSH terminal application interface that enables remote access on their iPhone. Its worth $3.99

22. Harvest for iPhone

I think every one is familiar with Harvest; it is a simple online time tracking, time-sheet and reporting software. Now you can use it on your iPhone.

23. Web Developer Bible

This is a very handy reference for all web developers also containing RGB to HEX color converter. It also has Silent Mode Reminder and Vedic Mathematics. It is free for use.

24. cliqcliq Colors

Colors by cliqcliq is an easy-to-use color picker application for converting, managing and discovering colors and palettes. This application costs $2.99.

25. Color Expert

Color Expert is an interactive color wheel, image picker and swatch book for you iPhone. It includes Monochromatic, analogous, complementary and triadic color schemes. Color palettes include RGB, CMYK and library Values. This application costs $9.99.

26. Color Stream

Color Stream is an other color tool for iPhone. It can generate a combination of colors from a picture. You can save multiple color palettes, save them and rate them. It costs $2.99.

27. CSS Cheat Sheet

Every Cascading Style Sheet developer needs a quick refresher of all CSS properties and values. This application provides a quick reference for topics you have already learned but need few reminders. It costs only $0.99.

28. jQuery Cheat Sheet

jQuery Cheat Sheet is a quick course refresher of jQuery syntax and arguments which costs $0.99

29. HTML Cheat Sheet

A very useful application for web developers, which needs quick reference to HTML tags, attributes and more. It costs $0.99.

30. PHP Cheat Sheet

PHP cheat sheet is a quick refresher of all PHP functions and syntax. You can use it to revise you PHP skills or learn PHP from if you are a beginner.

31. WhatTheFont

This application is very handy to identify the fonts in a photo or web graphic. If you are looking at a very beautiful font and wonders what font it is. Just snap a photo and this application will identify the font.

32. HTML Colors

HTML Colors allows you to easily select and preview HTML colors and their codes for use in a web page.

33. HEX RGB Colors Guide

A wonderful reference, to RGB and HEX colors, app suitable for anyone who deals with colors, including: web designers, bloggers, print designers and virtually anyone who uses colors to publish. It costs $1.99

34. Read It Later

This iPhone application lets you save pages and download copies of pages so you can read later when you are in offline mode.

35. Things

Things is an iPhone application for efficient Task Management. You can make the list of things you want to complete today in Today list, Next list contains anything you want to do soon and use Scheduled for all to-dos that you want to start at a later date.

36. Pingle

Pingle is very useful application which enables you to update your status on social networking sites like Facebook, Twitter, MySpace, Flickr, FriendFeed, Delicious, Tumblr and more. This application costs $1.99.

37. Network Ping

This software is used for maintaining and debugging network problems on LAN. Its lite version is free and normal version is of $3.99.

38. Twitterrific

Twitterrific is an other application that let you read and publish your “Tweets”.

39. Tap Forms

This is the very powerful database application for iPhone. You can use this to keep track of your favorite websites or bookmarks. It has many Ready Made Forms like credit card numbers, bank account, software serial number etc. It has built-in FTP servers to exchange data with Mac or PC.

40. iWantMyName

IWantMyName is a free application which helps you to register domain names directly from you iPhone.

41. The Typography Manual

The Typography Manual is a pocket resource for graphic designers and anyone that works with type. It provides all the essentials of a book reference on your iPhone. This application costs $3.99.

42. MiniBooks

MiniBooks for the iPhone lets you access your FreshBooks, which is a leading time tracking and online invoicing software. This application will cost you $14.99 but will save a lot if you can track your time effectively.

43. Mint Stats

Mint Stats enables you to monitor you websites statistics and see how many people visited your website today or in last hour. This application is free.

44. Ruler

Using this free application you can measure any object by simply placing it on or next to screen of iPhone. You can switch inches and centimeter mode of measurement.

45. Full Screen Web Browser

This application helps you to browse the web free from clutter. This application hides all the buttons, address and status bar providing you 40% more space to browse. It costs $0.99.

46. Web Source Viewer

As name signifies, it is a free and very simple application to display web source of any website.

47. Byline

Byline is a RSS and Atom Feeds reader for reading latest news and articles from you favorite sites and blogs when you are offline. You need to use you Google Reader account for his purpose. This app costs $4.99.

Category: Graphic Design Tags: Applications, Designers, Developers, iPhone, Must Leave a Comment

Win a Free eCommerce and Discussion Forums License Package from concrete5!

30
Jun 2010

admin

concrete5, an up-and-coming open-source content management system, has offered to give a lucky blog reader an eCommerce and discussion forums license package! The total value of these two licenses is $145.

Concrete5

I first came across concrete5 in last year while researching a post on content management systems, and I was very impressed considering it was a CMS that I was not familiar with. concrete5 is free and open source, but if you don’t want to download it and set it up on your own server you can also host it with them. Hosting plans start at less than $8 per month and go up to a dedicated server for $250 per month (free trials available). Their hosting accounts come with support, which may be helpful especially when using a CMS for the first time.

One of the main features of concrete5 is in-context editing, meaning you don’t have to go to a dashboard or admin panel to edit the text and images on the site. For working with non-tech-savvy clients, this can be a great feature.

Concrete5

Other noteworthy features include:

Automatic navigation menus
Track versions and compare differences
File manager with bulk upload and image manipulation using Picnik
Detailed permissions create editor groups, approve content, and see an audit trail
Drag-n-Drop content
Flexible meta data & vanity URLs for Search Engine Optimization (SEO)
Scrapbook lets you copy content and functionality from one part of your site to another
See more

The system is also well-documented. Their site includes a “basics” section that includes documentation (including videos) on the various features and how to use the system. There’s also a developer’s guide that includes all the information needed to get started working with the CMS.

Concrete5

The concrete5 community seems to be rather active with a forum, job board, and member network all located on the concrete5 site.

There is also a marketplace where you can buy add-ons, such as the eCommerce and discussion forums licenses being given away here. The marketplace includes add-ons developed by concrete5 as well as others from various developers. The marketplace also includes themes for purchase ($20 – $25), as well as a number of free themes.

If you’re looking for the right CMS for a specific project I recommend that you see what concrete5 has to offer.

The Giveaway Details:

The winner of this giveaway will receive a free license for the eCommerce add-on and the Discussion Forums add-on. To enter the giveaway please leave a comment on this post, and be sure to leave a valid email address so we can contact you if you win. On Friday, July 2 we will select the winner using a random integer generator, and this post will be updated at that time.

Good luck!

Category: Web Design Tags: concrete5, Discussion, eCommerce, Forums, Free, from, License, Package Leave a Comment

Create a Set of Glossy Metallic Icons in Photoshop

29
Jun 2010

admin

This tutorial is going to teach you how to make a stylish, metallic Adobe Icon Set with a glossy finish.

Quick Nav:

Tutorial

Download the PSD (Source Files)

Step 1: Creating a New Document

We are going to create a new document with a standard resolution of 256px. But because our icon is quite short the height will be smaller.

Next, grab the Paint Bucket Tool (G), and fill the document with the following colour #F2F2F2. This is to make viewing easier.

Step 2: Setting The Base

Step 2a

Using the Ellipse Tool (U), draw an oval on a new layer as shown above. Let’s name this "Top".

Shape layers

Using the Shape layers instead of Fill pixels allows you to transform your circle as many times as you want without quality loss. This is great for experimenting.

Step 3: Going 3D

Stpe 3a

Step 3b

Select your Move Tool (V). While holding down the alt key, press the down arrow 20 times. This will determine the height of the icon. Now select the past duplicates and Merge (ctrl+E). Arrange that layer below the "Top" layer. Remember that there should be one extra layer named "Top". We’ll just name this new merged layer "3D" for readability.

Step 4: Layer Styles

Now we are going to apply some Layer Styles to the "Top" layer (the non-3D one). You can do this by double clicking on the layer.

You should end up with this:

Step 5: 3D Layer Styles

Now select the "3D" layer and apply the following Layer Styles.

Once you are done you should have this:

Step 6: Creating The Shadow

Create a new layer below the previous two layers and name it "Shadow". Get the selection of the "Top" layer by ctrl+clicking on the layer icon. Fill the selection with Black and Deselect (ctrl+D) it. Go to Filters>Blur>Gaussian Blur and use 5px. Set the Opacity to 75%. Using the Move Tool (V), shift the shadow down just below the body of the icon.

Step 7: Adding Polish

Create new layer right at the top. Get a White Brush with a Hardness of 0% and Master Diameter of 125px. Get the selection of the "3D" layer and Brush once at the corner. Set the Opacity to 85%.

Create another layer and get a Black Brush with a Hardness of 0% and a Master Diameter of 20px and Brush it downwards while holding Shift. Use Gaussian Blur with 8px. Now ctrl+click on the "3D" layer icon then ctrl+alt+click on the "Top" layer mask icon. Finally invert your selection with ctrl+shift+I and Delete the selection. Repeat the same process with a white Brush with 25px Master Diameter and set the Opacity to 70%.

Foreground & Background Colour

You can easily switch your background and foreground colour by pressing D. You can swap colours between the two by pressing X.

Step 8: Adding Glow

Create a new layer and name it "Glow". Get the selection of the "3D" layer and move it up by 7px. Fill the selection with the following colour: #6ab2f6. Before deselecting, shift the selection up by another 3px and press Delete. Bring down the Fill to 70%.

Now give it the following Layer Styles.

Get the selection of the current layer and create a new layer. Get a White Brush with 0% Hardness and 300px Diameter and and click once right in the center of the selection. Bring down the Opacity to 70%. Set the Blending Mode to Overlay.

Brush cursor

you can easily find the center of the Brush cursor by pressing Caps Lock. Or you can go to Edit>Preferences>Cursors and enable "Show Crosshair in Brush Tip".

Step 9: Adding Definition

Create a new layer and get the selection of the "3D" layer. Fill the selection with any colour you want. I chose black for easier reference. Bring the Fill to 0% and add the following Layer Styles.

Create another layer and get the selection of the “Top” layer. Shift it down by 4px and Fill it with black. Move the selection up by 2px and press Delete. Apply a 1px Gaussian Blur to it and set the Opacity to 10%.

Step 10: Making it Shine

Create a new layer with the Opacity of 75%. Get the selection of the “Top” layer and get a white Brush with 0% Hardness and 250px Diameter. Click once right at the edge of the selection.

Now create a new layer and get a Pen Tool (P). Draw it as seen below and right-click>Make Selection. Fill it with White. Set Opacity to 25% and Fill to 50%. Get the selection of "Top" layer and Invert Selection (ctrl+shift+I) then press Delete. Apply the following Layer Styles.

Repeat the same process except with a different Layer Style so that it looks like so.

Create a new layer with 80% Opacity. Click once with a White Brush on the edge of the selection of "Top" layer. It has 0% Hardness, 200px Diameter. Create another layer. With the same selection and same Brush with 70px Diameter, click once at the same spot.

With a new layer, get a selection of the "Top" layer and shift it down by 1px. Fill it with White and shift the selection up by 1px then press Delete. Apply Gaussian Blur with 1px.

Step 11: Creating The Face

Duplicate (ctrl+J) the "Top" layer, place it right at the top and rename it to "Inner". Transform (ctrl+T), and while pressing alt+shift, and shrink it as shown below. Then add the following Layer Styles.

Create a new layer and get the selection of "Inner" layer. Using a White Brush click once at the center, bottom edge of the selection. Set the Opacity to 40%.

Step 12: Creating Depth & Detail

Duplicate the "Inner" layer and place it right at the top. Clear the Layer Style by right-clicking on the layer then "Clear Layer Style". Apply the following Layer Styles to it.

Create a new layer and get the Gradient Tool. You can select this by first selecting the Fill Tool (G) then pressing Shift+G. Set the colours to Default (D). Select the Radial Gradient option. Get the selection of "Inner" layer and Fill it as shown, then set the Opacity to 20% and Blending Mode to Screen.

Step 12g

Create a new layer. Get the selection of "Inner" and nudge it down and right once each. Fill it with White then nudge it back to it’s original position and press Delete. Set the Opacity to 80%.

Create a new layer and while using the same selection, nudge it down by 4px. Fill it with White and nudgeit down another 1px then press Delete. Set the Opacity to 30%.

Now create a new layer and and grab the Pen Tool and draw the following shape. Notice the point of contact between the shining areas. Also apply the following Layer Styles with 15% Opacity and 50% Fill.

Step 13: Adding Alphabets

Create a new layer and select the Type Tool (T) with any colour. Use Arial as the font and set it to Bold and 98px. Any font is fine actually. Now type in "Ps" and place it in the center of the icon. Right-click on the layer and click Rasterize Type. Transform it and shorten it slightly. Right-click the bounding box and click Perspective. Squeeze the top in to make it look 3D. Later add the following Layer Styles with 0% Fill.

Step 14: Final Details

Create a new layer. Get the selection of the "Ps" layer and nudge it up and right once each. Fill it with White then shift the selection back and press Delete. Set the Opacity to 30%.

Finally create the last layer and get the selection of the "3D" layer. Fill it with White and apply Filter>Noise>Add Noise with Gaussian and Monochromatic enabled. Set the Blending Mode to Multiply and Opacity to 30%.

Now you are DONE! You can hide or delete the background if you want to export it as an icon. But it’s not over if you want to make a set. For now your icon should look something like this.

Step 15: Creating a Set

You can save this document and duplicate it. Open the new one and find for the layer called "Glow". Temporarily hide the layer right above it. Now go Image>Adjustments>Hue/Saturation or (ctrl+U) for layer "Glow" and adjust the Hue to whatever you like. Once you’re done, go to the Layer Style>Outer Glow and adjust the colour to whatever you like. Now you can un-hide your above layer.

Navigate to your font layer. Delete it and repeat the process I taught you to create another alphabet you want. Remember to change the above layer which is the edge shine. Repeat this step for as many other icons you want.

Download the PSD and Icon Set

Download the Icon Set

Category: Tutorial Tags: Create, Glossy, Icons, Metallic, Photoshop Leave a Comment

Customize Your Facebook Fan Page: Tips, Tricks, Applications

29
Jun 2010

admin

Customization will always make you stand out from the rest of the world, the same rule applies on Facebook as there are more than 400 million active users.By now you may be well aware of Facebook fan page which is used for promoting business online on Facebook. But just creating a simple fan page won’t help you get the fan following you want. With this article I will be sharing with you some of the most basic tips that you can implement right away & customize your fan page within few minutes, using some applications and codes.

Static FBML

An application which should be implemented by most of the fan-page owners. Static FBML is really simple to implement and can be used to do various modifications on Facebook Fan Page. FBML supports pure HTML & CSS.

We will use Static FBML to create customized Fan page for Facebook.

Adding FBML To Fan Page

Login to your Facebook account & Search for Static FBML
Then click on the tab Add to My Page & Select the page.

Now we will add some code that will transform your fan page completely.

Creating Landing/Welcome Page

Landing or Welcome Page is the first page you see when you visit a new fan page encouraging user to click on the Like button. Creating a Landing page really simple & I will share the step by step guide on how you can do it easily.

In previous step you have already installed the Static FBML application now you need to create a welcome page image that will encourage users to click on the like button. You can do it easily in Photoshop or any similar applications.

When creating the image “Do remember that image’s width should be of 520px” the height does not matter but it would be good if you keep it of appropriate length.

1.Create an image with width 520px & appropriate height in Photoshop or similar application.
2.Create a folder name FB at your server & upload the image in that folder.
3.Now Navigate to your fan page & click on Edit Page tab below the Fan Page’s Profile Image.

4.Locate your FBML application & click on Edit.

5.Now you will see a similar window like the image below.

6.Now add an appropriate title like Welcome or your blog name anything you prefer.

In FBML part just add the following code.

If you want to add link to the image just add the following code

src =”http://yourwebsite.com/FB/imagename.jpg”>

</a>

You can also use text after the image with some HTML tags like h1, h2,

, etc as done in 1st Web designer Facebook fan page.

7.Once you are done click on save changes & now navigate to your Fan Page you will see a new tab with the title you have written, by clicking on that tab you will see your image in that page.

8.Now to set your new page as default landing page you need to click on the edit page tab as we have done in step 3 & locate wall settings then set your default landing page to new page.

You are all done with creating a new & improved version of your fan page. We will add some more code to fan page to make it more personalized so keep reading further.

Adding Subscriber Form to Fan Page

If you use feedburner to manage your feeds you can easily add subscriber form to your fan page by getting the code under the Subscription management in your feedburner account.

Now navigate to your FBML application and then click on edit & then click on add another FBML box.

After adding the FBML box, enter title subscribe & paste the code from the feedburner into that box & now you are all done.

If you want that box to be appearing in the sidebar or the wall just click on the tab & select move to wall tab & then it will be appearing on your fan page’s wall. Similarly you can add contact form to the fan page as well.

Other Useful Articles About FBML

How to Add Google Analytics to Your Facebook Fan Page

7 FBML examples to rock your Facebook fan page

How to Put a Contact Form in a Facebook Fan Page

Applications for Customizing FaceBook Fan Page

If you are not comfortable using FBML, then still you can customize your fan page using various applications. This application makes easier to share photos, Videos, Files, Twitter updates & lots of other stuff depending on your needs. There are large number of applications that will help you with your fan page. Below are some of the effective applications that will help you get your work done easily.

Clobby – Group Chat

This is really useful application if you want to integrate live chat room to your fan-page. It is free application & allows users to create chat rooms & invite other friends to chat. It is great way to encourage users of the page to communicate with each other & increase the level of interactivity of the page.

ShopTab

If you sell products online then ShopTab is perfect application for you to showcase & sell you products through fan-page. ShopTab is premium application so you need to pay monthly charges.

Involver

Involver provides professional application for your Facbook Fanpage which you can install with a single click. The involver has large application gallery which has RSS Feed, Twitter, YouTube Channel, Photo Gallery & many more applications. With the free account you can install only two applications.

Tigerlily

Tigerlily application is easy to implement & its has content management systems of its own which is easily controlled from fan-page. In Tigerlily CMS free version you can easily add different modules like text editor, video, image, twitter, RSS Feed, MP3 player, flickr & podcast.

Poll Daddy

With Poll Daddy application you can create polls which you can share it on your fan page to get feedbacks from the users & increase their participation on the fan page.

Hope you found the post useful & informative, If you have other useful applications or FBML tricks to share then feel free to mention them in comments.

Category: Graphic Design Tags: Applications, Customize, Facebook, Page, Tips, Tricks Leave a Comment