Sitepoint.com

Sitepoint.com

I found SitePoint awhile ago when I was searching for different freelance sort of websites. They have tons of great information and have a system wet-up where actual companies or groups and organizations can start a competition where anyone can enter.

This is a great opportunity to get your name out and show off what you have to offer. There are a lot of member though producing great work. So, it's a little tough unless you have lots of time and put all of your effort into your contest submission. The down side to this, as with any contest, is that you are not guaranteed to win after putting so much time and effort into your creation, so it does feel at times that you "lose money."

Overall though I would Sitepoint.com is great site that everyone should check out. They do offer other services. They offer:

• Articles
• Books
• Kits
• Videos
• Blogs
• Contests
• Marketplace
• Forums

The design contests are in the following categories:

• Coded Templates
• Uncoded Templates
• Stationery
• Flash
• Logos
• Buttons, Icons or Banners
• Other Design Tasks

Idea Designs.ro

Idea Designs.ro

A great portfolio site I found hidden away in my bookmarks. I forget how long ago, or how I came across Idea Designs.ro but, it was still in my bookmarks so I decided to visit it.

There is some awesome work he has in his portfolio. And site is very well set-up. Nice and simple, and best of all done in flash.

I suggest just checking out Idea Designs.ro and take a look around

My Stickers.

Here are the four stickers that I came up with for my sticker project.

For these stickers I wanted to have a more funny side to it. The client wanted whatever we could think of, so there wasn't a limit on what we could come up with. Although you could say these aren't too creative, I still think what I came up with would sell.

As you can see we were limited to certain Pantone Colours, so we couldn't get too wild with those. Also, only certain shapes and sizes were allowed to be used. The yellow background on the "Warning!" sticker is in place of the orange/yellow reflective material, the stuff you see on contrsution vehciles and such. So, it'll look much better on that reflective material than on yellow.

I'm Going To Make Myself a Cartoon!

Had a nice little idea the other day. I'm going to try and come up with a "cartoon image" of myself. Once I get some free time I'll start drawing some ideas up...hopefully it'll turn out okay. I'm also hoping that'll my cartoon self will help get a little more attention drawn to my site, no one likes reality anyways lol.

Big Presentation Today

At 12:00 PM I have a presentation to do. Normally presentations of our projects aren't bad for me but, today we are doing it infront of the class AND actual clients. This'll be a little more nerve racking though. Our project was to create 4 stickers for International Nameplate Services following their specs and using a limited amount of colours.

The cool part about this project is that if our stickers are chosen, they'll be sold by INPS and we'll be able to make some royalty money. Wish me luck!

New Interactive Design Project

We received our brief today about our second project for my Interactive Design class. We have to create a slide show type of site using Flash. We did a tutorial a couple of weeks a go on how to do this, but this time we have to get the pictures and come up with our own design. Should be fun, I hope.

Completed Tutorial

So, I ended up starting and finishing the tutorial I had talked about earlier. Here is what I came up with. The above image is a preview, the link will take you to the actual coded layout.

I ended up changing the colours, as you'll see, and I also coded the template using good ol' tables. I know the big thing is to be using CSS, which IS part of this tutorial but, since I know only a little about CSS I just used tables instead and it worked out perfectly. Plus, I soon have to go to work so time is limited.

Full credit of the tutorial goes to Arthura at Pixel2Life.com for the tutorial.

If anyone is looking to create a simple, fast loading site, I suggest checking this tutorial out.

Thanks for reading!

A Great Web Layout Tutorial

I found this tutorial on Pixel2Life.com this morning on creating a pixel styled web layout, slicing, and then coding it. I've just started reading it and already love it. It has tons of pages and pictures but, it's better than having none at all.
After reading through it, and once I get some time of course, I'll have to take a go at creating my own web layout following this tutorial. I'll post my results later.

Nissan 350Z Using Adobe Illustrator CS2

For a project last semester in our Digital Illustration class we had to choose a vehicle of our choice and re-draw it/design a poster advertising the car. We were supposed to re-draw it to look as realistic as possible using what ever methods we chose, just as long as it was done in Illustrator CS2. Is used the gradient mesh tool along with just simple gradients and pen tools paths. I can say I'm proud of how it turned out.

My E-Cover Experiment

So after looking through some tutorials and such on how to create e-covers using Photoshop I did some experimenting. Above is what I've created. It's nothing exceptional but, I did find that Photoshop is much easier to use for doing this than Illustrator is. Using Illustrator you can use the 3D Effect and map art to create the 3d box, with Photoshop just use the Perspective Transform tool and it's simple!


The creation on the left side is my desktop screen shot turned 3D (yes, that's a wallpaper from carwalls.com) The other is just a simple 3D box with my name and site name. Thanks for looking! Let me know what you think!

My Favourite Graphic Design Related sites

It's not much of a list, but it's a list.

1.) Pixel2Life.com
Pixel2Life.com has been my favourite site for last couple of years to visit when in the need of help or just looking for something new to learn. Pixel2Life.com has an insane amount of tutorials available for any program you can think of. They also have a great forum where you can get help from the community, show off your work, criticize others', enter contests, and much more. I suggest checking out Pixel2Life.com.

2.) Good-Tutorials.com
Good-Tutorials.com is another favourite site of mine that offers a huge list of tutorials for Adobe Photoshop. They offer tutorials starting at animation all the way to web layouts.

3.) 13Dots.com
13Dots.com is a graphic design community. A blurb from their site, "... 13dots Community Website where we offer members and guests over 800 FREE learning tutorials, 600 plus quality learning files, Blogs, Topsites, Arcade, Gallery help and much more."
Sounds fun to me!
I'll admit I'm not very active at all on the site but, when and if I get time I'll go check it out so see what's going on. The first thing that drew me to 13 Dots was their contests. 13Dots.com will hold contests where you can win some great prizes. In their latest contest the first prize was a fully licensed copy of Portfolio 8 valued at $199.95, and the second prize awarded was a fully licensed copy of Suitcase Fusion valued at $99.95. Very nice.


So there's my list of Favourite Graphic Design Related Sites. I'm sure I will find more as I cruise the internet seeking knowledge, and they will be added to my list. Thanks for checking out Your Graphic Design!

30 Days of Wallpapers • GrooveArmy.com

As I was cruising around on MyBlogLog.com I came across the site GrooveArmy.com. They're having a "30 Days of Wallpaper" event going on. Everyday, for 30 days, they have a new wallpaper up for download. I thought this was a great idea and they have some awesome wallpapers available for download. Yes, I know I'm just advertising the competition bet hey, these are some cool wallpapers.

3D Photo Effect Tutorial by HV-Designs

Now, here's a cool tutorial I found over at HV-Designs where you take a picture of a vehicle or something similar (in their case they used a tank) and make it look like it's jumping out of the picture. Check it out!

My example is above using a picture from CallWalls.com. This site has some amazing wallpapers.

Ah, the Subaru WRX STI, someday you shall be mine.

Car Customization • Lowering Your Car

I'll be "Photo-Chopping" my car to look like it has lowered suspension. Here's the original.
1.) Open the image of your car, or just grab one from Google (be warned of copy write laws, don't claim a picture from Google to be your own).

2.) Grab the Lasso Tool and makes a selection of the car (but not the wheels) and the rest of the picture above that. See example.3.) After doing this (with the picture layer still selected) press Command+J (CTRL+J on PC) or you can go to Layer > New > Layer Via Copy. Using shortcuts makes it a lot easier and quicker to use Photoshop.

4.) It'll create a copy from the picture layer of the area you had selected. Hide the other layers to see the selection. Don't worry if your selection wasn't smooth around the wheel wells, this will be edited out soon. Just be sure that you have ALL of the car in the selection/new layer.

5.) Alright, get the Move Tool (black arrow at the top right of the tool bar, or just press "v") and be sure that your top layer is selected. Using the arrow keys keep pressing down until your car is in a good position and looks realistic. Don't go overboard or else your car will just look ridiculous in the end. You can see mine is now dropped but, there's a problem. We have to edit out all the extra stuff so it looks realistic. I've highlighted in mine where I have to edit.
6.) WARNING: Do NOT use the eraser to erase. As dumb as that sounds, there is a much better way to do it. It's called a "Layer Mask" and allows you to work non-destructively. At the bottom of the layers palette click the square icon with a circle in it to add a layer mask to your layer.

By using the Layer Mask you can "erase" parts of the image, but then can show them again if you want. You do this by selecting the Layer Mask (see above) and using the Brush tool. Black is to erase, white is to un-erase...if that makes sense. This may take a while to do depending on the picture you used. Here's my final...notice the lack of wheel gap? That's what you want! Hope this helps!
Remember to crop the image to get rid of the stuff at the top. Since you lowered the top layer down the layers below will show.

Here's a comparision so you can check it out. Or you could open up the original and the final pictures in new windows or tabs, which ever works for you.

First Tutorial • Simple Image Editing •

The first tutorial I am going to write for Your Graphic Design will involve editing an image in Adobe Photoshop CS2.
I have started with this photo of me,

and will end with this.

NOTE: Before I begin I must tell you that I'm going to assume that you have basic knowledge of Photoshop and will know what I'm talking about. I'll try to be as specific as possible though.

Alright, lets begin!

1.) Open your image, makes sense right?
The first thing I like to do is create a duplicate of the original picture layer. You can do this by right clicking the layer and selecting "Duplicate Layer." Another option is to click the layer and hit Command+J (CTRL+J on PC) as a shortcut.
Why are you doing this? By duplicating the layer you are working "non-destructively." This means that if you mess the picture up beyond any repair, you can simply delete it and duplicate the original picture layer again and start over.

2.) Now for the tricky stuff.
In your layers palette click the "Create New Fill or Adjustment Layer" button and select "Levels..." This is the area where I cannot help all that much. The best thing to do is take the middle slider and move it from left to right until the picture looks good, or as good as you can get it.

3.) Click the "Create New Fill or Adjustment Layer" again and select "Curves..."
This is even more tricky than using Levels and will take more time to get a good result. Practice makes perfect though!

You'll notice that there are now two more layers, this is what you want. By using those tools you can double click the little layer thumbnail and easily edit the settings.

NOTE: You can try the other features too if you like, some might help your picture out better than others.

4.) For my picture I duplicated the image again so I could edit out the fan blades coming out of my head.
I used both the "Clone" and "Patch" tools. Notice how you can still see the shadows though? I didn't feel like they were too big of a problem so I left them. It'll take some practice to get the patch and clone tool to work how you want it but, once you know how you can do some great things with it. I'm still not the greatest at using them but it's enough for this little project.

5.) This next step is optional but was needed for me. I had to create a new "Levels..." adjustment layer for my hair to appear brighter. I did this adjusting the levels to what I thought looked good for the hair, then painted black on the layer mask to "erase" everything but the hair.

6.) In the original picture you can see my skin doesn't look very nice. I fixed this problem by using the "Blur" tool. Just blur whatever areas you want so the skin will appear to be smoother. You can also use the "Gaussian Blur" filter then set the layer to "Soft Light." I won't go into detail since this is totally up to you to experiment with.

7.) So, in the end my picture looked like thisYou can see my hair is brighter, no more fan or vent, and my eyes are more blue. In the end this is what my layers palette looked like. Remember that your results will be different. It all depends on the picture you're working with and how you want it to look in the end. This is not a "do this, do that, step by step" tutorial but just some easy tips and hints that will improve your overall image after you do some tweaking.


Good luck and thanks for reading! Feel free to post any comments.

Welcome to Your Graphic Design

Your Graphic Design has been created by Sean Dinner as a place to come to get tips, tricks, and hints on using all of your favourite design programs from Adobe Photoshop to Macromedia Dreamweaver. I'll be showing and reviewing tutorials that alreadys exist as well as showing what I personally have learned and created in class.