Tutoriais Flamantes

How to Combine Pixel and Vector to Produce Striking Artwork_Photoshop

Gonçalo Gonçalves — Thu, 13 Mar 2008 20:24:29 +0000

Resultado Final:

I recently completed an experimental personal design project where a piece of digital artwork was created by combining pixel and vector elements. During the process of it’s production I captured screenshots and jotted down notes to present the course of the creation as a full blown walkthrough/tutorial.
There are plenty of useful little tutorials on the net explaining the use of a single tool, but rarely do you find a more complex explanation on how designer’s pull together a completed project. Here you will find a step by step guide of how MY techniques were put to use to make this Snowboarder artwork.

Due to the length and large number of images the tutorial is split into two sections, the first of which here will cover the manipulation of the base photographs, and introducing the first few vector elements. Subscribe to the RSS Feed or register for Email Updates to be notified of the second part which will cover the addition of more vector elements and how the finishing touches are added.

The project makes use of both Adobe Photoshop and Adobe Illustrator to create and combine the different elements. Also a collection of resources was gathered which includes stock photography from StockXchng and vector graphics from GoMedia and Vecteezy. As well as some resources I already had stored in my personal toolbox!

The first step on this project was to sketch out a rough plan, this idea in particular was pretty clear in my head already but a quick drawing was produced to keep as a reference.

Once you have your plan and idea in mind, open up Adobe Photoshop and setup your document. Here I’m using a 300dpi CMYK A4 layout with an additional 3mm bleed just in case I decide to have it professionally printed at a later stage.

Bearing in mind the bleed that the document has, set up guides to accommodate the trim area and enough margin around the edges.

The main background image is of a range of snowy mountains from StockXchng, align this to the bottom of the document.

Select light and dark blue areas from the picture and add a gradient to extend the sky to the top of the document.

Due to the size of the document slight banding is appearing, to remedy this add a 2-3% amount of noise.

After a lot of searching the main subject was also found on StockXchng, the Snowboarder image was downloaded and brought into Photoshop.

Using the Pen Tool zoom right into the subject and draw an outlining path, this is probably the most time consuming method of ‘cutting out’ a picture but is also the most accurate.

Make selections from your Paths using a half pixel feather to remove the sharp edges. Paste the Snowboarder into your main document.

Now is a good opportunity to make any slight correcting adjustments such as Levels, Curves and Sharpness to match the image to it’s surroundings.

Vector Shape One – Radial Lines
Swap over to Adobe Illustrator to create the first of the vector graphics. These will be a set of radial lines to sit in the background of the main artwork.

Draw a rectangle on the artboard, then using the Direct Selection Tool pull together the bottom two points.

Copy and Paste the shape and rotate slightly using the Rotate Tool with the pivot placed underneath the shape.
Pressing CTRL/CMD + D will repeat repeat the last action allowing you to quickly paste (CTRL/CMD + F) and rotate multiple instances by alternating between the two shortcut keys. This will eventually make up the set of radial lines as shown.

Paste the radial lines into the document above the mountains layer but underneath the snowboarder.

To remove the overlap over the mountains draw a clipping path with the Pen Tool following the contours of the mountain tops. Save this Path for later as we will be using it again, double click the Path in the Paths palette and enter a name.

The mountains layer looks quite flat so add some funky halftone texture by duplicating the layer and going to Filter > Pixelate > Halftone.
Enter 30px minimum diameter and 45 in each of the channels.
Set this layer to Soft Light at 20%.
Make a selection from the Mountains Path and delete out the section from the halftone layer.

Vector Shape Two – Circular Blobs
Switch over to Adobe Illustrator again to create the next vector element.

Draw a circle whilst holding Shift, then copy and paste this circle multiple times overlapping each to create a large blobby area.
Select all and fill with white, then paste into the Photoshop document.

Make a selection from the Mountains Path once again, and delete out the area.

Change the blending mode to Overlay.

Vector Shape Three – Trendy Circles
In a previous post I presented a selection of Trendy Circles for free download, head over and download the freebie and open up in Adobe Illustrator.

Select a style of Trendy Circle that takes your fancy and copy the group.

Paste in multiple groups of Trendy Circles to fill the area behind the snowboarder.

Go to Image > Adjustments > Hue/Saturation or shortcut with CTRL/CMD + U and adjust the colour settings as shown to match the Trendy Circles with the scheme of the artwork.

Add a little extra visual impact by adding a Gradient Overlay in the Layer Styles, ranging from a dark to a light blue vertically across the circles.

Open up a vector splatter from the resources collection, change the fill colour to white and paste into the Photoshop document under the Trendy Circles.

Repeat the Hue and Saturation adjustment to the splatter and add another gradient overlay to the layer.
Delete out the Mountains Path selection from the splatter layer.

Open up the Punk Vector Pack and copy the star shape.

Paste this shape into the Photoshop document multiple times and scale each star down to create a small trail behind the boarder’s hand.

Adjust the Hue and Saturation to add a complementing dark blue colour from the Snowboard.

Vector Shape Four – Whispy Lines
Back into Illustrator again to produce another vector element, draw a small circle on the artboard.

Using the Direct Selection Tool drag the left and right points individually outwards to create the shape seen in figure 3.
With this shape still selected click the New icon in the Brushes Palette and select the New Art Brush option.

Ensure the direction is running along the width of the shape in the options window.

Draw a slightly curved Path and apply the new brush. Copy and paste the path and rotate it slightly and place underneath the previous.

Select both of the paths and go to Object > Blend > Blend Options. Setup the Spacing to Specified Steps and enter 20. Go back into Object > Blend and select Make.

Convert the shape to white and paste into the Photoshop document, position a couple flaring out from underneath the Snowboarder. Set the layer style to Soft Light.

Zoom into the bottom of the Trendy Circles and draw a path following their contours, make a selection from this to delete the overlapping Whispy Lines.

So far the design will look a little something like this:

The added vector elements are really starting to add to the composition, let’s continue creating a few more…

Vector Shape Five – Curly Lines

Switch back to Illustrator again to draw a Spiral on the artboard, use the cursor keys to adjust the amount of spiraling.
Use the Direct Selection Point to drag the end point of the spiral to give more of a sweeping motion. Apply the brush we made earlier to this shape.

Duplicate the spiral and rotate each one using the same technique as the Radial Lines to create a repeating pattern as shown above.

Paste the spiral pattern into the Photoshop document a few times rotating each one slightly. Merge the layers together and change to Overlay with 50% Opacity.

Duplicate the layer and flip horizontally to place the same pattern onto the opposite side of the boarder creating a symmetrical pattern.

Vector Shape Six – More Whispy Lines

Using the same techniques and used in the creation of the vector elements in Part One, create a set of wavy lines complete with blending effect, copy and paste then reflect along the vertical axis.

Paste these into the Photoshop document making them large enough to creep in from the edges of the canvas. Move this layer to the bottom of the stack and set to Overlay.

Open up the Punk Vector Pack again and take a copy of the retro star, ungroup the object and change the white area to a blue hue colour picked from the main document.

Paste in three versions each at a different angle and size flaring out from the front of the snowboard.

Using one of the freebie packs from the kind fellows over at Go Media, copy a vector spine and paste into the Photoshop document. Duplicate the layer multiple times and rotate each spine image to produce a radial pattern stemming from the Snowboard’s hand.

Merge the spine layers and adjust the Hue/Saturation to blend them into the document, drop the opacity down to tone down their impact.

Vector Shape Seven – Diagonal Lines
Swap over to Illustrator for the last time to produce a range of diagonal lines.

Start with a single straight line rotated to 45degrees, copy and paste then move horizontally across the artboard. Use the blend technique used previously to create multiple instances.

Paste these into the Photoshop document over the mountains at Overlay; 50%. Load the Mountains Path selection and delete any overlap beyond the edges of the mountain tops.

The mountains could do with a little more contrast and impact, duplicate the layer and set the layer style to Multiply at 40%.

Paste in one more set of vector splatters and position above the circular blobs. Delete out the selection from both the circular blobs and the mountains.

Adjust the Hue/Saturation to blend the splatters into the document’s colour scheme.

Now it’s time to rough up the design to contrast against the crisp vector elements, open up an image of a spray paint splatter, adjust the levels and colours of the image to isolate the splatter onto black. Then, set the layer mode to Screen to render the black areas transparent.
Unfortunately the splatters I use aren’t licensed to give away, but similar splatters can be found on Stock Websites or can be easily created with a spare tin of spray paint.

Go ahead and paste in varying splatters onto the document giving a really distressed look.
Use the Levels to adjust the impact of the spatters.

Using the huge Spray Paint Photoshop Brushes from Go Media paint in some drips and sprays, along with adding to the urban/distressed/super-cool style they also give the impression of icicles from the snowboard.

Using another set of Photoshop Brushes, this time in the way of the Watercolour brushes from Bittbox roughly paint in a border around the image. Check out the Rotating a Photoshop Brush tip for this stage.

Using the same brushes delete out some of the border with the eraser set to a 50% opacity .
Scale the layer up to adjust the size of the border and how much of the image it will overlap.

Change the layer style to Overlay at 50% to add an icy blue frame surrounding the image.

Take a close look across the image and make any necessary finishing touches. Here I removed some of the spray paint from around the boarder’s head and duplicated the splatters to give them more impact.

Save and export the completed artwork.

Remember the steps here have outlined the basics of my personal techniques, there may be many other ways to achieve similar results, use and develop them to your own taste.
One of the key features is to create and collect a range of resources for your designer’s toolbox ready for quick insertion into your next project.

Fonte: link

Painting your B&W photos_Photoshop

Gonçalo Gonçalves — Thu, 13 Mar 2008 20:20:32 +0000

Resultado Final:

1.First of all, choose the photo you want to color. Don´t start
with an image that has too many details or too many people, try
something very simple like an object or a face =) So, i chose this image from adamci.

2.If you thing that your image needs contrast or lightness, you
can use the adjustment layer icon from the layers palette as the image
below. Here I chose brightness/contrast to give it a little more contrast.

3.Now the part that you need to be pacient! Using the Polygonal
Lasso Tool can be very boring sometimes… But if you want great
results, you can´t be lazy!!! Image here, showing the selection at the
girl´s hair. Create a new layer.

4.We don´t want ugly sharpen edges to our coloring do we? Then, go to Select, and then Feather, and choose a value like 5 for example. See what´s best for the image.

5.Easy until now, isn´t it? =) Now, let´s start putting some
colors! Here I chose a light skin tone for my kids =) choose the
color, and then click on the Paint Bucket Tool and click inside your
selection (remember, do it on your new layer!!! Always create new
layers to every new color you use)

6.After applying color, comes the magic! Click at the Blending
Options from your Layer Palette and choose Color, or some other option that you think suits best!

7.Hmm… They look a little too red, don´t they? Well then it´s
time to Color Balance, at Image/Adjustments up at the menu. Here I put some more yellow to my skin tone =)

8.It looks great already!!! But easy there… Let´s use the
eraser at those eyes! They need to be white, right? To get better
eraser results, choose a smoother brush at the tool options above, (or
simply right-click at the image).

9.Now it´s the same steps all trhough the image… let´s paint
the eyes, then! Select with the Polygonal Lasso Tool around the eyes, and set the feather value about 2.

10.Let´s make it pretty green eyes! =) paint it with the Paint Bucket Tool inside the selected area. Then change the Layer Blending Options to Overlay.

11.Ah, don´t forget to use the eraser at the eyes light spots!!
They need to be white, so that it looks more real =)

12.Now let´s paint the lips. Select around the lips with the
Polygonal Lasso Tool, and set feather value about 2. Use the same skin tone, just add some more red (at image/adjustments/color balance).

13.After that, change Layer Blending Mode to Multiply. Now let
´s make it less visible, changing the layer opacity. Set about 50%, or what suits best.

14.Now, the sabe basic steps to paint the girls clothes. Select
it with the Polygonal Lasso Tool and set feather value about 5. Paint
it with the color you want (always on a new Layer, remember!!).

15.Set Layer Blending Mode to Multiply, or what suits best. But
here let´s take a look at the details… It looks good, right? But it
would look better if th buttons had a different color, don´t you
think? Then, select the buttons and delete the color from them. Don´t
undo the selection.

16.Create a new layer, and using that selection, paint the
buttons another color. Set Layer Blending Mode to Multiply.

17.Now let´s make the hair. Select it with the Polygonal Lasso
Tool, and set Feather value about 8. (here you can use a higher value
because you don´t need to be so careful on the edges).

18.After choosing the color, change the Layer Blending Mode.
Here I used Color. To look more real, change the opacity. Here I set
about 60%. It makes the color smoother, ha?

19.Now, erase the color around the hair, so that it doesn´t go over the background. Don´t worry if it stays grey again, but remember to use a smooth and large brush for the eraser, ok?

20.Now, same old steps to do the eyebrow. Select it, set
feather value about 5, paint it the same color you used in the hair,
set Layer Blending Mode to Soft Light. And FINALLY erase with a smooth brush eraser, around it.

There! You´re done!!! Now follow the same old basic steps to paint the boy!!! Good luck, I hope you enjoyed it!! =)

Fonte: http://www.sxc.hu/blog/post/1028

Art Techniques_Photoshop

Gonçalo Gonçalves — Thu, 13 Mar 2008 20:17:38 +0000

Resultado Final:

This tutorial will guide you with visual steps through the creation of your own art work with the technique of “blending layers” in Photoshop . . I will develop step by step by step my own art work using SXC stock so you can repeat or develop the process with your own pics and your creativity , I’m using Photoshop CS2 but you can work in older versions

********************************************

This process is really simple with easy steps and it shouldn’t take you more than 12 minutes

EXAMPLE 1 (this is the most elaborated one )

This is the stock I blended

Download them at SXC

EYE - colorful eye 9 by veave_pl
Texture 1 - Green by Leonbidon
Texture 2 - Textures by 02design
Texture 3 - Collage by Baltar

________________________________________________________
>> Step1
Open your main image in PS , and turn it B/W , (Image/Adjustment/Desaturate )

_______________________________________________________
>> Step2
Add the first texture to the palette , ( open the image and drag it into your palette or copy paste it )

_______________________________________________________
>> Step3
Change the blend mode to multiply or anyone you like , each blending mode is has different effects , you should check them all out ,

So far it looks like this

_______________________________________________________

>> Step4
Add a mask to the Layer 2 to clear up the iris and white surface , to get better effect it is better to use the soft brush and keep the opacity low so your mask get softer

________________________________________________________
>> Step5

Repeat Step 2 3 4 but using now textures 23 and rename the layers to Texture 1 , 2 ,3 etc

It should look like this so far :

________________________________________________________

>> Step6

I want to add some color to the iris so , Open the eye picture again and crop a square enclosing the iris , paste it in your palette and make it match with the original iris , (this is easier than it looks) , then erase with the soft brush the edges and play with the (image/adjust/brightness contrast) and (image/adjust/color balance ) so you get your desired tones

***********************************************

>> EXAMPLE 2

this one is much more easier , within 3 minutes max !!!

Download this practice’s PSD file (1.2MB)

Download them at SXC

Girl - Flowers by Wolak
Texture 1 - Textures by 02design
Texture 2 - Wall decay by n_yfe

1.-Open texture 1
2.-Add texture 2 to your palette and Blend it mode : Multiply
3.-Add Girl pic to your palette and blend it mode : Multiply

4.-Play with the colors of the girl layer( image / adjust / color balance ) I added a bit of green and VUALA !!!!

Your imagination is the limit now … old style pics , futuristic pics , cool textures , awsome enviroments , etc etc ….

Fonte: http://www.sxc.hu/blog/post/377
GG

Creating a three dimensional pie chart using Google’s Chart API

Gonçalo Gonçalves — Thu, 13 Mar 2008 20:12:29 +0000

Little introduction
The Google Chart API returns a PNG image in response to a URL. So you have to include an into your page, and the API will return the chart. You are able to create several charts; line, bar, pie (the one we’re going to create in this tutorial) and others.

URL Format
The URL must be in the following format: http://chart.apis.google.com/chart?&&.

The parameters
The following parameters are required with every query:

Chart size (chs=x)
Chart data (chd=:)
Chart type (cht=)

Other optional parameters we’re going to use in this tutorial are:

Chart title (chtt=)
Pie chart labels (chl=)
Chart colors (chco=)

You can specify as many parameters as you like, in any order. Just make sure you separate all the parameters by an ampersand (&).

Inserting the parameters
Alright! Let’s go and fill in some parameters.

The width and height
Let’s give the image a width of 300 pixels, and a height of 200 pixels:
http://chart.apis.google.com/chart?chs=300x200

Set the chart type
We want it to be a three dimensional pie chart:
http://chart.apis.google.com/chart?chs=300x200&cht=p3

Add the labels
We have a total of three labels; won, draw and lost:
http://chart.apis.google.com/chart?chs=300x200&cht=p3&chl=Lost|Draw|Won

Add the data
TalkPHP’s soccerteam has won 60% of their matches, 30% draw and 10% are lost. We can choose out of three encoding types to insert data.

Simple encoding
Text encoding
Extended encoding

I prefer Text encoding because you can use percents as numbers. 0.0 stands for 0%, 1.0 for 1%, 30.0 for 30% and so on. -1 stands for a missing value. Separate all values by a comma (,).
http://chart.apis.google.com/chart?chs=300x200&cht=p3&chl=Won|Draw|Lost&chd=t:6 0.0,30.0,10.0

Give it a title!
The title will be “Pie chart for TalkPHP’s soccerteam By maZtah”. Insert on the spaces a ‘+’, and use a ‘|’ for the :
http://chart.apis.google.com/chart?chs=300x200&cht=p3&chl=Won|Draw|Lost&chd=t:6 0.0,30.0,10.0&chtt=Pie+chart+for+TalkPHP's+soccert eam|By+maZtah

Last but not least: change the color!
As we do not like the default orange color, we are going to change it in trendish pink!
http://chart.apis.google.com/chart?chs=300x200&cht=p3&chl=Won|Draw|Lost&chd=t:6 0.0,30.0,10.0&chtt=Pie+chart+for+TalkPHP's+soccert eam|By+maZtah&chco=ff0099

The result
Let’s see what it looks like, right now!

Beautiful, isn’t it?
Alright! Let’s get to our last point!

Including the image to our webpage.
This can be done easily by the following code:

HTML Code:

"http://chart.apis.google.com/chart?chs=300x200&cht=p3&chl=Won|Draw|Lost&chd=t:60.0,30.0,10.0&chtt=Pie+chart+for+TalkPHP's+soccerteam|By+maZtah&chco=ff0099" width="300" height="200" alt="Pie chart for TalkPHP soccerteam
By maZtah" />

Extra: making it dynamic
You ofcourse are able to make a dynamic version of the above pie chart. This can be achieved as follows:

PHP Code:

 			 
$iWon = 6;

$iDraw = 3;

$iLost = 1;

?>

echo $iWon; ?>.0,echo $iDraw; ?>.0,echo $iLost; ?>.0&chtt=Pie+chart+for+TalkPHP’s+soccerteam|By+maZtah&chco=ff0099″ width=”300″ height=”200″ alt=”Pie chart for TalkPHP soccerteam
By maZtah” />

Ofcourse you could write a more advanced function to draw such a chart, but that’s beyond the goal of this tutorial.
Reference: http://code.google.com/apis/chart/.

Fonte: link

Drawing with light_Fotografia

Gonçalo Gonçalves — Wed, 12 Mar 2008 20:49:50 +0000

Equipment:

1) A camera with a bulb setting or shutter setting for up to 30 seconds
2) A tripod or some other way to keep the camera steady
3) A shutter release cable or remote control
4) A light source. Flashlights, LED lights, candles, etc.

Step by step:

1) Set the camera up on a tripod approximately 8 feet from where the light source will be.

2) Set the camera for a aperture of f8 and the shutter to 10 seconds. (this is just a starting point…once you have taken a few pictures you will want to play with the shutter speed and f stop to get the effects you want)

3) Have someone stand in front of the camera and focus on them. Pre-focus the camera while the lights are on.

4) Now is where the fun starts - Turn the lights off (the darker the room the better) and have the person in front of the camera begin moving the light source around slowly and smoothly.

5) Trip the shutter and continue to move the light source throughout the exposure. It will take some practice to get comfortable moving the light source around…not too big and not too small.

6) Play around with different light sources – LEDs, flashlights, candles, etc. Different “heats” of light produce different color effects. Another idea is to tie a string to the light source and use it to make smooth arcs and circles.

This is an easy project that can have some amazing effects. Have fun and let us see the results!

Fonte: http://www.sxc.hu/blog/post/762

Valentines Day_Photoshop

Gonçalo Gonçalves — Wed, 12 Mar 2008 20:46:26 +0000

Resultado Final:

Step 1

First of all create a new document and fill it with black.

Step 2

Now import your 3D text and position it as you want. For making this text I used Xara 3D. It is a very simple program that you can use. Next add some shadows to each letter.

Step 3

The thing I want to achieve here is to make some kind of colorful clouds behind the text. This technique is also known as “nebula” so it is most likely that you will know about this effect.

To do this we will use the Brush Tool first with a Hardness set to 0%. Make a new layer and chose a blue color and paint behind the text.

Step 4

On the same layer paint a red color over sections of the blue. Experiment to find the outcome you like best.

Step 5

Now use a yellow color and do the same as above.

Step 6

Now paint a white area as above.

Step 7

We will make it blurry now. Go to Filters > Blur > Gaussian Blur and set the “Radius” as you like.

Step 8

Now we need to make it look dustier. Create a new layer and fill it with black.

Go to Filter > Render > Clouds
Set it’s blending mode to Overlay
Duplicate the layer

Step 9

I want to give the text faces a light neon look. For this we must select each letter face. Use the Pen Tool for this.

Step 10

Make a new layer over the L letter and call it L face:

Press Control+Enter (Command+Return on a Mac)
Fill the selection with any light color
Follow the settings below to add the effect to the letters.

Step 11

Now use the Dodge Tool, set the Exposure to 55% and make the face of the letters lighter by brushing over them.

Step 12

Duplicate L face layer, remove the Effects and set it to Overlay.

Step 13

Use the same technique for all the other letters and don’t forget to put each letter face over it’s letter so that you will keep the composition as you first put together.

Step 14

Now I want to make a background. Go to the bottom of the layer list and make a new layer over the background layer.

Step 15

Select a dark pink color for the foreground and black for the background. Use the radial gradient:

Step 16

Use the Gradient Tool and make something like this:

Step 17

I don’t want to see the clouds on that pink so I will mask it using the Mask Tool.

Step 18

The image is almost finished. Now what we need to do is make some of the clouds and dust go over the letters so that it looks more realistic. To do this you need to copy the clouds and dust layers and move them on top of all the layers.

Step 19

Merge them together and mask or delete some of it. As you can see in the example I have masked most of it because I am going to make a smaller cloud and use it for this effect. I used Linear Light for the Blending Mode.

Step 20

Now I will explain how to make some really nice tentacles that you could use with this effect.

Make a new layer and call it “Green” because green is the colour we will use here. Select a green color in the foreground “31b14a” and using the Pen Tool draw a path that you would like the tentacle to follow.

Step 21

Select the Brush Tool and make sure you select a small brush size. I chose 1 pixel. Use these settings to make the brush use a Pen Pressure effect.

Step 22

Now select the Pen Tool again, right click (Option or Alt+Click on a Mac) and select Stroke Path…

Before you hit ok on the screen that appears make sure you check the Simulate Pressure and then hit ok.

This is what you should get:

Step 23

Now using the same path you need to make some more strokes but this time modify the shape of the path a little and use different tones.

Something like this:

Step 24

Do the exact steps all over again at least 8 or 10 times starting from Step 20. But don’t forget to use different tones of green and also modify the shape of the path.

When you are finished you should get something like this:

Step 25

Now use the brush tool and simply draw over your path. Don’t worry, you don’t need to follow the path exactly. I use a tablet and this gives me more precision but this is not needed.

Next, using the brush tool do something like this:

Step 26

Now use these settings to make it shiny:

Step 27

In the end mask the part of the tentacle behind the text.

Step 28

Make more tentacles using different colors and different shapes.

Here is my result:

Conclusion

In the end you can add some more clouds or change the background with a nice texture or other color.

Fonte: http://psdtuts.com/designing-tutorials/valentines-day-photoshop-style/

How to Use PHP To Dynamically Resize an Image

Gonçalo Gonçalves — Thu, 21 Feb 2008 23:31:35 +0000

One of the most annoying things about working with images is getting them into the right size. Screenshots start out huge - and you need to resize them to an appropriate size for your website.Some blogs automatically resize the pictures for you into a thumbnail. What if you want the image a different size, though? You could allow the browser to resize it for you, or - better yet - write your own php script to resize the image dynamically.

Why You Shouldn’t Let the Browser Resize Images

Look at the original picture - the small thumbnail created by WordPress. Notice how large it is - 13.9kb. When WordPress resizes the image, it also reduces the file size. If I were to include the fullsize image and resize it using css height and width attributes, the file size would not be cut down.

Want proof? Look at the second image to the right - that’s simply resized by the browser. It’s a whopping 284.21kb.

If we write our own php script to resize the image dynamically, we can control both the image size and the file size. Check out the third image to the right - which was resized with a php script. You’ll notice that it looks nicer too - the browser isn’t designed to resize images.

Using the PHP GD Library to Resize the Image

So how do we do this? We’re going to make use of the PHP GD library to manipulate the image, and a $_GET parameter to tell it which image to re-size.

Let’s walk through using the GD library to re-size an image. Then we’ll see how to include that in your HTML to actually do the resizing for you.

First, we need to open up the original file and get it’s size and type characteristics.

$src_img = imagecreatefrompng(‘image.png’);
$srcsize = getimagesize(‘image.png’);

imagecreatfrompng() creates an image object and stores it in $src_image. If the file was a different type we could replace “png” with “jpeg” or “gif.” getimagesize() stores an array in $srcsize that contains the width of the image ($srcsize[0]), the height of the image ($srcsize[1]), and the filetype of the image ($srcsize[2]).

Now we need to create new dimensions for the new image and actually create an image. We’ll resize it to 200 pixels wide - and then adjust the height to maintain the ratio.

$dest_x = 200;
$dest_y = (200 / $srcsize[0]) * $srcsize[1];
$dst_img = imagecreatetruecolor($dest_x, $dest_y);

The calculations should be self explanatory. imagecreatetruecolor() creates a new image object for us with the given dimensions - which we will soon fill in with our resized image.

The next step is to place the resized image into $dst_img and output the image as Image content.

imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0,
$dest_x, $dest_y, $srcsize[0], $srcsize[1]);header(“content-type: image/png”);
imagepng($dst_img);

imagecopyresampled() copies an image ($dst_img) into a new image ($src_img) with a set of given attributes (including our sizes). The “Header” line tells the browser that this is an image - so that it’s not displayed as a bunch of gibberish. Finally, the imagepng() function actually displays the image.

Now, we need to clean up and destroy the image objects. Otherwise, we could end up sapping a lot of memory from the server.

imagedestroy($src_img);
imagedestroy($dst_img);

Displaying the Script in HTML

If you load the script directly, you should simply see the image. It creates an image resource and displays it in the browser - as if “resize-image.php” was really “image.png.”

Therefore all we need to do to include this new image in an HTML page is use the php script as the src attribute of our tag. Like so…

src=‘resize-image.php’ />

The script will execute, create an image, and use that as the src.

The last thing we need to do is modify our script so that we can pass it some information.

It wouldn’t do much good if we had to write a new php script for every image we wanted to resize. Instead, we can use the $_GET array to send a variable (the image filename) to our image resizing script.

Here’s the entire image resizing script, with the $_GET variable used for the filename.

// Create source image and dimensions
$src_img = imagecreatefrompng($_GET['image']);
$srcsize = getimagesize($_GET['image']);
$dest_x = 200;
$dest_y = (200 / $srcsize[0]) * $srcsize[1];
$dst_img = imagecreatetruecolor($dest_x, $dest_y);// Resize image
imagecopyresampled($dst_img, $src_img, 0, 0, 0, 0, $dest_x, $dest_y, $srcsize[0], $srcsize[1]);

// Output image
header(“content-type: image/png”);
imagepng($dst_img);

// Destroy images
imagedestroy($src_img);
imagedestroy($dst_img);

To use this, you need to slightly modify your HTML and add an “image” parameter to the URL of your script. Like so…

src=‘resize-image.php?image=image.png’ />

There ya go! Now you can resize images on the fly.

Next Steps to Take…

This is of course a basic introduction to the topic. You can add a lot of functionality to resize-image.php.

For example, you could take extra parameters - like a width and/or height. You might also want to include a bunch of error checking - make sure the file exists, make sure the new dimensions are appropriate, etc.

You could also use a switch() statement to open different types of images - based on the contents of $srcsize[2]. Remember, you can use the GD library to do more than work with .png files. By replacing ‘png’ with ‘jpeg’ or ‘gif’ you can use the same functions to work with these file types. For example, imagecreatefromjpeg is equivalent to imagecreatefrompng.

Fonte: Link

Create Your Own Flat Pack Toy

Gonçalo Gonçalves — Thu, 21 Feb 2008 23:11:46 +0000

Resultado Final:

In this post I’ll be going back through the stages of his creation, starting with an idea floating around in my brain, to a rough pencil sketch, to drawing up in Adobe Illustrator and finally bringing to life in three dimensions!I’ll not go into the step by step details of every tool use (I would be here until next year!), but rather outline the stages of Frankenspoon’s creation which can be implemented into creating your own flat pack toy.

Get started by developing a character, or modify one of your existing characters into a rough three dimensional sketch. Bear in mind at this stage the character will need to be split up into the front, sides and top portions so keeping your ideas simple will make things easier in the long run.
With your ideas on your desired outcome complete, start working on how the three dimensional object will de-construct into a flat net, and where the folds will need placing in order for the character to be assembled. It sometimes helps here to create some mock-up cubes out of paper and draw on the rough outlines of your character, then flatten the model to use as a base for the digital reproduction.

With Halloween coming up soon I just had to create some kind of monster for my toy, I started a couple of sketches which soon developed into Frankenspoon!

The next stage is to plan out the illustration of your character in more detail. Here, I spent a little more time sketching out the facial feature of Frankenspoon, which was scanned in to use as a guide.

With your sketches scanned, place your character profile onto a layer in Adobe Illustrator and reduce the transparency. Use the Pen Tool to trace the pencil lines, and in some cases make complete shapes such as the mouth.

To give more impact to your illustration, create a brush to produce the effect of a pen’s varying thicknesses in its stroke. Do this by drawing a circle (hold shift), then with the Direct Selection Tool drag an outermost point horizontally (hold shift again) away from the circle. In the Brushes window click the ‘New Brush’ icon, choose ‘New Art Brush’ from the list, change the colorization to Tints in the next window and click OK

Flip the shape horizontally and set this as a new brush, now you have the choice of ‘fat to thin’ or ‘thin to fat’ strokes. Apply these brushes to the lines you create with the pen tool and adjust the stroke weights to suit.

If, like Frankenspoon your character is symmetrical, remember you only have to only draw up half of his face then copy and flip these shapes horizontally to draw up the other half.

Continue using this technique to draw up the whole front panel of your design, use a box as a guide to keep your drawing within the overall dimensions.

Begin introducing life into your character by creating blocks of base colours, then build up on these with smaller shapes of darker and lighter tones to simulate the highlights and shadows and thus adding depth to the illustration. Remember to Keep these blocks of colour underneath your main sketch lines by altering the stacking order (CTRL/CMD + ] and CTRL/CMD + [). For more information on this technique take a look at my previous Pirate Tutorial.
On Frankenspoon, I also change the colour of some of the detailing lines to blend in with the overall colour scheme, and to allow the more definitive lines to stand out in black.

Frankenspoon’s Corduroy trousers are created by placing down a block of dark brown base colour. Then the strips of light brown are added by drawing a vertical line with a thin stroke, this is then duplicated and moved horizontally to the opposite side of the brown block, finally with both lines selected the Blend Tool (Object > Blend > Blend Options / Object > Blend > Make) is used to fill in the additional stripes.

With the front panel complete, it’s time to move onto the sides and back of the net. Duplicate your guide box and move into position across the artboard (Use your Maths head to work out the X and Y positions or Hit ENTER, then type the width of your panel into the horizontal box to butt it up next to the previous panel)
Continue tracing your sketches and adding features to the side and back of the net. Some parts can be extended to flow smoothly around the body of the character such as his shirt and belt.

Paying close attention to your original plan, work out where to add the top and bottom panels for your net. Remember to ensure you make the width of the side panels the same as the height of the top and bottom so that they match up when folded together.
In my case, I also added an additional strip of hair to the top panel which overhangs the front panel when the model is assembled.

Next up, draw up the arms of the character and colour with the same techniques as previously. To create an arm with graphics on both sides, use the same outline for front and rear then butt them together to enable them to fold over against a straight edge.

As you can see from my version, my plan for the folding of the arms meant I had to rearrange the position of the bottom flap. Measurements were taken to allow the arms to fold inwards, then back out of the side of the character through cut-out slots. A much simpler design could include totally separate arms that are glued on afterwards.

Add flaps to the net to allow for its construction. These flaps will need positioning between any two sides that will come into contact when the model is folded to allow gluing or sticking.

The flaps are created by drawing a basic rectangle, then using the Direct Selection Tool select two corner points from a long edge. Go to Object > Transform > Scale and enter 80% to create an Isosceles Trapezoid. Tapering in the outer edges will help prevent interference between the tabs when folded together. Fill these Trapezoids with a matching colour to the artwork to blend them in.

Distinguish your folds and cuts using your own personal key, for example a fold may be a dotted green line while a cut is a solid magenta line. Using the Scissors tool is helpful here to split up the stroked shapes into individual lines.
Keep your strokes thin and subtle enough not to ruin the overall design, but enough for the end user to see how to assemble the model.

Add your final notes and instructions to your net to ensure any numpty will manage to construct it, bear in mind your design should be simple enough not to need a complete instruction manual to go with it!

Finally, position your net into an A4 or Letter sized sheet to allow anyone with a standard desktop printer to download and make your model. Add any additional branding to the left over areas of the page, such as the name of your character, your logo, name and web address

Fonte: Link