Inline Style

Jul 30
2010

One of the great things about our Design Reviver Answers is that it gives the novice or amateur web designer the opportunity to ask a basic question and have it answered by one of the many seasoned pro users that we have. It truly is a great site for learning and understanding, for designers of every level.

This weeks highlighted question, from an amateur designer, is: “What is Inline Style?”

You can leave your comment below, or you can leave an even better your answer on the original question on Answers: What is Inline Style?

What is Inline Style?

What is inline style?
This question was originally asked by an unregistered user, and you will find the best answer below:

The Best Answer came from an unregistered user:

What is inline style?

The Next Answer came from a Andrew Miller:

What is inline style?

Unanswered Answers

That is now three weeks without ab unanswered questions!!!

Thanks to everyone who asked a question, but most importantly thanks to everyone that took the time and effort to offer helpful and useful answers.<

Old School Microphone Design

Jul 29
2010

In this tutorial, we are going to show you how to design an old school microphone.

Step 1:

Let’s start out by creating a new file. I used a 500×500 pixels canvas set at 72dpi, and I filled my background with white. Now create a layer set and name it ‘Microphone’. In a new layer draw a dark gray rounded rectangle with #424645 color shade and 43 x 104 px dimensions.

Step 2:

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Satin and Pattern Overlay blending options to your dark gray rounded rectangle layer.

Result:

Step 3:

Add a marquee selection around your dark gray rounded rectangle through Layer > Load Selection. Then cut the top half of the selection and fill it with #BFC3C2 color shade.

Step 4:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Shadow, Inner Glow and Gradient Overlay blending options to your cut out rounded rectangle layer.

Result:

Step 5:

In a new layer draw a rectangle with #ECEBE9 color shade 47 x 8 px dimensions./p>

Step 6:

Under Layer Style(Layer > Layer Style) add a Drop Shadow and Gradient Overlay blending options to your rectangle layer.

Result:

Step 7:

Duplicate the gray rectangle design twice and position them below the first. Then in a new layer make a black rounded rectangle with the same size as your dark gray rounded rectangle.

Step 8:

Under Layer Style(Layer > Layer Style) add a Drop Shadow, Inner Glow and Satin blending options to your black rounded rectangle layer. Then set the layer’s blending mode to Lighten.

Result:

Step 9:

In a new layer draw a small dark gray rectangle with #656565 color shade and 7 x 7 px dimensions.

Step 10:

Under Layer Style(Layer > Layer Style) add a Gradient Overlay blending option to the small dark gray rectangle layer.

Result:

Step 11:

In a new layer add a small vertical dark gray rectangle next to the small dark gray rectangle design. Then add the same layer styles from the last step. Now add the same design on the opposite end of the microphone.

Step 12:

In a new layer draw a large gray rounded rectangle with #909090 color shade and 56 x 108 px dimensions. Then go to Select > Load Selection, use default settings to add a marquee selection around the large rounded rectangle. Now go back to Select > Modify > Contract, contract by 4 px and cut out the selection. Cut the top corners of the gray rounded rectangle border and position it with the microphone design.

Step 13:

Under Layer Style(Layer > Layer Style) add an Inner Shadow and Gradient Overlay blending options to the cut out gray rounded rectangle border.

Result:

Step 14:

In a new layer draw a small gray rectangle with #909090 color shade and 17 x 9 px dimensions on the bottom of the cut out rounded rectangle border design.

Step 15:

Under Layer Style(Layer > Layer Style) add a Satin and Gradient Overlay blending options to the small gray rectangle layer.

Result:

Step 16:

In a new layer draw a small but long gray rectangle with #909090 color shade and 66 x 7 px dimensions below the small rectangle design.

Step 17:

Under Layer Style(Layer > Layer Style) add an Inner Shadow, Satin and Gradient Overlay blending options to the second small gray rectangle layer.

Result:

Step 18:

Merge the ‘Microphone’ layer set through Layer > Merge Layer Set. Then under Layer Style(Layer > Layer Style) add an Inner Shadow, blending option.

Result:

Results:

Old School Microphone Design.

Free Professional Developer Icon Sets

Jul 29
2010

Nothing gets a web designer more excited than a good high quality and (especially) FREE icon set. And that is exactly what we have for you in today’s design news round-up.

You will find five fresh sets that that are perfect for web and mobile app developers, and all are completely free.

200+ Exclusive Free Icons: “Reflection”

200+ Exclusive Free Icons: “Reflection”

You’ll find these icons great to use at small sizes, such as for website navigation, menus and more. Both vector and raster versions are included.

The set contains 208 icons and is available free of charge for personal and commercial projects, with attribution required.
200+ Exclusive Free Icons: “Reflection”

Free Mobile Berries

Free Mobile Berries

This set contains 80 icons, sized at 64×64px and are in .png format.
Free Mobile Berries

Content Management System Icon Set

Content Management System Icon Set

This CMS Icon Set is made up of 12 high quality icons sized at 48×48px, and available in .png-format. The set was designed to be used in content management systems, but can also be useful for other user interface designs. You can use the set for all of your projects for free and without any restrictions.
Content Management System Icon Set

Designer Icons – Professionally Hand-Crafted Free Icon Set

Designer Icons – Professionally Hand-Crafted Free Icon Set

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

Tron Legacy Social Icons

Tron Legacy Social Icons

This social media set has been inspired by the classic movie Tron. In total there are 20 icons, and the download package has the PNG, BMP, GIF, ICO and AI versions.
Tron Legacy Social Icons

By Paul Andrew (Speckyboyand speckyboy@twitter).

How Thinking and Developing Modular Can Increase Productivity

Jul 28
2010

When we have one few too many clients, we panic and begin to cut corners to squeeze in as many clients as we can into our schedule, and we end up working nights and weekends with buggy results. What if there is a way to save time and still manage the same amount of clients if not more?

Creating modular components is a step closer to reaching that goal, you can have 10, 20, 30, or even 40% if not more complete already with just several minutes of piece work.

How Does Developing With Modularity in Mind Work?

Developing with modularity in mind means everything that you can develop that can work on its own without the requirement of being laced with its parent to function properly. For example, let us say a client needs a content management system developed in PHP. Off the top, we already know we will need to develop a pagination system, a MySQL Class, and a template system.

An advanced pagination system can take few hours to perfect, a good well equipped MySQL class can take an hour or two, and a full-fledged template system can take several hours if not a few days to get it right. However, if these components are developed to be modular, you will only spend the time developing them once, and only several minutes integrating them into any other project, saving you hours and days of work.

To provide a real world example; a recent client I had needed a system that displays his inventory from his database. I quickly grabbed my already developed pagination class and MySQL class, restructured the provided MySQL tables, and retrieved the inventory paginated. The entire project took me thirty minutes to complete where it would have taken me several hours to complete if I had to start from scratch.

Therefore, spending the time to develop quality modular components increases your productivity and saves you time. Additionally, reinventing the “wheel” is always an action unnecessary and unneeded, thus being able to copy and paste modular components into many of your projects is a lifesaver.

How to Develop Modular Components

Developing modular components is all about the structural design, keeping it unattached to a specific project you are developing. The first step in creating a modular component is to think modular. Let us look at glue, it is a substance that mends and works on many items you need it for, however, it does not need your items to properly function as it functions alone. This is exactly how modularity works and the way these components should be developed.

In order to help grip this concept better, we will do a run down on a modular component as well as have it available for download free at the end of this article to have a go at it yourself.

The modular component we will be looking at is an advanced PHP MySQL Class, which makes connecting to a database and running queries easy. Let’s look at the constructor of this class:


    function __construct($db_host, $db_user, $db_pass, $db_name, $db_prefix)
    {
       //define 'em all!
       $this->host   = $db_host;
       $this->user   = $db_user;
       $this->pass   = $db_pass;
       $this->name   = $db_name;
       $this->prefix = $db_prefix;
    }
            

The constructor in this case gathers all the necessary information so that the methods of this class properly function.
Therefore, allowing the component to work seamlessly with your project while keeping the component separate and modular.

In order to understand how this class works, we will look at a couple of its methods starting with the connect method.


    protected function connect()
    {
       $this->db = mysql_connect($this->host, $this->user, $this->pass) or die(mysql_error()."".$this->db);
           //check if we have connected, otherwise run this function again

       if(!$this->db)
    {
       $this->connect();
                    }

         //since we're connected, let's select the db
            else
    {
       $this->db = mysql_select_db($this->name, $this->db) or die(mysql_error()."".$this->db);
           return $this->db;
                    }
                }
            

As shown above, the connect method is a protected method that creates a connection with MySQL and selects the database. The reason it is inaccessible outside of this class is that this method runs automatically by other methods within the class; hence, you do not need to call it. Another method we will look at is the select method, which builds a select query based on the information you provide via its parameters:


    public function select($table, $fields="*", $conditions=0, $options=array())
    {
           //check if we have a db connection
      if(!$this->db)
    {
      $this->connect();
                    }

    $query = "SELECT ".$fields." FROM ".$this->db_prefix.$table."";
       if($conditions !=0)
     {
    $query .= " WHERE ".$conditions;
                    }    

       if(isset($options['order_by']))
     {

     $query .= " ORDER BY ".$options['order_by']."";
       if(isset($options['order_dir']))

      {
     $query .= " ".strtoupper($options['order_dir']);
                        }
                    }
        if(isset($options['limit_start']) && isset($options['limit']))
      {
     $query .= " LIMIT".$options['limit_start'].",".$options['limit'];
                    }

        elseif(isset($options['limit']))
      {
     $query .= " LIMIT ".$options['limit'];
                    }

        if(!$this->db)
      {
     $this->connect();
                    }

       return $this->query($query);
                }

While it may seem to be easier to build the query yourself, this method retains the integrity of your system and keeps your projects tidy, and as a bonus, it makes creating queries for your client a lot easier when they modify their script. Additionally, integrating security measures within these methods means that those security measures will be applied to all the queries you run, good for filling in the gaps that you may have missed.

Download the MySQL Class

This MySQL Class is for demonstration and learning purposes only. Click to Download.

44 Stunning HD Wallpapers Pack

Jul 28
2010


hd wallpapers

Another great pack of HD wallpapers, compiled in a single zip file you will find 44 high resolution HD wallpapers 1920 x 1200.

You can check the wallpapers category for more free wallpapers.

Remember to follow @Garcya on twitter or subscribe to the feed for free if you haven’t done that yet.

You can also visit us on Facebook for extra insights.

Also, I am not going to force you, but if you want to hit that Digg badge, Re-Tweet or share where you want, I’ll love you forever and ever!

free wallpaper

42 140x140 vector 44 Stunning HD Wallpapers Pack 38 140x140 vector 44 Stunning HD Wallpapers Pack 19 140x140 vector 44 Stunning HD Wallpapers Pack 17 140x140 vector 44 Stunning HD Wallpapers Pack 111 140x140 vector 44 Stunning HD Wallpapers Pack 37 140x140 vector 44 Stunning HD Wallpapers Pack 22 140x140 vector 44 Stunning HD Wallpapers Pack 32 140x140 vector 44 Stunning HD Wallpapers Pack 02 140x140 vector 44 Stunning HD Wallpapers Pack 40 140x140 vector 44 Stunning HD Wallpapers Pack 25 140x140 vector 44 Stunning HD Wallpapers Pack 43 140x140 vector 44 Stunning HD Wallpapers Pack 09 140x140 vector 44 Stunning HD Wallpapers Pack BlueWater 151 140x140 vector 44 Stunning HD Wallpapers Pack 41 140x140 vector 44 Stunning HD Wallpapers Pack free wallpaper 04 140x140 vector 44 Stunning HD Wallpapers Pack 20 140x140 vector 44 Stunning HD Wallpapers Pack 30 140x140 vector 44 Stunning HD Wallpapers Pack 291 140x140 vector 44 Stunning HD Wallpapers Pack 131 140x140 vector 44 Stunning HD Wallpapers Pack 23 140x140 vector 44 Stunning HD Wallpapers Pack 21 140x140 vector 44 Stunning HD Wallpapers Pack 01 140x140 vector 44 Stunning HD Wallpapers Pack 35 140x140 vector 44 Stunning HD Wallpapers Pack 36 140x140 vector 44 Stunning HD Wallpapers Pack 06 140x140 vector 44 Stunning HD Wallpapers Pack 121 140x140 vector 44 Stunning HD Wallpapers Pack 03 140x140 vector 44 Stunning HD Wallpapers Pack 34 140x140 vector 44 Stunning HD Wallpapers Pack 16 140x140 vector 44 Stunning HD Wallpapers Pack 31 140x140 vector 44 Stunning HD Wallpapers Pack 18 140x140 vector 44 Stunning HD Wallpapers Pack 24 140x140 vector 44 Stunning HD Wallpapers Pack hd wallpapers 08 140x140 vector 44 Stunning HD Wallpapers Pack 33 140x140 vector 44 Stunning HD Wallpapers Pack 281 140x140 vector 44 Stunning HD Wallpapers Pack 39 140x140 vector 44 Stunning HD Wallpapers Pack 07 140x140 vector 44 Stunning HD Wallpapers Pack 05 140x140 vector 44 Stunning HD Wallpapers Pack 26 140x140 vector 44 Stunning HD Wallpapers Pack 27 140x140 vector 44 Stunning HD Wallpapers Pack 44 140x140 vector 44 Stunning HD Wallpapers Pack 101 140x140 vector 44 Stunning HD Wallpapers Pack

(...)
Read the rest of 44 Stunning HD Wallpapers Pack ( you won't regret it :-) )


Do you like what you see? Any help is welcome! It keeps me working and provide YOU with Free Vector Graphics. Thank you!



© Garcya for Web Design Blog, 2010. | Permalink | 5 comments
Post tags: ,

Illustrate the Apple iPad in 40 Minutes

Jul 28
2010


apple ipad

If you are a beginner in the design industry and want to practice and practice this is a great detailed tutorial to start with.

You are about to design the famous Apple iPad (I wish I had one :p ) and you’re going to do this with Adobe Illustrator.

Vector.Tutsplus.com is going to show you how to do it in about 40 minutes and not that much hassle.

Follow the tutorial right here!

Related posts:

  1. Comments not showing
  2. The most complete collection of apple vectors
  3. 22 Sites for Free Graphics Design Tutorials


Do you like what you see? Any help is welcome! It keeps me working and provide YOU with Free Vector Graphics. Thank you!



© Garcya for Web Design Blog, 2010. | Permalink | 2 comments
Post tags: ,
Digg del.icio.us Stumbleupon Technorati Reddit

Awesome Resource: User Interface Design Framework

Jul 27
2010

Today’s news focuses on only one single design resource… and what a FREE resource it is! It is The User Interface Design Framework from webalys.com, which is basically a huge design framework that consists of a complete GUI library, a set of of 260 minimal vector icons and a massive Illustrator style library. This is a must have resource for any professional designer.

License: The framework has been released as a complete web designer kit for free, even for commercial use.

You can download the UI Design Interface here: User Interface Design Framework
You can view the details of the framework below:

GUI Library

User Interface Design Framework

The GUI elements are based on common interface patterns (accordion, expandable panel, progress bar, tags, slide show…), that integrate usability good practices and are perfect for wireframes and interface design.

Vector Icons Library – 260 Minimal Icons for Free

User Interface Design Framework

This pixel precise icon collection have been created specifically for interface and web designers. They are based on a precise 16 pixels grid, which means that they stay clear and have a crisp look even at small sizes.

Graphic Styles Library

User Interface Design Framework

The Graphic Styles Library consists of 200 graphic styles for buttons, navigation menus or panels and 330 swatches harmonized with graphic styles for backgrounds, typography and other GUI interface elements.

You can download the UI Design Interface here: User Interface Design Framework

By Paul Andrew (Speckyboyand speckyboy@twitter).

Free PNG Icons Collection

Jul 27
2010


monster icons vector Free PNG Icons Collection

The guys at Cruzine.com compiled a great selection of free icons for designers, perfect for every design job.

You will find 15+ websites there that offer free icons for download.

You can also check WDB’s list of free vector and png icons available!

051 icons vector Free PNG Icons Collection

You can see the full list over here.

Related posts:

  1. Free Icons – AIRE
  2. HUGE Collection of Vector and PNG Icons
  3. Top Design Blogs That Offer Free Icons


Do you like what you see? Any help is welcome! It keeps me working and provide YOU with Free Vector Graphics. Thank you!



© Garcya for Web Design Blog, 2010. | Permalink | 5 comments
Post tags: , ,
Digg del.icio.us Stumbleupon Technorati Reddit

Best Practices for Preventing Design and Code Theft

Jul 26
2010

Design and code theft is an ongoing dilemma that we face as designers and or developers; it is something that is expected to happen eventually, as the internet is a worldwide accessed medium by many different types of people.

In fact, the most used medium for theft and fraud is the internet itself as it is the easiest way for such unwanted activates to occur at such a massive level. With that all said, we dive right into six tips to help prevent design and code theft that may otherwise be easier to occur.

Site Specific Illustrations or Graphics

One of the most common design thefts that occur is the theft of illustrations, graphics, or other artwork. Design thieves are not good at creating their own graphics or illustrations; hence, they search the net to find the best to steal. A great way to help reduce this type of theft is to make your illustrations, graphics, and or artwork specific to the website.

For example, let us say you are creating a mascot illustration for a new website design that you have made for a business card production firm. Try to incorporate what the firm offers into the mascot illustration such as a rather muscular man holding a of stack business cards with the firm’s name on the man’s clothing as well as on the cards.

Now, due to the mascot being far too specific to the firm, the thieves will be less inclined to steal it, as it will be rather difficult for them to modify the illustration to apply their own name on it. However, if the mascot did not contain any firm specific notions on it, thieves can easily take it and apply to their own use for their own gain without struggle.

Difficult Gradients and Patterns

Another great way to reduce the amount of theft of your designs or illustrations is to add some gradients and patterns specific to each object. For example, let us say you created an illustration of a battery meter measuring how much battery life is remaining for a mobile device.

Incorporating a pattern from your website design onto this battery illustration makes it absolutely difficult to be undone with modification as a pattern can be very difficult to remove from any object. Therefore, if thieves are still going to attempt to steal and hinder your work for their own gain, at least you have made it quite difficult for them, which cause many of them to fail.

Screenshot and Image Theft

Many of our designs will contain screenshots of the product the site was created for, or if the website is geared towards wildlife, you definitely do not want your images to be used elsewhere without your consent or permission. With that said, using a basic prevention method, you can at least receive credit for your images or screenshots that have been stolen.

Watermarks are a great solution to this method. Sure, they may be a bit of a nuisance, but your images would be protected. I am not talking about watermarks that hide in a corner, but more so, a light watermark spread over the entire image, one that is not obtrusive to the image, but rather visible if one is to focus on the image.

Your watermark can be as simple as being your logo or even plain text mentioning your website. With a watermark like that, thieves become less inclined to taking the image as it can be easily pointed out as an act of theft, however, if they do end up taking your images, at least they will be spreading the word for you about your website via the watermark, and chances are, you will soon enough know about the theft to be able to take care of it.

Legal Notices and Trademarks

Leaving legal notices on your website about content theft can sometimes deter theft; however, if your illustrations or other works are very valuable to you, getting your items trademarked is the way to go. By trademarking your mascot or logo, you are reserving the rights to your creations and can be defended to the fullest extent of law.

When design thieves know your illustrations or other objects are trademarked, they will less inclined to utilize the trademarked items to prevent any legal issues in the future.

PHP Code Theft Prevention Methods

There are a couple of methods that can be utilized to help prevent PHP code theft when distributing or providing your scripts to specific groups or the general public.

Encrypting or Encoding

One of the most popular methods to prevent code theft is utilizing PHP code encryption systems. These encryption systems are external libraries that must be installed on any server the script will be utilized on in order to properly function. What they do is obstruct the code into a string of random characters that cannot be understandable unless decoded.

Due to the encrypter and decrypter being external libraries to PHP, your code is rather secure when encrypted or encoded. However, as mentioned earlier, the only drawback to using such a tool is the requirement of having the encrypter or encoder library on each server the script will be used, but if encrypting your encoding your code is a definite must, the benefits are worthwhile.

Obfuscation

Obfuscation is the process to obscure your code to make it difficult to read through. This is a simple method used to make novice code thieves think twice about stealing your code, however, it is readable and can be easily hindered with. Using obfuscation is a good method to transfer code from one user to another over a network to prevent your code from easily being read during a transfer, however, it should not be a permanent solution to code theft.

To obstruct your code easily, there are many tools that will do it for you when you complete a project. This not only saves you time obstructing the code yourself, but it also provides the flexibility to work with understandable code as you are developing or modifying your script.

Household Electronics Appliances Vector icons

Jul 25
2010


Household Appliances Vector icons

Every electronic househol appliances can be found in this pack of free vector icons. You will get vector files of scanners, kitchen robots, fax machines, A4 papers, landline phones, mobile phones, sim cards, coffee makers and many more!

See the previews below and then download all of them for your personal use.

Remember that commercial use can be bought here.

You can follow @Garcya on twitter or subscribe to the feed for free if you haven’t done that yet.

You can also visit us on Facebook for extra insights.

Also, I am not going to force you, but if you want to hit that Digg badge, Re-Tweet or share where you want, I’ll love you forever and ever!

Household appliances icons (1)

Household appliances icons (2)

Household appliances icons (3)

Household appliances icons (4)

Household appliances icons (5)

(...)
Read the rest of Household Electronics Appliances Vector icons ( you won't regret it :-) )


Do you like what you see? Any help is welcome! It keeps me working and provide YOU with Free Vector Graphics. Thank you!



© Garcya for Web Design Blog, 2010. | Permalink | 4 comments
Post tags: , , , , , , , , ,
Digg del.icio.us Stumbleupon Technorati Reddit