Vote on webdesignerstutorials.com on what you would like to see on the site, dont be shy, we can make it happen

Read This>>>

Help Shape The Content At webdesignerstutorials.com I have got some good content coming up for you guys but I want to make sure that I am meeting the needs of the developers and designers out there, So anything you can think of that you would like to see, download, learn from a tutorial, source code, applications and that kind of stuff, let me know! If there is some good response, we will develop and run the content in no time thanking you in the article. You can use the comment section down low to tell us what you would like to see on webdesignerstutorials.com !

The enctype attribute specifies which content-type to use when the form is submitted. “multipart/form-data” is used when a form requires binary data, like the contents of the file to be uploaded.

The type=”file” specifies that the input should be processed as a file. This is a very simple way of uploading files. For security reasons, you should add restrictions on what the user is allowed to upload and who can use the upload form.

In this tutorial I will show you how to design your own shiny stickers and badges, use it for web, print or icons.

Download The Source File for this Tutorial

Step 1

Open up Photoshop, click on File > New. Set the width of your document to 500px and the height to 500px with a resolution of 72. Create a new layer and call it Sticker Background. Creat a new layer under your background layer and call it BG. The BG layer you can give a background color of #383838.

Step 2

In your Tool Panel, click on the dropdown and select the Custom Shape Tool. In your Properties Panel at the top, click on the drop down list. If you only see a few shapes, click on the right hand side dropdown arrow, scroll down and select all. This should bring up all the shapes.

Step 3

Select a medium grey color, something like this, #a9a9a9. Dont worry about the colors to much for now, we will get there.

Double click on the Seal round sticker shape, it should now be selected. Hold down the shift key to make a perfect circle and start drawing a circle any where on the canvas. It should be rather large like this

Step 4

Now comes the gradient part. Here, we are going to select 2 shades of grey for the background sticker. Set your top color to #ededed and your bottom color to #ffffff. GO back to your sticker background layer, right-click on th icon and click on Select Pixel. Now your Seal should be selected and ready to be “gradiented”.

Step 5

With your Gradient tool selected, drag your gradient from the center of the seal to a 45 degree angel to the left like this:

Control-D to deselect your seal selection.

Step 6

Create a new layer at the top of your sticker background and call it Sticker Top.
On this step we follow the exact steps as Step 3, this time we are just going to make a smaller seal on top of the sticker background with a background color of #1b1b1b. If you did that you should have something looking like this:

Step 7

Now we start with the shiny gradients, some of you new to Photoshop might not know this next step but it’s a nice tool to have.
Right-Click on the sticker top layer and select blending options. In the Styles list on the left hand side, click on Gradient Overlay. On your left hand side you will see the properties change, here is where we want to change the gradient of the top sticker.

Step 8

Click on the gradient box surounded by the red circle, your Gradient Editor should now pop up.

Step 9

At the bottom you will see 2 small color boxes, if you double click on them your select color stop box appears. In you color value box, type in the following value #000000. Close the box and click on the next small box, here we want a lighter black, almost like a charcoal matt black, for this we will use #7a7a7a. As you select the colors you can see your shape color change, you are welcome to change the color to anything you want. *Remeber, we are using the Linear Gradient for this one.*

By now, you should have something looking like this:

Step 10

Now that we have our basic shapes, we can start giving it a gloss look. Select your pen tool and draw a curve over your top sticker like this:

Create a new layer and call it Gloss. Hit your Control and enter key to make you pen tool into a selection. Staying on the Gloss Photoshop layer, select a white color and hit the alt and backspace keys and the, control D to deselect your selection. You should now have somthing messy like this:

Right-click on your Sticker Top layer and click on Select Pixels. Your shape should now be surrounded by the pixel border.

Step 11

In your menu bar at the top go to Select > Inverse. Make sure you are still on your Gloss layer for this one. This will inverse your current selection around your shape. Now, hit the delete key and watch the rest of you pen shape tool color disapear.

Step 12

Take the Opacity down to 8% to give it more of a glossy look.

Step 13

Once again we use the pen tool for some cutting out, this time we want to add a bend to the stick. Select your three top layers and merge them, you should now have 2 layers, your sticker and background. Use the Pen Toll too select the 3rd left top half of your sticker:

Hit Control Enter to turn your shape into a selection. Now, create a new layer and call it Fold. On the sticker layer we use Control X to cut the pice out, that piece we paste back onto the new fold layer. Using our move to we flip the selection around and make sure its inline where we cut it out:

Step 14

Here we are going to add the back part of the sticker with some gradients. Right click on the fold layer and click on Select Pixels. Create a new layer called top shiner. In your Tools panel, choose a white and a very light grey, you can use this one if you like #e9e9e9. Select your gradient tool and in the selected area draw your gradient from top to bottom:

Download The Source File for this Tutorial

Done!

Here is the part where you can decorate the stickers with whatever you feel like, maybe a price tag button for your site or a social network icon sticker.

Hope you enjoyed the tutorial, please feel free to comment.

Step 1

Add this code to your CSS:

Step 2

Add this code to your HTML:

Download The Source Code

Kobus Swartz

Change the design and edit how you what suits you. The download includes the HTML, CSS and PHP files. The site has a full web 2.0 product table styled to display hosting, domains and any products you might want to sell. The temlpate also includes a PHP contact form that’s ready to go. Basically, all you have to do is insert your content and upload your site.

Home Page Preview

The home page consists of a free coloumn layout followed by a 1 coloum layout underneath.

Product List Table

The product list table consists of all the hosting package details, you can ofcourse edit this as you like.

PHP Contact Form

The PHP contact form is a basic PHP contact form that is already installed and fully working, all you have to to is edit the mailto settings and it works.

If you end up editing or using this theme, please send me a link, I would like to see hou you implement it.

PremiumHostingTheme.zip (712kb)

Step 1

Create a basic HTML form but add the ‘action’ and ‘method’ to the form tag:

The ‘action’ syntax tells the form which page to load with the necessary php code to display your variables which are retrieved
from the form, in this case we will name it showvariables.php.
The ‘method’ syntax states that the ‘post’ method will be used, that means that the value of the variables will not be seen in the address bar.

As you can see, we give each input tag a name(yourname) and (age), by doing this, when the form is submitted, PHP will see what values were inserted into the input fields and get the name of the input field and then connect the input field with the PHP variables on the next page in the PHP document.

Download the source files here > 

I’m not going to go deep into this one, it’s quite basic, this light box pop up uses CSS to open, not like the hectic Javascript boxes that has 8000 lines of code and takes a couple of generations to understand.

The Following code goes into your <body></body> tags:

Insert this part into your CSS head section or external style sheet:

How it works:

The light box is mainly controlled by the CSS and Divs. When it calls the “document.getElementById” it basically loads the css box styles and displays your light box. This specific light box is extra light because of the fact that it does not carry any extra JavaScript to load, so everything is static and preloaded for this one. You cam always pop in some extra Javascipt to make it slide open or shift down from wherevver, just thought I’d share the easy version.

Download the source files:

Why designers steal

If you are a designer you have most probably experienced a situation where you have a certain design or concept which you have to work on, whether it be a logo, poster, web design, t-shirt or a simple business card. The client briefs you on what he wants, all excited you head home with a bunch of idea’s running through your head, you think about the layout the client wants, what colours they want you to use and how it’s all going to come together.

You get home, make some coffee, a pencil and piece of paper and start planning your design, most of it is clear in your head and when you think you have a solid idea you sit yourself down in front of your laptop, open Photoshop and with the clients idea’s and yours, you sit and stare at a blank screen. All the ideas and concepts you had in your head can all of a sudden not work anymore, you start drawing shapes, mix it with colours and realise you don’t actually know what you want to do, you actually have no idea or direction in which you want the design and layout to go ?

So what now?

You start googling design, ideas and inspirations just because you can’t come up with an idea with what to do for the client, you see a great looking idea and you say to yourself, that’s what I want my design to look like, that’s what the client explained to me when he said he wanted a non-flashy but flashy, colourful but neutral, edgy but easy on the eye design. So you save the image or take a screenshot and start you “new” design for the client based on a designed you saw on the internet.

Is there anything wrong in stealing a design that you like and inspired you? My personal opinion is no, there’s nothing wrong with stealing a design that inspired you. As long as you don’t copy the design right down to the last pixel. This is not a public service announcement encouraging you to steal designs.

Why you can steal designs

Just like any other industry, the design community has trend setters, there are designers and developers that set standards which people won’t think twice about not following. If you couldn’t steal ideas from an inspirational design, there wouldn’t be any ‘trend setters’ or designers setting standards, there wouldn’t be any “Rock Star” designers. So thanks to you, there are designer who are regarded as rock star designers, why? Because the designs and concepts they make bring out are envied by others designers, people want to do designs like that, that’s why there works ends up on top tutorial sites. The work ends up in a tutorial which basically means that they are offering you assistance in stealing the design, telling you what colours to use and how to get that special effect. So at the end of the day, whether you are assisted in stealing an idea or design or searching for an idea yourself, it comes down to the same thing.

Why you should not steal designs

The only time when you should not steal a design is when you copy the design right down to the last pixel. What can also cause a personal issue is if you use that same design for the next client and the client actually finds out, that won’t be good for your image now would it? This does not mean that you shouldn’t use your own brain to come up with concepts and just keep on stealing designs. If the need is there to search for some external inspiration, there’s nothing wrong with that.

This article isn’t about me motivating you to steal every time you do a design, this article is about setting the record straight about looking for inspiration, as a designer, you always have inspiration; you just have to look a bit harder sometimes.
It does not mean that you should go and copy the whole design, you can get inspiration from someone else’s designs and layout’s in many ways, for example, be inspired by their colour scheme if it’s eye candy and they use beautiful colours, or maybe an unique layout, it might also be a simple button on the website. Just keep in mind at the end of the day, when you finished your design and the inspiration came from your own thoughts, it’s your master piece and you are setting the standards

Think about this for a minute

If a homeless person stole food because he didn’t have money to buy any food, would it be wrong for a designer to steal a design because he didn’t have inspiration at that time?

By Kobus Swartz

Orla Hunter

Sugar and Spice Graphic Design

Erica Designs

If you think you have a portfolio blog or site that would inspire fellow designers send me an email info@kobusswartz.co.za