Portfolio Site... FINALLY!

Lo and Behold—a portfolio site! It's been too long but it's finally up. Even more exciting, it is also setup for mobile devices. Essentially, it detects if you're on a mobile device and forwards you to a site laid out for mobile phones. Also, it's good for my iPhone users because they can't view my Flash website, but they will be able to view the mobile version.

Check out my portfolio site at KORYFENTON.COM

Here are some screen shots:

Mobile Site Screenshots:

Peterson Wellness Center

Here are some digital comps I did for a company here in Logan called Peterson Wellness Center. Every freelance job is a new learning experience. I learned a little patience with this job. Ha! The client is an awesome guy and very easy to work with. The problem was that I was too lax in pushing to finish the site and he was even more lax... So, things didn't get done nearly as fast as they should have. Totally my fault.

A little insight, the company is a homeopathic treatment center. For those of you who have a strong distaste for doctors, this is the place for you! Ha! Anyway, the client ended using the purple and pink comps at the bottom. I've never been a fan of purple but those were the company colors... couldn't do much to change it... even though I tried.

You can check out the final website at www.petersonwellnesscenter.com


























































Last set: Very subtle changes

Portfolio Site? For Real?

Yes, I've been working on my portfolio site! And it couldn't come at a better time! I've had so many people ask about seeing my work and I've only had this blog to show them. Don't get me wrong- I like the whole blogging thing but it doesn't scream, "take me professionally!" So, check it out! There is still A LOT of tweaking to be done but this is just my rough site. I will post the real site on koryfenton.com as soon as I finish. Until then-

http://www.spring10.graphicinterfacedesign.com/students/kfenton/proj3/

Here are some screen shots of the flash site.

Don't Eat the Yellow Snow

Here's a site I did that is all about snowboarding. It was a lot of fun but A LOT of headaches. I normally keep my sketches in my designated web design sketch book, but for the life of me, I cannot find the sketches for this site. Here's a couple screen shots. Check it out-

http://www.spring10.graphicinterfacedesign.com/students/kfenton/proj2/site.html

Parallax Effect in Flash

So, here's a parallax effect done in Flash that I need to do for school. This tutorial uses the 3D effect built into Flash CS4.

What you’ll need to know:

-Basic knowledge of Photoshop and layer masking

-Basic knowledge of Flash

What you’ll need:

-Adobe Flash CS4

-Adobe Photoshop (any version)

Click here to get the source files. It includes:

-Adobe fla and swf files

-2 PNG files

STEP 1

Break photo into 2 sections:

· Background

· Foreground

Open the photo in Photoshop and make 2 duplicate layers of your photo. Now turn off the visibility on the bottom layer (that’s just there in case you mess up) and rename the top layer “foreground” and layer underneath “background.”

The best way to remove the foreground from the background is to use a layer mask and paint over the areas you want to remove. To do this, select the foreground layer and click the layer mask button.

Then get the brush tool, select the color black, and start painting what you don’t want to keep. If you accidentally paint over an area you want to keep, simply select the color white and paint over the area you want back. I like to use the pen tool to accomplish this, but you can do it however you want.

You should end up with something like this.

STEP 2

Now turn the visibility off on the foreground layer and select the clone stamp tool. This part is a little time consuming, but it doesn’t have to be perfect. The idea is to replace the foreground with what would be in the background. Use the clone stamp tool to work your way into the picture until you have something that looks like this:

Like I said, it doesn’t have to be perfect. It’s very obvious that this has been cloned.

STEP 3

Now you’ll need to export your pictures using “Save For Web.” Make sure to save your layers individually. So, turn off the visibility of whatever layer you do not want to save. The best way to save your foreground picture is to save it as a PNG-24 because it will retain the best quality while giving you transparency. You can save the background as a JPEG if you want because it doesn’t have transparency. Here’s what it should look like:

STEP 4

Open flash, create a new document at the same size of your picture, and set the frame rate to 30 fps. THIS NEEDS TO BE SETUP FOR FLASH PLAYER 10 because it will be using Flash’s 3D effects.

First, import your background picture to the stage (cmd+R).

Then, convert it to a movieclip.

Now under “3D Position and View” change the value of “Z” to 1000.

The picture gets smaller, but technically we have not scaled it down… we’ve just pushed it back into Z space. Now scale the picture up to fill the stage.

STEP 5

Next, import your foreground and follow the same steps as the background picture. However, change the value of “Z” to only 300. Then scale the picture as needed until it matches the original. It doesn’t need to be perfect but pretty close.

STEP 6

Select both movieclips (your images) and convert them into a movie clip (CMD+F8). You should now be able to drag the movie around to see the effects.

STEP 7

Now it’s parallax time. Select the new movieclip you just and decrease the “Z” property to roughly -300.

Next, right click on the movie clip and press “create motion tween.” Then give the time frame a good distance. I used 250 frames. On the last frame set your “Z” property back to zero. I set my motion tween ease to 100 but that’s up to you.

Viola! You’re done. There is plenty of ways that you can change this or use it interactively in a flash site.

Here's what the final product looks like.

Intellectuals are too Sentimental for me

So, here's a website I created for my friend's clothing company. It's really just a joke but I want to thank my good friend Paul for being such a good sport/actor!

This really is a clothing company but if you'd like to see the REAL site, go to www.sentimentalclothing.com.

www.spring10.graphicinterfacedesign.com/students/kfenton/proj1/sentimental.html


UPDATED 5.2.10

So, this semester has been crazy and I never updated my sketches... so here they are!

Going Out with a Flash!

Wow, the semester is finally coming to an end. At one point I didn't think it would be possible. Well, I just wanted to update my last project for Graphic Interface Design. This flash site was built for my band. It's not exactly how I would like the end product to be... but it's getting there. So, here is the very beginning of this process--what the hell was I thinking?














Then I started boxing stuff up...















But as my teacher pointed out... it was too lame. I needed to break a little out of the box. After all, this is a FLASH site! So, here's what I came up with--much better.














Here's the bios section. Look at Paul with his sweet mohawk--what a bad ass! Not so much anymore... sorry Paul if you're reading this.. Just a note--the plane with the bombs was something I've always wanted to use but could never get it to look good. Well, I've gotten a little better with Photoshop this semester (thanks to my digi photo class) and used some nice blends that made it work with out being too overpowering. I'm pretty happy with the design.














Oh, and here is the dog tag I used to make the buttons. Then I photoshoped the crap out of it.













Anywho, that's it! Feel free to check out the real site at http://fall09-2.graphicinterfacedesign.com/kfenton/flash/chucks_site/chucks_updated.html

V for Vendetta

So, here's my final animation for the V for Vendetta clip. There's so much more I wish I would have done but after working on it for hours and hours I just don't have will to look at it any more. Enjoy!

Animated Typography

So, we have to do an animation for my Graphic Interface Design class based on a 30 second audio clip from a movie. Needless to say, it's kicking my trash. The first part of this assignment was to design a poster that would reflect the overall feeling of the animation. Well, my audio clip is from V for Vendetta and here's what I came up with:




















I'm pretty happy with the final result but there are a few things I'll change for the animation. I'll try to keep this up to date during the process

HALLELUJAH!

Thank the good lord! I'm finally done with my HTML site for Graphic Interface Design! It's uploading as I type. I thought I would keep this more up to date during the process but there was much to update... after the design was done, it was just a bunch of busy work.

So, here's some info about the site:

I originally started designing this site for a fake concert venue but changed it to a local venue here in Logan called Whysound. It was much easier using their content instead of making up my own. Luckily, the owner of Whysound was nice enough to let me into the venue and take some pics of the venue for the site. The concert pictures were also taken by me from previous shows that my band had played. Overall, I'm happy with the site because I accomplished what I set out to do. The inspiration for the design of this site was my old Crate GFX212 guitar cab. I wanted it to say "music" without being too cliche... So, I used the curved boxes to give that good ol' "cab feeling" and the background texture was derived from the fabric on the front of my cab. So, hopefully it says "music" without being too lame.

Well, if you're interested in what I've been working on check it out at http://fall09-2.graphicinterfacedesign.com/kfenton/html/whysound/

Here's kinda of what it looks like...

Image Resizing Tutorial

Here is an assignment I had to do for Graphic Interface Design--a tutorial on resizing images in HTML. Check it out if you're interested at all.

http://fall09-2.graphicinterfacedesign.com/kfenton/tutorial/korys_tutorial/tutorial.html

As Promised...

So, here's a start. I'm a little late in doing this... but here are my initial sketches for the website I'm working on for Graphic Interface Design and then products that followed. This originally started as a website for some fake venue but then turned into a website for a local music venue. Fortunately, they nothing about this. Mwah ha ha! (evil laugh) Moving along...

Step 1: My first sketches






Step 2: Bigger sketches



















Step 3: Bring on the photoshop! Here are my 3 variations of the website













































My favorites were 1 & 3. I've since made some variations to combine elements from the two but that will have to wait for another blog.