PandaSoup

Tutorial on WDD – Basics of the Mesh tool

cscalzo — Mon, 22 Aug 2011 08:11:08 +0000

Brazilian freelance illustrator and art director, Marcos Torres, posted this nice Adobe Illustrator tutorial on Web Designer Depot. In the tutorial Marcos goes over building a Mario mushroom in Illustrator using the Mesh tool. I find this tutorial to be a good introduction to using the Mesh tool so check it out Basics of the Mesh tool in Illustrator.

Link to GoSquared Help Sheets

cscalzo — Fri, 29 Jul 2011 12:28:36 +0000

GoSquared has some great help sheets that I like having for quick reference. These are nice for when when you are switching between coding languages a lot and just need a quick reference. They also have a nice reference to glyphs on on the mac which is great. So heres the link take a look and download whatever pdfs you think might be helpful for you.

4 Inspirational Water Themed Fantasy Scenes

cscalzo — Thu, 21 Jul 2011 06:07:12 +0000

With summer winding down to an end I thought this week it might be nice to take a look at some inspirational art from some amazing artist who are a part of the DeviantArt community. If you like their art click the link to go to the artist DeviantArt page. Most of these works are for sale, so if you really like it help the artist out and buy a print of their work.

First up is “penguin train” by KYONGHWAN KIM or by his DeviantArt name tahra you can check out his personal site at www.tahraart.com

This one is from DeviantArt member arsdraw his work is titled Ancient Civilizations

This next one has a nice night feel to it, from DeviantArt member priteeboy also know as Matthew Attard. This work is titled Tropic of Cancer

This final one titled, FishermanHouse PrintVersion from DeviantArt member PutooXor also know as Zaw Ye Myint.

I hope that you have found these talented artist inspirational. Once again if you enjoyed what you saw please let the artist know that you like their work.

Shirt Color Change Tutorial

cscalzo — Tue, 12 Jul 2011 13:00:53 +0000

There are many ways out there to change the color of a shirt using photoshop. This is one technique that I personally like to use as I find that it leaves things open if you need to make modifications. It might be helpful if you look at this tutorial after you have looked at my layer mask tutorial from last week.

Introduction to Layer Mask

cscalzo — Tue, 05 Jul 2011 17:36:41 +0000

This is a quick introduction in using layer mask. The layer mask is helpful when making selections and if you have not been using it then this is a nice quick introduction to the tool.

CSS Background Techniques

cscalzo — Wed, 29 Jun 2011 15:48:53 +0000

In this tutorial we will be taking a look at some different techniques for creating background images for a web page. It will start out basic with some creating a solid color background then move to more advanced stuff like combining transparent png files and using div tags to make layered backgrounds. We will also take a look at a couple neat CSS3 tricks.

So lets start things off with some simple basic CSS.

First here is our html that will be used on these first few examples:




Backgrounds

Lets first change the back ground color to a a solid color, and lets go with a dark green.

The code for that would be:

body {
background-color: #009900;
}

You can see a sample of what this will look like here.

Now lets take a look at making a background pattern.
For this I will take this pattern

With this bit of CSS we will make that small pattern repeat across the entire background

body {
background-image: url('http://www.pandasoup.com/resource/images/backgroundPattern1.png');
background-repeat: repeat;
}

Now you can see a sample of this here.

In that last example I used the background-repeat property with the value of repeat. Well what if you wanted that background image to only repeat vertically or horizontally or what if you did not want it to repeat at all you could simply swap out the value of background-repeat with one of the values in the example below.

/* to repeat vertically you would use the value of repeat-x */
body {
background-image: url('http://www.pandasoup.com/resource/images/backgroundPattern1.png');
background-repeat: repeat-x;
}

/* to repeat horizontally you would use the value of repeat-y */
body {
background-image: url('http://www.pandasoup.com/resource/images/backgroundPattern1.png');
background-repeat: repeat-x;
}

/* to have the background not repeat use the value of no-repeat */
body {
background-image: url('http://www.pandasoup.com/resource/images/backgroundPattern1.png');
background-repeat: no-repeat;
}

Here are some examples of each repeat-x, repeat-y and no-repeat

You may have noticed that the no-repeat value might be useful if you could control where the background image is positioned. Well with CSS you can control that, here is a example where I position the background image to the top right. I have also Include a background-color in combination with the background-image so that you can see how the two attributes can work together.

body {
background-color: #009900
background-image: url('http://www.pandasoup.com/resource/images/backgroundPattern1.png');
background-repeat: no-repeat;
background-position: right top;
}

Here you can see an example. If you want to get more information about the background-position property check out this w3schools link as this post is getting a little long I dont want to get into all the details of how to use the background-position property.

We have covered the basics of the CSS background attribute and until now we have been creating a new line item for each attribute but I will now introduce you to what is know as shorthand CSS for the background I will introduce you to what is know as shorthand CSS for the background attribute.

What shorthand means is that instead of writing out each background property individually like background-color, background-image and background-position you instead just write background and place all the values after it. The important thing to remember is that the order that the values are placed in the background property is very important. If they are not in the correct order then it could cause the background to display odd in some web browsers. In the bellow example I will show you the order that is needed to keep the values in.

body {
/* the order is background-color background-image background-repeat background-attachment background-position */
background: #009900 url('http://www.pandasoup.com/resource/images/backgroundPattern1.png') no-repeat scroll right top;
}

You may have noticed that there was an attribute in there that I have not yet mentioned. The background-attachment refers to if the background image will scroll with the rest of the page or not it has values of scroll or fixed. Scroll means that the background image will move it the page is long and fixed means that the image will always stay in its location, even if you scroll down the page.

Bonus

Here’s a little sneak peak at what can be done with CSS3, this is compatible with all modern browsers (IE9, Firefox, Safari). As IE9 is the only version of IE that supports this at this time not enough users are using IE9 so until more users start using IE9 I would hold off on this.

With CSS3 you can have multiple background images to do this you simply place a comma after each value of a background property. I will so you two examples of code the first normal CSS and the other the shorthand version.

/*  example in individual properties */
body {
	background-image: url('http://www.pandasoup.com/resource/images/backgroundImage1.png'), url('http://www.pandasoup.com/resource/images/backgroundPattern1.png');
	background-repeat: no-repeat, repeat;
	background-position: top left, top left;
}
/*  example in shorthand */
body {
	background: url('http://www.pandasoup.com/resource/images/backgroundImage1.png') no-repeat top left, url('http://www.pandasoup.com/resource/images/backgroundPattern1.png') repeat  top left;
}

Example of multiple backgrounds using CSS.

It should be noted that the stacking order of the background images goes from top to bottom. So the background that you want to be on top of all the others should be the first one that you enter in the set.

I hope that you have found this helpful, let me know if you have any questions.

Using Action and Batch

cscalzo — Mon, 20 Jun 2011 08:15:55 +0000

Have you ever had an instance where you had a large set of photos that you had to make changes to but did not have the time to sit and make them? In this tutorial I will show you how to use the Actions window and Batch command in Photoshop to help you. The scenario is this, you have a set of photos that need to have copyright information added to the bottom left corner.

What did you think of the tutorial? Got any questions?

Do you have repetitive task that you do in Photoshop? Try creating and action and running a batch to help speed up your work flow. Tell me about any of your handy automations.

Interesting Form Layout

cscalzo — Thu, 16 Jun 2011 20:00:26 +0000

A friend of mine had introduced my to this site, particularly for their interesting take on a signup from. Instead of your typical blocks where you enter name, email and password what the Deal Chicken did differently was they actually created a simple paragraph that visitors could read and as they read they would come to inline input boxes that would ask for user info. I find this interesting because from a users point it seems that as reading the paragraph progresses visitor may feel more incline to sign up as it seems more like a conversation with a person then just the normal monotony of a web form.

What do you think of forms like this? Have you seen any other forms like this?
Leave a comment below.