skyje

10 Amazing Product Advertising Design Tutorials

ayman — Tue, 10 Nov 2009 00:06:39 +0000

Product Advertising is a form of communication used to influence individuals to purchase products. Frequently it communicates a message that includes the name of the product and how that product could potentially benefit the consumer. Advertising often attempts to persuade potential customers to purchase or to consume a particular brand of product . Modern advertising is using Design to reach more customers on the internet. This Ten Tutorials will show you how to create Amazing Product Advertising Design.

1-Comic Book Photo Effect

This Photoshop tutorial will show you how to add a comic book effect to an ordinary photo using a few layers, the Cutout and Poster Edges filters and a few different layer blend modes.

2-Photoshop Tutorial: Radio Station Advertisement Design

Using Adobe Illustrator and Photoshop (versions CS3) to create/design a beautiful radio station advertisement.

3-Design an Awesome Product Ad

A few techniques that may improve your design abilities when creating advertisements. One of the best ways to hone your skills is to practice making Ads for products that you’ve never seen advertised before (or simply don’t exist at all). More than likely wont be swayed into copying their style.

4-Sleek Phone Advertisement Flyer

This tutorial will show you how to make a very interesting and sleek Phone Advertising wallpaper.

5-Create An Energy Drink Ad Design

A flexible design solution that you can use to create one for an energy drink. It relies on a combination of the Difference Blending Mode and the Radial Blur Filter to achieve unique colors, contrast, and lighting.

6-Professional Advertisement Poster

This new tutorial shows you how to make a professional advertisement poster, based on color contrast.

7-Designing A Portable Gaming Device Poster

making an interesting, creative advertisement poster.Great for advertising your newest product, or just getting some design practice.

8-Design A Professional Laptop Advert

This tutorial will teach you how to manually create your own vanishing points, and how to use these techniques to create an awesome ’screen explosion’ effect – something that is sure to dazzle your viewers!

9-WWII Airplane

This tutorial use the noise and blur filters to create a brushed metal effect, then a few layer styles to create a cool little airplane graphic.

10-Designing a 3D Software Box

This tutorial will show you how to create a 3D software box using Photoshop. It’s rather simple but the results can be quite realistic, providing a creative way of going about and creating box designs for your own personal use.

Jquery and Web Design Tutorials

ayman — Fri, 06 Nov 2009 00:38:42 +0000

JQuery is a JavaScript library that helps web developers and designers create JavaScript applications that work well in any browser. Many websites are using jQuery including: Amazon, Google, Twitter, Digg, and Tecnorati.

Web designers now using Jquery on their projects to enhance application look and feel and to increase interactivity.

I selected most amazing tutorials that mix Design and Jquery together. enjoy it!

How easy to create a slide tabbed box using jQuery

new jQuery plugin tabSwitch which automate all the step to make a slide tabbed box and many other style of tabs.

jQuery Tutorials for Designers

This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery.

Animated Menus Using jQuery

create an animated menu (very similar to Dragon Interactive’s menu).

Submit A Form Without Page Refresh using jQuery

submit a contact form that sends an email, without page refresh using jQuery! (The actual email is sent with a php script that processes in the background).

How To Create A ‘Mootools Homepage’ Inspired Navigation Effect Using jQuery

simple interactivity jQuery adds to navigation

Build An Incredible Login Form With jQuery

create a sliding panel, that slides in to reveal more content, using JQuery to animate the height of the panel. In this case, we will be creating a hypothetical login for the new tutsplus area that’s coming soon.

Learning jQuery: Fading Menu – Replacing Content

instead of thinking about CSS as page layout and a way to style your page when it loads, you can use in animation and change it on-the-fly to react to events that happen on your page. Take for example a menu. You can take the “click” event that happens when clicking on a menu to do lots of stuff.

Animated Drop Down Menu with jQuery

Drop down menus are a really convient way to fit a large menu into a really small initial space. For a long time people have just used a form element for standard drop downs, but with minimal effort you can create a much slicker effect using jQuery and CSS.

jQuery Tabbed Interface / Tabbed Structure Menu Tutorial

Tabbed Interface or Tabbed Structure Menu is getting really famous in web design & development. This tutorial will show you how to build your own tabbed Interface using jQuery with slideDown/slideUp effect.

Sliding Jquery Menu

in this tutorial il show you how to create a sliding menu button using jquery. You can see the effect in action over on the PSDtuts webpage in the top right hand corner.

How to Make a Smooth Animated Menu with jQuery

building a menu and animate it with some smooth effects.

Create a Slick Tabbed Content Area using CSS & jQuery

build a simple little tabbed information box in HTML, then make it function using some simple Javascript

Create Vimeo-like top navigation

The base for this tutorial is simple CSS drop down menu based on unordered list

Web Design Complete Guide Tutorials

ayman — Tue, 03 Nov 2009 12:41:35 +0000

Web design is a kind of graphic design intended for development and styling of objects of the Internet’s information environment to provide them with high-end consumer features and aesthetic qualities.

Purposing web design is a complex, but essential ongoing activity. Before creating and uploading a website, it is important to take the time to plan exactly what is needed in the website. Thoroughly considering the audience or target market, as well as defining the purpose and deciding what content will be developed, are extremely important.

This post provides hand-picked web design complete guide tutorials which can enrich your design skills and improve the quality of your Design. We’ve collected most interesting and useful web design tutorials using Fireworks,Photoshop,Flash and CSS.

web design using Photoshop

web layout design using Photoshop

How to Create a “Worn Paper” Web Layout Using Photoshop

In this tutorial, you’ll learn how to create a textured “worn paper” web design theme using some basic Photoshop techniques. The design incorporates some free stock images to let you create a beautiful layout in a jiffy.

Design a clear website layout in Photoshop

In this tutorial we`re gonna create a PSD layout which can be used for a portfolio site and as well for a business one.

We`ll use a set of nice icons which it will give color to the layout.

Watercolored Design Studio Blog Layout

In this tutorial you will learn how to make a clean and simple watercolor design studio layout for a blog. If you have any questions about this tutorial be sure to ask in the comments. Also, remember with all the tutorials, the psd is available for download.

Create a webdesign company layout in Photoshop

create a modern looking Photoshop design for your web design company.

Logo design using Photoshop

Modern Green Logo

Use basic tools and methods to create your own logo from scratch.

How to Design the Firefox Logo in Photoshop

This tutorial will go through how you can create the Firefox logo in a scalable Photoshop format.

web design using fireworks

Build a Promotional iPhone App Website Wireframe in Fireworks

Fireworks is a great tool for creating a wireframe and while it doesn’t work perfect with Photoshop, you can export over there and then build off your wireframe. We’ll cover the design process of creating a wireframe for an iPhone application website in Fireworks. For those of you not familiar with this program, it will be a good jumping off point for using it to wireframe your web design projects. This is a first part of a multi-part series and will be fun!

Creating a cool website header in fireworks

create a web site header in Fireworks using elements from graphic design and applying to the web.

web design using Illustrator

web layout design using Illustrator

Use Adobe Illustrator to Create a Clean Website Layout

This tutorial is perfect for the beginning to intermediate Adobe Illustrator artist. We’ll cover how to layout a website and prepare it for use on the web. Also, we’ll use the recently released Website Elements Freebie to mock up the design as well.

Building a Website Wireframe in Illustrator

Wireframing is a great tool to have in your web design arsenal. Learn to use Illustrator effectively to create web design wireframes.

This tutorial reviews some techniques for setting up your document for the web, quickly building rounded boxes for layouts, creating a repository of usable web elements, using callouts, and more.

Logos design using Illustrator

Logo Design Process and Walkthrough for Vivid Ways

Creating a crazy cool logo

This logo is pretty much a bunch of circles

Icons design using Illustrator

Beginner Illustrator Tutorial – Create a Vector RSS Icon

This Adobe Illustrator tutorial covers the simple steps involved in creating a vector RSS icon and includes a range of handy techniques that can be put into practice in future creations.

Flash Web Design Tutorials

Build a Fluid Website Layout

A fluid web layout uses 100% width (and height) of the browser, floating all the contained elements into certain positions. This is opposed to fix-width layout where contents remain fixed no matter what the browser size is.

Simple flash header

This lesson will show you how to make simple flash header using some special flash tricks. You can apply this simple and on the same time very useful flash header on any web sites.

Flash Tabs Menu

In this tutorial it will be shown step by step how can be developed an awesome flash menu with tabs. We will use MovieClips, masks, invisible buttons and some ActionScript.

Interactive flash content box

Using this detailed tutorial, you will learn how to create interactivity flash content box using the action script. You can use this content box for any web site.

Glass Aero Flash Menu with Fade Effect

In this tutorial we will learn how to make vista aero flash menu with awesome fade effect in Flash CS3.

Navigation & Menu Design Tutorials

Green Navigation

In this tutorial, I’m going to be teaching you how to make a stylish looking green navigation with a shine effect.

Stylish Dark Navigation Menu

In this tutorial, I’ll be teaching you some tricks with the rounded rectangle tool and how to use the rectangular marquee tool to make a stylish navigation box for a web design.

Curled Corner

Learn how to create a sleek content box that features a curled corner to give it a more dimensional approach. This effect could be put to good use on business websites, such as hosting sites, product sales pages, portfolios, and more.

Design Watercolor Effect Menu

This is a two-part tutorial on how to create an artistic and un-typical CSS list menu as seen on Web Designer Wall.

How To Create a Stunning Vista Inspired Menu

This tutorial will show you how to make a semi-transparent Vista-inspired menu using gradients, shadows, and blurring to produce a stunning modern effect.

Header & Banners Design Tutorials

Modern Web 2.0 Header

In this tutorial, I’m going to be teaching you how to make the web header I used for this site. It’s fairly straight forward, so if you’re just starting web design, this will be a good tutorial to read.

Animated Ad Banner

In this tutorial, i’ll show you how to create a professional animated ad banner which you can follow and create your own banner to advertise your site.

Photoshop/Illustrator Tutorial: Designing a Vexel Banner

In this tutorial I will teach you some of the techniques I use when designing my banners. It requires a basic knowledge of Illustrator and Photoshop, but if you don’t understand anything please feel free to ask me.

Animated Banner Tutorial

Using Photoshop and Imageready, you can easily design animated banners for advertising campaigns.

Here is what the final result will look like:

Design An Advertising Banner For Your Website Using Photoshop

In this tutorial I’ll teach you how to make a nice, sleek and professional advertisement banner. It’s really quite easy, but you will need previous Photoshop knowledge to successfully complete this tutorial.

Footer Design Tutorials

How to Create a Simple & Sleek Web 2.0 Site Footer

how to produce a sleek looking site footer in Photoshop.

Photoshop Tutorial: Designing a Creative Blog Footer

In this Photoshop tutorial I would like to walk you through the designing of a creative, paper-crumpled Blog/website footer area like the one shown here:

intermediate homepage footer design

CSS Tutorials

Fancy Form Design Using CSS

Forms represent the one area of your web site where you absolutely must commit time and energy to ensure user accessibility.

Horizontal Subnav with CSS

how to create a simple navigation with a horizontal subnav.

How create good looking form without table

This tutorial explains how to design a good form using a clean CSS design with only label and input tags to simulate an HTML table structure. You can use all CSS/HTML elements to design your custom form for your web projects:

wordpress Typography plugins

ayman — Mon, 02 Nov 2009 02:28:42 +0000

Typography : is the art and technique of arranging type, type design, and modifying type glyphs.Display typography is a potent element in graphic design,Designers often use typography to set a theme and mood in an advertisement; for example using bold, large text to convey a particular message to the reader.It is much better to use Plugins for Typography to enhance your blog (look and feel) and this plugins do the job for you.

wp-Typography

Improve your web typography with: hyphenation, space control, intelligent character replacement, and CSS hooks.

AnyFont

AnyFont allows you to use any truetype or opentype font to replace plain text anywhere you want in your theme design.

Post Typographer

Adds non-breaking spaces, common spaces and dashes where needed. Works with English texts only.

Font Burner Control Panel

The Font Burner Plugin allows you to easily add Font Burner Fonts to your Wordpress theme.

Kavychker

It’s normal typography plugin for WordPress.

Small caps

Encloses capitalized words within `abbr` tags, so that abbr tags could be styled to display small caps—for typographical effect.

Drop Caps

The Drop Caps plugin adds drop caps to your posts, pages and comments. It comes with some cool css styling and lots of options.

Bunny’s Print CSS

Inserts a link for a print stylesheet into your theme header. Provides a very simple print.css file that you probably want to improve.

Typograf

This plugin allows Russian speaking blogers to use Art. Lebedev Studios “Typograf” to make their typography professional.

Shadowbox JS

Shadowbox is an online media vieiwing application similar to Lightbox and Thickbox but with more functionality. Supports all types of media.

Theme options

This plugin manages theme customization. Everything is managed in the WordPress Backend. Code snippets can be activated, copied, created, deactivated, deleted, edited, and uploaded.

Smooth Slider

Smooth Slider adds a smooth content and image slideshow with customizable background and slide intervals to any location of your blog.

Gallery Shortcode Style to Head

Moves the gallery shortcode styles to the head so it doesn’t break XHTML validation.

Developer Formatter

Developer Formatter system to WordPress. Powered by GeSHi server-side highlight system.

Text Control

Take complete control of text formatting options on your blog: Formatting and encoding per post, globally on posts, and globally on comments.

WP-SynHighlight

Plugin provides syntax highlighting for about 116 programming languages via Geshi.

Code Snippet

Code Snippet is WordPress plugin for displaying code with highlighting in blog posts using the GeSHi engine.

WP-Syntax

WP-Syntax provides clean syntax highlighting for embedding source code within pages or posts.

13 Amazing CSS Tutorials For Navigation and Menu

ayman — Sat, 31 Oct 2009 11:36:00 +0000

CSS help Designers save a lot of work and time. Cascading Style Sheets are used to create the layout and design of your web site.In this CSS tutorials you will learn how to use CSS to make amazing menus and navigation.

1-Active State in CSS Navigations

2-Image Sprite Navigation With CSS

3-Advanced CSS Menu Trick

4-Nifty Navigation Tricks Using CSS

5-Rounded corner CSS navigation bar with jQuery

6-CSS+Javascript power. Fancy menu

7-Create Pure CSS Nav Bar in Seconds for Free!

8-Digg-like navigation bar using CSS

9-Simple css 1 level Vertical navigation menu

10-A Vertical Multi-Level Drop Down Menu

11-A Simple Drop-Down Menu Using Jquery

12-Creating a fading menu using CSS and jQuery

13-How to Design a Nice Vertical Menu with CSS

Wordpress Social Plugins

ayman — Sat, 31 Oct 2009 04:58:26 +0000

Social Media has changed the face of blogging in some interesting ways so blog owners search for many ways to become more social on web one of this ways is plugins.This plugins will add social bookmarking buttons to your content, making it easy for your visitors to submit your articles and build traffic to your website.

Add to Any: Share/Bookmark/Email Button

Help readers share, bookmark, and email your posts and pages using any service, such as Facebook, Twitter, Digg, Delicious and over 100 more.

Sociable

Automatically add links on your posts, pages and RSS feed to your favorite social bookmarking sites.

Tweet This

Adds a “Tweet This Post” link to every post and page. Shortens URLs. Can automatically tweet new and scheduled blog posts. Highly customizable.

WordPress iPhone 2

ayman — Fri, 30 Oct 2009 01:13:45 +0000

WordPress for iPhone 2 is a new app, and the previous version won’t automatically update to 2.0. Installing it won’t overwrite any previous version you have installed. When you launch the new app, you’ll immediately see “Version 2.0? at the bottom of the screen. When you’re no longer using it, you can safely remove the previous version from your device.

WordPress 2.0 for iPhone features

A new, more efficient user interface that makes it faster to switch between comments, posts, and pages.
Various user interface refinements and bug fixes
New Comments interface, with Gravatars and the author URL shown in the comment list
Passwords are now stored in the keychain
Posts are now automatically saved and restored if network connection is lost during publishing
Added persistence, so the app re-opens in the blog you last used
Added an interface for manually entering the XMLRPC endpoint for non-standard setups
Fixed rotation-related visual glitches
Fixed errors where malformed XML prevented access to XMLRPC endpoint
Fixed edge case where local drafts were sometimes not saved
Fixed the order of photos so that they’re displayed in the order they’re uploaded

WordPress for iPhone, just like WordPress itself, is an Open Source app.

Download WordPress 2.0 for iPhone and iPod Touch for free

Really Nice Twitter T-shirts

ayman — Tue, 27 Oct 2009 19:22:10 +0000

T-shirt shopping is easier nowadays because of the large audience Twitter has. Choose your favorite Twitter T-shirt from all available designs. You can already get your favorite tweets as T-shirts.

Drop Tweets Not Bombs

Twitter Fail Whale

Will Tweet For Food From Branch

White T-Shirt

Green Tweet – 140 character revolution – Ringer T

Pseudo Stalker version 2 T-Shirt

Reduce Reuse Retweet

FailWhale White Tee Tshirts

You Don’t Know Me Anonymous Twitter Shirt

Twitter T-Shirt

RETWEET ME TEE SHIRT

Organic Men’s Fitted T-Shirt

Custom Twitter tee

WordPress Comment Plugins AJAX Powered

ayman — Mon, 26 Oct 2009 23:02:37 +0000

Blog comments is one of the important parts of any blog . In this article, I will mention only AJAX Powered WordPress Comment Plugins. And this plugins will help you increase the participation rate in the comments section on your blog.

1-Ajax Comment Preview

Other preview plugins don’t know what sort of changes WordPress will make to a visitor’s comment, but this plugin uses AJAX and other buzzwords to send each previewed comment through WordPress’ inner voodoo.

2-AJAX Comment Pager

AJAX paging plugin for comment pages in WordPress 2.7 or higher versions.

3-WDP AJAX Comments

This plugin will integrate AJAX commenting feature into your WordPress Blog. It uses the powerful JavaScript Framework jQuery to handle AJAX requests and jQuery Validation plugin by bassitance.de to validate comment form on the client side.

4-WP Ajax Edit Comments

The most powerful comment editing solution for WordPress. Users can edit their own comments for a limited time, while admins can edit all comments.

5-Wordpress Thread Comment

This Plugin is an enhancement for Wordpress’s comment function. It enables users to reply on a exist comment, and the discussion will be displayed threaded or nested.

6-Ozh’ Absolute Comments

Absolute Comments is a comment manager plugin that lets you instantly reply to comments, either from the original Manage Comments administration page, or from the email notification, without the hassle of visiting the post first.

7-AJAXed Wordpress

AJAXed Wordpress (aWP) is an extremely powerful plugin that harnesses the power of AJAX and Wordpress to improve the user experience, the administration capabilities and the design potential of any Wordpress based blog.

8-jQuery Reply to Comment

Add “reply” and “quote” features on each comment list. If you have jQuery installed on you blog, this Plugin add two link in each comments list (on single page).

9-Greg’s Comment Length Limiter

This plugin provides a configurable limit on the length of comments left in the comment form, with a character countdown displayed for the user and dynamically updated with each keypress.

10-GC-comments

GC-Comments retrieves a list of commented on posts, ordered by last commented on article first.

Free Social Icons From IconShock

ayman — Sun, 25 Oct 2009 18:00:47 +0000

IconShock has designed a set of Free Social Icons.We hope these collections will help people out there who are trying to find free social icons for there sites and blogs. The icons are free for personal or commercial use.

Files included in this icon set:

Fileformats:
PNG (Transparent Background, 24 Bits color, 8 bits shadow)
ICO (Windows Icons)
ICNS (Mac icons)

Sizes: 256×256, 128×128, 48×48, 32×32, 24×24, 16×16

preview and download