Rekabentuk Web / Web Designer Tips

SEO and Link Building

2009-04-01T23:52:00.000-07:00

Not All Links Are Created Equal:

Every website or blog owners want their site to rank high in search engines and a very popular way of doing this is by building links. But you need to know that not all links are created equal.

Many links are more valuable for your site rankings than others, and certain types of links can even pull your website’s rankings down. So to make sure we are getting those valuable links we need to know more about the links we are getting.

Inbound | Outbound Links

When it comes to links there are a few different types, some which you may be aware of and others to which you probably have not given a lot of consideration. So, before we start talking about the types of links you want and the ones you don’t, let's dig deeper into our links.

Outbound links

Outbound links are links that you have on your site which lead to other sites. For example, if you were writing about directories and you linked to the directory site so your readers can access the directory or get more detailed information about it, that would be an outbound link from your site.

Inbound links

An inbound link is a link to your site from another site. To give you an idea, if you have a friend who has a site of their own, and they find a useful article or page on your site and link to it, this is an inbound link.

General links
A general link is a link to your main home page or your site's index page.

Specific links

This is generally a link to a specific section or posting on your site. For example, if you run a blog and someone links to the URL of a specific blog posting, in order to use your site as an example, reference or to provide information, then they have given you a specific link to your site. It should be noted, of course, that both general and specific links can be either inbound or outbound.

Low ranking versus high ranking sites

It is important to know that not all sites worry about the places where your inbound links come from, but some do. Just to be fair.

*Low ranking sites - This are sites that has linked to you but does not have a high traffic flow. This will be the bulk of sites.
*High ranking sites - These are sites with generally high traffic flow, and high rankings in search engines. These sites are usually also very well known.

Each of the search engines has an algorithm that determines how a site will be ranked. It is important to know that there are two main types of algorithms: those that count your inbound links and those that do not.

The theory behind the ones that do count your inbound links is that these links shows your popularity, and therefore your relevance to readers. The non-inbound links counters have the philosophy that, as a site administrator, you have no control over who, if anyone, can link to your site, and you should not be penalized for that.

Link Building No NO!

*Hire a link building service. At first, this seems like it would be a great idea; after all, you are guaranteed links to your site. But you should know that most search engines have a method in place to recognize when a site is link spamming, which is what these services are actually offering you. When you turn the work over to a third party, you lose control of the situation, and that is a problem because you are unable to control the quality and relevance of the links to your site.

*Doing it Yourself. Build links with every site you can get to agree or make a comment on. Well, this idea is great. You have the ability to exercise control, but you just aren’t doing it. Before you go off half-cocked you should think about why we practice SEO in the first place. We do it because higher rankings draw in readers, which brings in advertisers and revenue. Linking to or from an irrelevant site will not help you in the long run, and may even cause search engines to mark you off as surely as if you had paid a service.

Doing It the Right Way

Build your links wisely; worry about the long term and not immediate results. The path to doing this is surprisingly straightforward.

First make two lists. The first list should be of sites that you can build links to by yourself. The first list will include blogs in which you can post comments (and links), and the second will be sites with which you want to build a linking relationship in the content that the site publishes. Now choose your top 10 from each list.

On your self link building list, be sure that your comments or postings are not spam-like in nature; be relevant and thoughtful. For your second list, get the contact information and send polite and professional emails suggesting a shared linking arrangement. You have to be able to give as well as take here.

Build your self posted links slowly, focusing on one or two comments a day over a few weeks or months. For the second list, once you have sent out the emails, all you can do is wait. After a few weeks have gone by you can move on down your list to the next 10. Just be sure to honor your prior agreements or you may find yourself with angry link partners on your hands.

Using GIF and JPEG graphic images in web site design

2009-03-11T10:59:00.000-07:00

One of the most important and difficult concepts to learn about digital imaging is which format is best for displaying graphics and photos on the web. Unfortunately, there are no clear cut answers to this question. It depends on the image to be displayed. There are two important factors to consider: file size and image quality. Currently there are only 2 widely supported formats [GIF and JPEG] that will display on the web. There is another up-and-coming format [PNG] which is only supported by the leading browsers in version 4 and above. Right now, let's not worry about the PNG format. Let's compare some GIF and JPEG images to get a feel for which format works best for what type of images--generally speaking, of course, because there are always exceptions. If you understand what each format does best and where each formats drawbacks lie, you can make an educated guess about which format to choose for various images when preparing them for display on the web.

What is Gif's?
(Graphics Interchange Format)
GIF file can contain the maximum of 256 colors (8 bit) or less, which is good for customizing your graphic files. For example, if you create a GIF image of a red arrow, , you can customize the file to have only two colors, read and white. This means that the file is very very small because its palette contains only two colors. GIF file will yield a higher quality and smaller size image, compared to JPEG, when it is used with computer generated graphics such as icons, logos, buttons, etc.

Example: GIF Format

What is JPEG's?(Joint Photographic Experts Group)
JPEG was built to contain 24-bit (16.7+ million colors) and was developed specifically for photographic-style images. JPEG stores the information of images by keeping track of color changes. The advantage of JPEG is that it can carry a smaller file size than GIF when used in storing photographs and images with a wide variety of shading. But, it will not yield a smaller file when dealing with low color level and details like computer generated graphics.

Example: JPEG Format

GIFs also has some special features such as animation, transparency, and interlacing.

Format GIF
1) Logo
2) Button
3) Animated GIF
4) Transparent
5) Icon

Format JPEG
1) Photos
2) Picture
3) Potret

Fill Text with Images in Photoshop

2009-03-11T04:14:00.000-07:00

Step 1
Open a landscape photo with definite color. Avoid something with too much of one solid color in one area, or with the same color as the background of the page you'll eventually be placing the word on. The image below (© iStockphoto.com ) is a good candidate for this technique.

Step 2
Select Photoshop's Text tool and click somewhere in the photo. This will create a new text layer. Type in the text you want the image to show through. If necessary, change the font size to something larger by either selecting the text and changing the size on the Options palette, or by clicking-and-dragging a corner of the text with the Move tool. (Make sure Show Transform Controls is selected up in the Options palette). For manual resizing, hold Shift to maintain proportion, and press Enter to apply changes.

Step 3
Change the typeface to a strong, thick font. I chose Impact.

Step 4
Next, double-click the Background layer to convert it to a normal layer. Name it something -- I've called mine Layer 0 -- and press OK.

Step 5
In the Layers palette, click-and-drag Layer 0 above the text layer.

Step 6
Now click on Landscape layer then (ctrl + right click) on mouse, u can see selected the text. Then click on layer O choose Select-> Inverse (Shift+ Ctrl +I) after that click delete from keyboard.

Your text should now contain the pixels of the photo, but the shape of the text.

Step 7
Select the Move tool and click-and-drag the text layer around the canvas. This lets you place the text so that the best part of the photo shows through.

Step 8
If you save the file as a JPEG, Photoshop adds a white background. To preserve the transparency, save the file as a transparent GIF. To preview what a background will look like with the text, click Add New Layer on the Layers palette, and click-and-drag the new layer to the bottom. Then, click the Foreground color and select a color for the background, such as white. Press Option-Delete (PC: Alt-Backspace) to fill that layer with the color.

Step 9
Let's try something slightly different example. For this example, I've used an image by David Freund, © iStockphoto.com.

Step 10
Now you'll add three text layers separately. Select Photoshop's Text tool, click in the photo, and enter the word "Ocean." Resize the text as desired.

Option-Click (PC: Alt-Click) to duplicate the text and then select the Text tool to change the text to "Surf". Option/Alt-Click again to change the text to "Sea". Position the words as you see below, then select all the text layers in the Layers palette and go to Layer > Merge Layers (or press Cmd-E (PC: Ctrl-E).

Step 11
Double-click the photo layer to make it a normal layer. Click-and-drag the merged text layer below the photo layer. Option-Click (Alt-Click) with the cursor in between the two layers. Add a white layer as you see below, or keep the background transparent.

Trees Promo Brush Pack

2009-03-04T22:40:00.000-08:00

Hi again, today i want to shared photoshop brush with you all, this brush create by Horhew. I tell you what, this brushes are FREE to use.

Infor The Brush

Extreme-quality (average resolution 2000+ pixels) tree brushes for Photoshop 7 and higher. Offering these brushes for free download.

Oh yea, one more thing offering these brushes for sale is strictly forbidden!

This brushes you can use for create Website Design also Advertisement and so on. You like it!

CLICK READ MORE FOR DOWNLOAD

Trees Promo Brush Pack

Free Vector Art - Envelope Icon Set

2009-03-04T19:42:00.000-08:00

Envelope Icon Set - Extensive envelope icon set (Adobe Illustrator CS EPS file) created by Phil Earley. This set features a variety of different envelopes and folders of different sizes. Free for Download :)

PLEASE CLICK READ MORE FOR DOWNLOAD

Download Free Vector Art - Envelope Icon Set

Download Terms

All free artwork downloads are copyright of respective owners.

Please DO NOT

You many not alter the source files or use the original sources files in order to make money by selling them.

You may not claim any of the files as your own.

You may not upload these files to any stock illustration/photo/resource sites.

Please do not copy our entire post and paste it on your site. You can use quotes or excerpts, but make your post original. Besides copying posts is considered duplicate content by search engines and will eventually hurt your rankings!

Please DO

Feel free to use these images in any of your designs such as in posters, flyers and business cards.

Feel free to use a screen shot or an image from our site to link back to us, please do not hot link our images.

* By downloading and or using the files you agree to these terms and conditions. Violating these terms and conditions could result in punishment to the maximum extent of the law. Terms and conditions are subject to change without notice.

8 tips Webmasters Development Tools

2009-03-03T23:24:00.000-08:00

Webmasters Development Tools, - What tools do you use and why?

As a web Designer / Designer my toolset is XTReME but this is due to the various forms of development we as a business are contracted to do. For example, I use Adobe Photoshop CS quite a bit for Design / Development Web Portal. Without going into a dissertation I am going to let you know the "base tools" we use and why. Some may surprise you, maybe not.

1. Microsoft Office

We use MS Office ALOT. Within we develop out business proposals to clients. We do nothing "fixed price" as every client is different. We communicate with them, gauge their needs as they relay them, gauge their skill set and we meet at a later date with our ideas, their ideas and a proposal. We used Word to make outlines of all the ideas and concepts, we use Excel to build out the "site options" aka: Basic site, Advanced Site, The Works... We present three options to all clients.

2. MindMap Pro

This (and other idea gathering and organizing) software is just AWESOME for development be it applications or web development. It allows you to create various forms of charts that are valuable during the development cycle but ALSO impress the crap out of your clients. You can start with things such as simple charts showing them various web abilities, for example, Amazon affiliate abilities step by step.

PRESENTATION COUNTS... EVERYTHING is judged by people be that websites or how you wish to attract customers to your development business. PRESENTATION IS EVERYTHING.

3. PaintShop Pro - Adobe Photoshop CS

Two fine image editors. We use Adobe Photoshop much more than PaintShop Pro for graphics, logo creation etc. We tend use Adobe Photoshop for "slicing" things up or specialization of images. We have found that Photoshop's complexity is usually of web design. In fact often its best to not get all creative and seek and slice out graphics where needed from google searches etc.

As far as image creation goes... I suck duck. However, my other half is AWESOME at it.

If you do not have a person who "Has the eye" for art and imaging you need find someone. I am fortunate, my lady is awesome at it. But... Believe it or not you can try and find high schoolers for example in art classes that are VERY good at digital art and they are MORE than happy to make some side dough at VERY reasonable rates!

4. Dreamweaver, Microsoft Expression Web, PSPad

Dreamweaver is an AWESOME web editor, with the myriads of plugin's and consistent user interface it is WONDERFUL for building static sites and sites that have some dyanmic content. Expression Web is my editor of choice for ASP.NET based work. PSPad is just a fantastic all around "editor" and fills in all the gaps nicely.

5. Flash, Swish & Namo Web Editor

This is obvious... FLASH stuff. Generally speaking we only use flash to "accent" web sites. In time as Microsoft Silverlight, Flash and platforms such as Visual Studio and Flex Builder advance these more interactive environments will actually become the standards for web sites. Namo we use to "Rip Flash"... Its good for that. If you want a Flash item and want modify it Namo does a decent job of reverse engineering things.

6. Drupal CMS, Joomla CMS, SubDreamer

While I have not expored every "CMS" on the planet as there are many and more coming all the time these are what we have used. Our selection of which to use really depends on our client and our clients needs. When they need a dynamic site, frequent updates etc. whether they manage it or whether we maintain it all need be relayed to the client.

Joomla is nice, easy, effective though at times requires tweaking PHP code and obviously dealing with lots of formatting crap since nothing is standardized for the most part. Joomla has HORRIBLE workflow when considering a client maintaining their own site. Drupal is more ghastly from the developer point of view (though getting better) but does allow for the developer to set up good permissions (not excellent) and workflow for the client. For "EASY" sake, SubDreamer... Anyone can learn to use this and its a damned fine CMS.

7. Portals

I've done some sites with Drupal (PHP based portal) and its pretty decent. Example ( Bridging Digital Divide) I've yet to find a ASP.NET Portal worth a crap. For the past few months I've also been playing with a WONDERFUL portal application called Liferay, it is Java based... its efficient, AWESOME in capability, TRASHES any CMS noted above (except for the fact "Addons" are limited) and its DAMNED fast. It is a "WORLD CLASS" Enterprise level application... period. It will run rings around any of the above CMS's with its hands tied behind its back.

8. eCommerce

LOTS of these applications out there and many are really good, many suck, many are someplace inbetween. eCommerce is popular among those wanting websites. Ive played a bit with the rather new Open Source "Magento" and I just cant say who the target client is for Magento. Clearly it appears pointed at the business that wants a powerhouse eCommerce solution. Unfortunately most people wanting to engage in eCommerce are not power house salesman.

SunShop... If you've not tried it, pretty cool little shop program. Its quite easy to design for in templates, it has many really nice plugin's including absolutely painless integration with everything from PayPal to every merchant account type/provider on the planet. Wish lists, featured items, discounts tickets, gift certificates, reviews and more. Its EXTREMELY simple to administrate which is VERY nice when it comes to clients. So, power, performance and easy to setup, easy for your client to use. It lacks some things, video for example would be nice. But for your average small business its really quite good. In fact.... I am considering coding up a bridge for it so it can be seamlessly used with Joomla CMS. SubShop also has static page generation ability built in, very nice for Search Engine ranking.

While we are on that subject... Joomla, Drupal, CMS developers.... REALIZE that your iFRAME ability in these applications are VERY under utilized in sites. While for example you might be itching to have a DECENT mass mailer application that works nice with your CMS based site(s) or eCommerce package or Amazon Affiliate Store etc... You can use iFrame's to bring EXCEPTIONAL scripts seamlessly integrating to your CMS based webs!

-----

Please post what tools you use and WHY...

Until Next Time!

Evolution of Logos - Past to Present

2009-03-02T01:54:00.000-08:00

Perhatikan logo-logo di bawah, perubahan logo mengikut tahun ke tahun sesebuah organisasi dengan hasil corak dan rekaan yang terbaru. Mungkin Anda akan mendapat idea yang ideal bagi menghasilkan logo untuk syarikat Anda selepas mendapat inspirasi logo-logo dibawah.

Lego Logo

Texaco Logo

Playboy Logo

Nestle Logo

Peugeout Logo

Palm Logo

Nokia Logo

Nike Logo

Motorola Logo

Mitsubishi Logo

Microsoft Logo

Mercedes Benz Logo

Mazda Logo

Kodak Logo

Intel Logo

ITRC Logo

Google Logo

G

Ford Logo

Firefox Logo

Fiat Logo

Fedex Logo

Canon Logo

Cadillac Family Crest Logo

Cadillac Logo

Buick Shield Logo

Buick Early Logo

BMW Logo

Audi Logo

Aston Martin Logo

Apple Logo

Adobe Logo

WWF Logo

Pepsi Logo

CBS Logo

Yamaha Logo

Nortel Logo

36 Cool Business Cards

2009-02-27T18:14:00.000-08:00

In a company where the visual identity became essential, these creations make it possible to make the difference. A well designed and printed business card can impress and make people take notice and remember you . A badly designed or printed card can leave a bad impression or even worse be simply forgotten. Here is a collection of cool Business Card to inspire you,

Graphic Design Resources

2009-02-27T02:12:00.000-08:00

Dibawah merupakan kualiti sumber rekabentuk grafik. Saya telah membuat beberapa pautan grafik didalam halaman ini untuk rujukan bersama. Jika anda mempunyai laman laman grafik yang baik dan ingin dikongsikan bersama, tinggalkan pesanan di bahagian komen untuk saya review dan senaraikan didalam ruang ini.

Our Favorite Graphic Design Resources

Adobe Tutorials

PSD Tuts
Vectips
PS Hero
Good Tutorials
AiBurn
Pixel 2 Life
Istockdiary

Graphic Design Forums

Your Design Forums
GD Forums
Estetica Design Forum
AGD Forums
HOW Design Forums
Talk Freelance
Digital Point Forums

Graphic Design Jobs

Authentic Jobs

Graphic Design Communities

Behance
Desig:Related
Coroflot

Design Inspiration

Design Gallery
Design You Trust
Faveup
Smashing Magazine

Blogs

Design Observer
Swiss Miss
Freelance Switch
I Love Typography
Noupe

Graphic Design News

Graphic Design Links
Design Float
Newstoday
Digg Design

Graphic Design Magazines

I.D. Magazine
Beautiful/Decay
Print Magazine
Layers Magazine
HOW Magazine

Color Resources

Colour Lovers

Kuler
Color Codes Matching Chart
Web Color Visualizer
Pantone

Type Resources

CSS Type
Typetester

Stock Photography

iStockphoto
Free Stock Photos and Textures - Freerange Stock

Printers

UPrinting Online Printing

Books

How to Sell Art Online
How to be a Rockstar Freelancer
How to Start a Clothing Line

Color Tools For Web Designers

2009-02-25T10:03:00.000-08:00

A reference worth bookmarking for designers. Most of them you have probably seen and used, but still a handy reference. Color is an important factor in web design. Here is a list of resources on how to choose color schemes when designing web sites:

Web 2.0 Color Palette

Color Harmony

Pic2Color

GenoPal

Colr.org
\

4096 Color Wheels

Color Schemer Online v2

Color Schemer

Color Scheme Generator

Color Palette Generator

Colour Lovers

Color Hunter

ColorDB

Color Blender

Adobe Kuler

Preview On New Firefox 3.0

2009-02-25T08:51:00.000-08:00

Are you eager to see some previews on the new Firefox 3? Thanks to Alex Faaborg, a User Experience Designer for Firefox 3 we get to see some screen shots of the new Firefox 3 currently in development. I’m not going to rip all his images, so to see every screen shot and details on Firefox 3, you gotta visit Alex’s blog. Images after jump.

Bookmarks

Taggings

Malware Protections

If you are concern and would like to contribute to the development of Mozilla Firefox 3, you can submit your feed back or even create your own UI mockups.

In the mean time, let’s stick with Firefox 2.0.0.5, shall we.

Other proposed features that thus far don’t have UI mockups include:

Offline Web applications
Improvements to the password manager
A graphical keyboard-based UI similar to Quicksilver and Enso for searching the Web, bookmarking and tagging pages, navigating recent history, and switching between tabs. Note: this feature isn’t in the Firefox 3 PRD, and it will probably be released as an experimental extension through Mozilla Labs before it gets considered for inclusion into Firefox.

Ajax Project - Tabbed Page Interface

2009-02-25T08:23:00.000-08:00

Memenuhi pasaran global, web 2.0 adalah salah satu package pada generasi baru bagi pembangunan laman web. Contoh terbaik laman web berkonsepkan Web 2.0 adalah Yahoo.com. Kelebihan penggunaan menu tabbing adalah untuk menjimatkan ruang di setiap page. Oleh itu Designer/Web Designer seharusnya mengetahui basic tabbed page secara menyeluruh.

There are quite a few Javascript implementations of tabbed interfaces out there on the web. How much better, though, to be able to change from pagetab to pagetab without a page refresh? Here's an example of a tabbed interface using Ajax to load the new pages.

[demo]

Poster Daripada Tulisan - Adobe Photoshop

2009-02-25T00:49:00.000-08:00

Anda ingin mencipta Poster Musical yang menarik? Saya akan tunjukkan bagaimana cara-nya.

Ok, sebagai permulaan, langkah pertama anda harus mencipta satu dokumen baru di Adobe Photoshop saiz-nya 500x500 px, kemudian isikan latar belakang dengan warna hitam seperti gambar di bawah.

Selepas itu pilih Horizontal Type Tool dan letakkan sebarang teks di semua latar belakang seperti pada gambar dibawah. Gunakan warna #431a1a untuk teks:

Kini putarkan teks 45 darjah CW menggunakan Edit > Transform >Rotate:

Selepas itu set up mengikut pilihan font:

Sekarang, rupabentuknya gambar kelihatan seperti gambar dibawah:

Ok, masa untuk mencari gambar yang sesuai untuk menempatkan ia pada kanvas kita. Anda boleh mencari menggunakan Google Search atau menggunakan gambar seperti dibawah. Salin (COPY) gambar ke atas kanvas anda mengikut lapisan layer teks ( sila tidak menggunakan elemen imej-imej yang begitu kecik saiz-nya kerana ia akan menghasilkan kesan yang kurang menarik).

(copy atau save gambar diatas)

Selepas itu tekan Ctrl + J untuk menyalin lapisan layer, kemudian sembunyikan salinan (click on the eye, which indicates layer visibility) dan pergi ke lapisan layer lebih rendah. Pilih di kawasan bibir menggunakan Polygonal Lasso Tool, kemudian guna Ctrl+Shift+I untuk menterbalikkan pilihan tersebut dan tekan Delete untuk memadamkan bahagian imej yang terpilih.

Buang pemilihan dengan Ctrl+D, selepas itu kembali untuk salinan layer yang tersembunyi dan aktifkan ia supaya dapat di lihat. Ok kini buat pemilihan daripada teks (Ctrl+right click the Layer Thumbnail in the Layers Palette) dan tekan Ctrl+Shift+I untuk menterbalikkan pemilihan, selepas itu tekan Delete untuk bersihkan imej yang telah dipilih.

Deselect gambar dengan Ctrl+D, sekarang gambar anda akan kelihatan seperti ini:

Kini saya mahu menambah beberapa teks untuk poster kita. Keluar dari Horizontal Type Tool (just the regular one) dan tulis sesuatu seperti 'DJ Music! Only best hits!' pada dua garisan dengan sama presets sebagai teks latar belakang. Guna warna putih untuk teks.

Sekarang rotate teks tersebut kepada 45 degrees CW menggunakan Edit > Transform >Rotate, dan gerakkan sedikit seperti gambar dibawah:

Music Poster anda telah Selesai! Terima Kasih kepada semua khas untuk bacaan tutorial ini, saya harap anda enjoy tutorial ini!

Web Rujukan for Designer

2009-02-24T22:37:00.000-08:00

Sebagai seorang designer mahupun programmer anda semestinya mempunyai laman web rujukan untuk dijadikan satu pusat idealogi bagi membangunkan sesuatu rekabentuk laman web.

Berikut adalah sebahagian rujukkan saya dalam membangunkan laman web.

1. http://www.webdesignfromscratch.com/
2. http://www.smashingmagazine.com/
3. http://www.bittbox.com/
4. http://www.stripegenerator.com/
5. http://www.cleancss.com/
6. http://www.maxpower.ca
7. http://www.iconfinder.net/
8. http://www.orangeicons.com
9. http://www.entheosweb.com
10. http://www.dynamicdrive.com (rujukkan untuk CSS Menu)
11. http://www.thefwa.com/ (rujukkan untuk flash yang excellent)
12. http://www.opensourcecms.com (rujukkan untuk opensources PHP CMS/Blog/Forum)

Sila cadangkan mana2 web yg sesuai utk dijadikan rujukan dan sumber pembangunan laman web.

Web Designer / Designer - Rancang Kerja Anda

2009-02-24T22:35:00.000-08:00

Untuk menjadi seorang designer yang baik, setiap kerja yang kita akan lakukan perlulah dirancang dengan baik. Habit merancang akan membantu pengurusan masa kerja. Jadi, anda mampu melakukan kerja yang banyak dalam masa yang singkat.

Salam semua!

Di sini saya akan berkongsikan pengalaman saya di dalam melakukan projek-projek rekabentuk. Tips perancangan ini mungkin berbeza dengan orang lain. Kerana saya percaya masing-masing mempunyai cara kerja tersendiri mengikut keselesaan masing-masing.

Prinsip kerja saya semasa bekerja sebagai designer suatu ketika dahulu ialah “saya tak perlu stay back jika tidak perlu”. Saya perhatikan kerjaya designer ini terlalu sinonim dengan balik lewat dan terpaksa buat kerja sehingga lewat malam (adakalanya sehingga ke pagi). Jikalau projek tersebut adalah “urgent” maka stay back tidak menjadi isu kerana memang memerlukan kita untuk begitu.

Walau bagaimana pun, stay back akan menjadi isu apabila kerja yang sepatutnya mudah tetapi terpaksa mengambil masa yang lebih. Ini mungkin terjadi kerana cara kerja kita yang seringkali tidak betul atau kita tidak mendapatkan input yang tepat daripada arahan projek.

Kita cuba perhatikan perkara-perkara berikut:

1. SAIZ DIMENSI

“Design ni nak saiz besar mana?”

“Ini nak print ke nak letak dalam screen je?”

“Nak print digital ke nak buat filem?”

Itu antara soalan-soalan lazim yang patut seorang designer tanya sebelum memulakan kerja. Bukan tanya pada diri sendiri, tapi tanyakan kepada pemberi kerja (klien atau boss anda).

Apabila kita hendak memulakan sesuatu design, perkara pertama yang kita lakukan apabila kita buka software adalah Open New File. Di situ kita kena tetapkan dimensi canvas atau artboard. Jadi kita perlu tahu berapa sentimeter, atau inci, atau piksel. Kita juga perlu tahu berapa nilai untuk resolusi dalam unit dpi.

Bayangkan sekiranya anda buat kerja tanpa mendapatkan kepastian tentang saiz. Anda ‘rasa’ ianya adalah A4 Landscape. jadi, anda terus buat sehingga siap. Setelah siap, anda tunjukkan kepada boss anda. Tiba-tiba boss anda cakap ianya salah kerana design itu sepatutnya A3 Portrait!

Agaknya apa yang anda perlu lakukan sekarang? Kerana, di dalam software grafik tiada kemudahan auto untuk tukar-tukar layout. Jadi, anda kena mula semula. Buang masa bukan? Hanya kerana anda tidak mendapatkan input yag tepat mengenai saiz.

Pastikan juga anda dapatkan secara tepat tentang ‘user requirements’ yang lain-lain.

2. DEADLINE

Terma yang sangat popular di dalam dunia grafik - deadline (ejaannya bukan ‘dateline’ ya). Deadline adalah tarikh kerja harus disiapkan sepenuhnya. Pastikan anda sangat jelas tentang deadline ini. Susunkan jadual kerja dan hidup anda berdasarkan keperluan tarikh deadline tersebut.

Jadikan habit untuk ingat tarikh deadline. Jangan sampai terlupa atau buat-buat lupa.

3. LAKARAN RINGKAS

Lakaran ringkas juga banyak membantu saya ketika membuat design. Apabila mendapat arahan untuk membuat sesuatu kerja, saya akan melakarkan kehendak klien dan idea-idea saya di atas sekeping kertas. Proses ini adalah seperti melakukan sesi ‘brainstorming’. Apabila idea asas dan nota telah tersedia di atas kertas tersebut, barulah saya akan mulakan design di dalam komputer.

Seringkali saya lihat designer buntu apabila terus memulakan design di dalam komputer. Mereka buka fail baru di dalam Photoshop, kemudian hanya merenung canvas kosong di atas skrin kerana sedang mencari idea. Sukar, kerana mereka mencari idea di dalam satu ruang pemandangan yang sempit iaitu ke atas canvas kosong di dalam skrin monitor 19 inci. Jika anda mengambil kertas, fikiran anda lapang. Anda boleh melihat daripada banyak perspektif. Mungkin anda boleh melakarkan idea anda di luar studio atau pejabat anda.

4. GAYA TERSENDIRI

Gaya tersendiri ini mungkin biasanya disebut sebagai ‘trademark’ seseorang designer. Setiap designer harus membentuk gayanya tersendiri. Selain daripada untuk menjadikan identiti, ianya juga membantu anda di dalam mempercepatkan kerja anda. Bagaimana?

Apabila anda sudah biasa menghasilkan sesuatu design mengikut gaya anda tersendiri, tentunya anda mempunyai filter kesukaan, styles kegemaran dan skema warna yang anda sangat selesa. Jadi, anda dapat mengurangkan tempoh cuba-jaya untuk mendapatkan styles baru, skema warna yang baru dan efek yang anda tak pernah tahu hasilnya.

Cuba-jaya biasanya saya lakukan ketika ada masa lapang. Bukan ketika membuat kerja (jarang berlaku, mungkin ada juga).

5. BUAT LIBRARY

Bagi memudahkan proses mendapatkan idea, biasanya kita akan surfing di internet dan melihat-lihat hasil kerja orang lain sebagai inspirasi (bukan untuk menciplak ya). Anda boleh buat satu folder di dalam komputer untuk menyimpan kerja-kerja mereka sebagai inspirasi anda. Kategorikan folder anda - web design / print work / digital art / flash work / photography dan sebagainya.

Selain itu juga, anda boleh buatkan library untuk apa-apa yang menjadi kesukaan anda seperti Brush / Styles / Effects / Textures dan sebagainya.

Cukup dulu dengan lima point sebagai tips ringkas.

Sekiranya anda mampu menguruskan masa dan cara kerja dengan baik, anda akan mempunyai banyak masa untuk melakukan aktiviti harian anda yang lain-lainnya.

Selamat berkarya dan bekerja!

Artikel disumbang oleh Imran Abdul Jabar

81 Free Search Engine & Directory

2009-02-18T23:29:00.000-08:00

Apabila anda mempunyai laman web, seharusnya anda akan rasa gusar dan penuh dengan pertanyaan, bagaimanakah untuk mempromosikan laman web anda didalam Search Engine dan Directory. Dibawah saya ada sertakan laman - laman web yang penting yang boleh membantu anda bagi mempromosi laman web anda dan visitor melayari laman web anda.

Alta Vista

Google (AOL/Netscape/iWon)

DMOZ (Open Directory Project)

Infobase International

Sebelum anda memikirkan blog/website anda menjadi laman blog yang berpontesi dan pengunjung masuk ke dalam laman web anda melalui search engine, luangkan masa anda selama sehari untuk register laman web anda di dalam 81 Search Engine dan Directory.

Segalanya

PERCUMA!! FREE!!

Add an icon to your URL

2009-02-18T23:00:00.000-08:00

To put an icon in the URL space of one of your own pages, make a very small image. By very small, it should be 16 X 16 pixels and it should only use 16 or 8 colors. The image should be a gif and it should be very basic or it'll be too small to look like anything. Once you have your image the way you want it, rename it to have the extension .ico instead of .gif. It needs to have the .ico extension to be viewed as an icon, and it needs to be an icon for this to work.

To add an icon to your URL:

1. You need an icon. There are plenty of icons on your pc to pick from. Use windows search and look for *.ico Or you can create one go here
2. Upload the icon to your directory on line the same location of the index.html
3. Rename the icon on line to favicon.ico
4. Add both lines below to the head of your index.html page

Also just upload the favicon.ico to the root directory of the site all new browsers will find it.

It works with and Netscape7, IE5 and up and Firefox

Tak paham juga tutorial saya tu, layari laman web ini. mungkin ini boleh membantu anda http://tools.dynamicdrive.com/favicon/

Tip 11 kriteria laman web Yang baik

2009-02-18T22:19:00.000-08:00

Kriteria Laman Web Yang Baik

Terdapat beberapa perkara penting yang harus diambil kira semasa merekabentuk laman web. Tips berikut amat bagus bagi menghasilkan laman web yang baik dan menggembirakan pengunjung anda:

1. Rekabentuk laman web yang simple dan mudah. Ingat, tujuan anda membina laman web ialah untuk menyampaikan info tentang produk anda kepada pelawat. Jadikan lama web anda ringkas dari menggunakan gambar dan animasi yang terlalu banyak sehinga mengganggu focus pengunjung anda terhadap info yang anda sediakan.

2. Objektif. Pastikan anda tahu dan faham apa tujuan laman web tersebut dibina kerana ia akan mempengaruhi pelbagai aspek rekabentuk laman web seprti penggunaan warna, sasaran
pengguna, teknologi, dsb. Isi laman web juga haruslah fokus kepada objektif.

3. Kedudukan link/menu perlu konsisten. Anda perlu menyediakan link pada kedudukan yang tetap. Jika dalam fail utama link anda berada dibahagian tengah atas, pastikan page lain juga mempunyai link pada kedudukan yang sama.

4. Gambar yang digunakan hendaklah optima supaya ia cepat diload dan tidak terlalu berat. Rekabentuk grafik yang menarik menjadikan laman web anda unik dan menarik di pandangan mata pengunjung, tetapi ingat, hanya letak gambar-gambar yang berkaitan sahaja (gambar produk anda). Pemilihan konsep warna yang sesuai juga amat penting.

5. Navigasi. Apa itu navigasi? Navigasi ialah perjalanan web anda dari satu halaman ke satu halaman berdasarkan link yang anda telah buat. Pastikan anda merekabentuk link/menu anda dengan jelas dan mudah untuk dilihat pengunjung. Pilih warna yang sesuai supaya ianya dapat dibezakan dan kelihatan jelas.

Penting : Pastikan navigasi yang mudah untuk proses pembelian dan pembayaran.

6. Logo dan nama.Pastikan logo atau nama laman web anda dipaparkan dengan jelas kerana ianya adalah identity perniagaan anda.

7. Font. Anda perlu pilih font yang standard sahaja seperti Arial, Verdana atau Times New Roman. Jika anda menggunakan font yang bukan standard, ada 2 perkara mungkin berlaku:-

a. Menyusahkan pengunjung anda membaca. (Font Script)
b. Mungkin ada pengunjung yang tidak dapat melihat dan membaca kerana font tersebut tiada di dalam komputer mereka.

8. Cara menghubungi anda. Anda perlu sediakan kaedah atau cara bagaimana pengunjung boleh menghubungi anda sama ada melalui email, form atau telefon.

9. Isi kandungan web anda. Anda perlu pastikan maklumat yang anda sediakan dalam web adalah berkaitan dengan perniagaan anda dan mencukupi, kerana pengunjung akan merasa puas hati dengan info yang lengkap. Mereka mungkin akan membuat belian jika mereka yakin dengan produk anda.

10. Pastikan link yang anda buat di laman web berfungsi.

11. Susunan. Pastikan susunan grafik, button, text dan link disusun dengan baik dan tersusun. Laman web yang berterabur membuatkan pengunjung tidak akan lawati web anda untuk kali
ke-2 dan seterusnya.

Tips:

a. Cara terbaik untuk anda mendapat idea bagaimana membina laman web ialah dengan melihat laman web orang lain.
b. Rekabentuk laman web yang baik mengandungi 3 unsur utama iaitu :-

Menarik (attractive)
Mudah digunakan (user friendly)
Laman web bermaklumat (full of information)

c. Ingat, tujuan anda membina laman web bukan semata-mata untuk menghasilkan laman web yang cantik dan menarik, tetapi yang lebih penting ialah maklumat dan mesej yang anda ingin
sampaikan kepada pengunjung tercapai.

Selamat Mencuba!

How To Access Blocked Web Sites

2009-02-18T22:08:00.000-08:00

Bagaimana Untuk Mengakses Laman-laman Web Yang Terhalang.

Laman web proksi membenarkan anda untuk memintas arus ISP IP dan disambungkan kepada alamat/url laman web dengan satu perbezaan IP; oleh itu sembunyikan IP asal sebenar kita daripada dapat dikesan. Pengguna Internet menggunakan proksi laman-laman web untuk sebab-sebab tertentu, untuk mengakses laman web terhalang di tempat kolej-kolej atau tempat kerja, Berikut adalah satu alternatif bagaimana untuk kita mengakses laman web yang telah dihalang oleh Administrator Networking di sesebuah kolej, company dan dsb.

Berikut merupakan senarai alamat/url yang membenarkan anda mengakses website terhalang :)

90+ Proxy Websites To Access Blocked Websites

1. http://www.hidemyass.com
2. http://www.anonymizer.com
3. http://www.wujie.com
4. http://www.ultrareach.net
5. http://surfshield.net
6. http://www.guardster.com/subscription/proxy_free.php
7. http://anonymouse.ws/anonwww.html
8. http://www.browser-x.com
9. http://www.spysurfing.com
10. http://www.xerohour.org/hideme
11. http://www.proxyz.be
12. http://www.sc0rian.com/prox
13. https://www.proxify.us
14. http://kproxy.com/index.jsp
15. http://www.brawl-hall.com/pages/proxy.php
16. http://www.proxify.net
17. http://proxy.computersteroids.com/index0.php
18. http://www.unipeak.com
19. http://flyproxy.com
20. http://alienproxy.com
21. http://proxify.com/
22. http://www.unfilter.net
23. http://www.proxymouse.com
24. http://www.surfonym.com/cgi-bin/nph-proxy
25. http://www.superproxy.be/browse.pl
26. http://www.websiteguru.com/mrnewguy
27. http://www.letsproxy.com
28. http://www.fsurf.com
29. http://indianproxy.com
30. http://www.letmeby.com
31. http://Boredatschool.net
32. http://www.ibypass.org
33. http://www.ipzap.com/
34. https://proxify.biz
35. http://kproxy.com/index.jsp
36. http://www.attackcensorship.com/attack-censorship.html
37. http://mrnewguy.com
38. http://www.evilsprouts.co.uk/defilter
39. http://www.proxify.info
40. http://www.torify.com
41. http://www.switchproxy.com
42. http://www.proxifree.com
43. http://www.secure-tunnel.com/
44. http://www.proxify.cn
45. http://www.arnit.net/utilities/webproxy/new
46. http://www.proxify.co.uk
47. http://www.betaproxy.com
48. http://www.proxify.org
49. http://www.proxychoice.com
50. http://www.proxysnail.com
51. http://www.anonypost.com
52. http://www.thestrongestlinks.com
53. http://www.hujiko.com
54. http://www.anonproxy.info
55. http://www.peoplesproxy.com
56. http://www.freeproxy.us
57. http://www.proxyweb.net
58. http://www.nopath.com
59. http://urlencoded.com
60. http://www.pole.ws
61. http://www.browseany.com
62. http://www.spiderproxy.com
63. http://www.clickcop.com
64. http://www.sneakysurf.com
65. http://www.mywebtunnel.com
66. http://www.thewebtunnel.com
67. http://www.3proxy.com
68. http://www.yourfreeproxy.com
69. http://www.proxy7.com
70. http://www.fireprox.com
71. http://www.stupidcensorship.com
72. http://www.letsproxy.com
73. http://www.sneak2.com
74. http://www.cecid.com
75. http://www.freeproxy.ca
76. http://www.ibypass.org
77. http://www.goproxing.com
78. http://www.projectbypass.com/
79. http://www.ipsecret.com
80. http://www.nomorelimits.net
81. http://www.proxify.de
82. http://www.bywhat.com
83. http://www.snoopblocker.com
84. http://www.anonymizer.ru
85. http://www.proxyking.net/
86. http://www.perlproxy.com
87. http://www.proxylord.com
88. http://tntproxy.com
89. http://satanproxy.com
90. http://zombieinvasion.info
91. http://demonproxy.com
92. http://www.myfreeproxy.com
93. http://www.gezcem.com/nph-proxy.pl.old
94. http://mpleger.de
95. http://www.the-cloak.com/login.html

100 Keyboard shortcuts (Windows)

2009-02-18T21:46:00.000-08:00

Shortcuts keyboard bukan saja membantu anda menyelesaikan kerja dengan cepat, malah juga lebih efisien. Jika kerja harian anda bergantung pada pengunaan Windows sistem, di sini ada 100 Windows Keyboard Shortcuts anda mungkin perlu ketahui. Jika ada shoutcuts key yang saya tertinggal, sila tinggalkan mesej di komen area.

The General Shortcuts

We’ll kickoff the list with some really general shortcuts that you often used.

CTRL+C (Copy)
CTRL+X (Cut)
CTRL+V (Paste)
CTRL+Z (Undo)
DELETE (Delete)
SHIFT+DELETE (Delete the selected item permanently without placing the item in the Recycle Bin)
CTRL while dragging an item (Copy the selected item)
CTRL+SHIFT while dragging an item (Create a shortcut to the selected item)
F2 key (Rename the selected item)
CTRL+RIGHT ARROW (Move the insertion point to the beginning of the next word)
CTRL+LEFT ARROW (Move the insertion point to the beginning of the previous word)
CTRL+DOWN ARROW (Move the insertion point to the beginning of the next paragraph)
CTRL+UP ARROW (Move the insertion point to the beginning of the previous paragraph)
CTRL+SHIFT with any of the arrow keys (Highlight a block of text)
SHIFT with any of the arrow keys (Select more than one item in a window or on the desktop, or select text in a document)
CTRL+A (Select all)
F3 key (Search for a file or a folder)
ALT+ENTER (View the properties for the selected item)
ALT+F4 (Close the active item, or quit the active program)
ALT+ENTER (Display the properties of the selected object)
ALT+SPACEBAR (Open the shortcut menu for the active window)
CTRL+F4 (Close the active document in programs that enable you to have multiple documents open simultaneously)
ALT+TAB (Switch between the open items)
ALT+ESC (Cycle through items in the order that they had been opened)
F6 key (Cycle through the screen elements in a window or on the desktop)
F4 key (Display the Address bar list in My Computer or Windows Explorer)
SHIFT+F10 (Display the shortcut menu for the selected item)
ALT+SPACEBAR (Display the System menu for the active window)
CTRL+ESC (Display the Start menu)
ALT+Underlined letter in a menu name (Display the corresponding menu)
Underlined letter in a command name on an open menu (Perform the corresponding command)
F10 key (Activate the menu bar in the active program)
RIGHT ARROW (Open the next menu to the right, or open a submenu)
LEFT ARROW (Open the next menu to the left, or close a submenu)
F5 key (Update the active window)
BACKSPACE (View the folder one level up in My Computer or Windows Explorer)
ESC (Cancel the current task)
SHIFT when you insert a CD-ROM into the CD-ROM drive (Prevent the CD-ROM from automatically playing)

Dialog Box Keyboard Shortcuts

CTRL+TAB (Move forward through the tabs)
CTRL+SHIFT+TAB (Move backward through the tabs)
TAB (Move forward through the options)
SHIFT+TAB (Move backward through the options)
ALT+Underlined letter (Perform the corresponding command or select the corresponding option)
ENTER (Perform the command for the active option or button)
SPACEBAR (Select or clear the check box if the active option is a check box)
Arrow keys (Select a button if the active option is a group of option buttons)
F1 key (Display Help)
F4 key (Display the items in the active list)
BACKSPACE (Open a folder one level up if a folder is selected in the Save As or Open dialog box)

Microsoft Natural Keyboard Shortcuts

Windows Logo (Display or hide the Start menu)
Windows Logo+BREAK (Display the System Properties dialog box)
Windows Logo+D (Display the desktop)
Windows Logo+M (Minimize all of the windows)
Windows Logo+SHIFT+M (Restore the minimized windows)
Windows Logo+E (Open My Computer)
Windows Logo+F (Search for a file or a folder)
CTRL+Windows Logo+F (Search for computers)
Windows Logo+F1 (Display Windows Help)
Windows Logo+ L (Lock the keyboard)
Windows Logo+R (Open the Run dialog box)
Windows Logo+U (Open Utility Manager)

Accessibility Keyboard Shortcuts

Right SHIFT for eight seconds (Switch FilterKeys either on or off)
Left ALT+left SHIFT+PRINT SCREEN (Switch High Contrast either on or off)
Left ALT+left SHIFT+NUM LOCK (Switch the MouseKeys either on or off)
SHIFT five times (Switch the StickyKeys either on or off)
NUM LOCK for five seconds (Switch the ToggleKeys either on or off)
Windows Logo +U (Open Utility Manager)

Windows Explorer Keyboard Shortcuts

END (Display the bottom of the active window)
HOME (Display the top of the active window)
NUM LOCK+Asterisk sign (*) (Display all of the subfolders that are under the selected folder)
NUM LOCK+Plus sign (+) (Display the contents of the selected folder)
NUM LOCK+Minus sign (-) (Collapse the selected folder)
LEFT ARROW (Collapse the current selection if it is expanded, or select the parent folder)
RIGHT ARROW (Display the current selection if it is collapsed, or select the first subfolder)

Shortcut Keys for Character Map

After you double-click a character on the grid of characters, you can move through the grid by using the keyboard shortcuts:
RIGHT ARROW (Move to the right or to the beginning of the next line)
LEFT ARROW (Move to the left or to the end of the previous line)
UP ARROW (Move up one row)
DOWN ARROW (Move down one row)
PAGE UP (Move up one screen at a time)
PAGE DOWN (Move down one screen at a time)
HOME (Move to the beginning of the line)
END (Move to the end of the line)
CTRL+HOME (Move to the first character)
CTRL+END (Move to the last character)
SPACEBAR (Switch between Enlarged and Nor mal mode when a character is selected)

Microsoft Management Console (MMC) Main Window Keyboard Shortcuts

CTRL+O (Open a saved console)
CTRL+N (Open a new console)
CTRL+S (Save the open console)
CTRL+M (Add or remove a console item)
CTRL+W (Open a new window)
F5 key (Update the content of all console windows)
ALT+SPACEBAR (Display the MMC window menu)
ALT+F4 (Close the console)
ALT+A (Display the Action menu)
ALT+V (Display the View menu)
ALT+F (Display the File menu)
ALT+O (Display the Favorites menu)

MMC Console Window Keyboard Shortcuts

CTRL+P (Print the current page or active pane)
ALT+Minus sign (-) (Display the window menu for the active console window)
SHIFT+F10 (Display the Action shortcut menu for the selected item)
F1 key (Open the Help topic, if any, for the selected item)
F5 key (Update the content of all console windows)
CTRL+F10 (Maximize the active console window)
CTRL+F5 (Restore the active console window)
ALT+ENTER (Display the Properties dialog box, if any, for the selected item)
F2 key (Rename the selected item)
CTRL+F4 (Close the active console window. When a console has only one console window, this shortcut closes the console)

Remote Desktop Connection Navigation

CTRL+ALT+END (Open the m*cro$oft Windows NT Security dialog box)
ALT+PAGE UP (Switch between programs from left to right)
ALT+PAGE DOWN (Switch between programs from right to left)
ALT+INSERT (Cycle through the programs in most recently used order)
ALT+HOME (Display the Start menu)
CTRL+ALT+BREAK (Switch the client computer between a window and a full screen)
ALT+DELETE (Display the Windows menu)
CTRL+ALT+Minus sign (-) (Place a snapshot of the active window in the client on the Terminal server clipboard and provide the same functionality as pressing PRINT SCREEN on a local computer.)
CTRL+ALT+Plus sign (+) (Place a snapshot of the entire client window area on the Terminal server clipboard and provide the same functionality as pressing ALT+PRINT SCREEN on a local computer.)

Internet Explorer navigation

CTRL+B (Open the Organize Favorites dialog box)
CTRL+E (Open the Search bar)
CTRL+F (Start the Find utility)
CTRL+H (Open the History bar)
CTRL+I (Open the Favorites bar)
CTRL+L (Open the Open dialog box)
CTRL+N (Start another instance of the browser with the same Web address)
CTRL+O (Open the Open dialog box, the same as CTRL+L)
CTRL+P (Open the Print dialog box)
CTRL+R (Update the current Web page)
CTRL+W (Close the current window)