Sugar Sugar Rune, Project 3

I’m starting my third “Sugar Sugar Rune” project.  The drawings from that manga are sooo very lovely, that I can’t help but to want to color them in.  Here’s the image I’ve chosen for this project and the cleaned up line art.

For this one I want to push the 3D paper look.  The image already suggests that, now I just have to punch it up.  I’ll post my daily progress.  The first thing is to figure out how to divide the image in different foreground and background planes.  I’m itching to play with the shimmer in the dresses!  I love punching-up other people’s artwork .

Getting Closer on the Portfolio Homepage

I felt the center panel looked way too plain, so I added a picture.  This drawing of cat contains a big part of my spirit — playful and a little wicked ;p.  It also reinforces my strengths as a designer.  I’m learning to embrace my cute affliction, so I feel like I should let it loose.  I feel that this is getting closer to something  I like and it will do for now so I can get to doing other parts of my portfolio site.

Moving Forward with Portfolio Homepage

I’m finally moving forward on the homepage for my porfolio.  Here’s what the current Mock-up looks like:

The frame is composed of very small tiled images, so text I turned into an image to preserve the effects, and two Flash elements.   Here’s a link to play with the left menu Flash Element:

Link (Click away, but it’s not connected to anything yet.) I will do a a couple of little Javascript rollovers for the Contact me link and the link back to omarissister.com.  I could do the same thing for the Flash elements, but I’m a little worried about responsiveness and I can make the elements look “slicker” in Flash.  I’m still not happy with middle, but I have the text I want convey there as a place holder.

I decided not to fight my innate style and go with the colorful construction paper/childlike arts and craft look.  I suppose, I really would like to design websites that cater to the young and folks that like cute rather than design sterile looking “businessy” website. Still, though, I don’t want to be pigeon-holed.

After this, I need to redo my translation website into something with more punch, pink, and playfulness.  I also need to accommodates my scanlations.  It would be nice if I made an embedded reader so folks can’t easily download and then upload my work without my permission.  Plus, it will be easier for the folks that visit my website.

Sigh … I’ve got a lot of work to do.  But it should be all down hill with respect to my portfolio once I get the frame into HTML/CSS.  Because the site will be modular, I can then just plug in the different elements I’ve already made.

Fireworks has been a great tool to Mock-up the websites and to create the graphic elements.  It has some nice file saving features that allowed me get the images into very small file sizes (some of them are less than 1KB!!!) while balancing image quality.  I like it for this purpose more than Photoshop.

Adding “Snap” to Flash Buttons

I experimented today with ways to add a little “pop” or “snap” to my buttons.

Link to “snappy button experiment”

The image buttons are live, but the download links are not connected yet.  However, you can see those links react when you roll-over them and click on them.

Here are some other buttons I made over a year ago.  Not so “snappy” hmm…

Link to past button effort

I added “snappiness” to the other galleries I just completed.  So what did I do?  I slightly dscreased the spread the drop shadows and I slightly scaled down the images on rollover.  The changes are no larger than 3-pixels for each button.

Ouran Wallpaper: Accidental Kiss

Here’s is a wallpaper I made of Tamaki and Haruhi’s accidental Kiss. I decide to go with the feel of ice-cream. I don’t really know why — perhaps because it’s summer and ice-cream would be great right now.

Download:
1920×1200
1600×1600

Wallpaper Portfolio

I’ve changed my mind again on Flash.  After going through some of the preliminary work, I found that it would be very difficult to do the wallpaper portfolio in JavaScript and have it look like it is uniform with the other parts of my portfolio.  The main sticking points are the special effects and keeping the file size reasonable.  Basically, to keep the drop shadows and the glow in JavaScript, I would have to use PNG format or I would have to make one big JPEG of the page and display in slices to maintain the gradient in the back ground.  The PNG file sizes are not practical and the slices for variable images would be very hokey and difficult to pull off cleanly.  So, I’m leveraging the web design porfolio Flash gallery and merely exchanging the images.  I hope to be done by the end of the week.  I will only be able to squeeze in about 1-hr/day this week because I’m swamped with real life.  I still may add some variety by making the menu bar horizontal.  We’ll see … Actually, it’s not that bad adding images in ActionScript.  It’s mainly copying and updating file names.

As for JavaScript … well, waiting for CSS3 for the special effects.

Mock-up Gallery for Displaying Wallpaper

Here’s what I have so far.

Most of the wallpaper I make is in widescreen format, so the vertical menu would not work as well as a horizontal menu.  The question is which technology shall I use.  I can make effects easier with Flash, but if I use Javascript, then I can make it more extendable and automated.  I think in this case, I will try the javascript approach and have some fun playing with visibility.  For selection, I will do a simple border.  It should be a nice exercise.  I will start planning the code tomorrow.

Flash for Web Design Gallery Done

I finished the basic flash gallery with scrolling menu.  I had to play some trickery to prevent the user from being able to access the menu until the swfs are loaded.  I tried to externally load all of the swfs, only to discover that it would be a pain to access the buttons within the menu swf.   So I took the cheese-mo approach and “hide” the menu using the alpha filter until the screen shots are loaded.  Heheh … boneheaded, but effective.  I haven’t made a load screen yet, so bear with it as it loads.  Here’s a link to the swf.

Link

I learned a lot about the limitations of ActionScript doing this little project.  The main limitation is that there is no “evaluate” function in ActionScript 3.0.  I guess this has to do with ActionScript compiling to something like an executable.  It just can’t make stuff and run it at runtime.  Therefore, I couldn’t use loops and arrays to automate the creation of the buttons and event handlers.  I’ve decided to make a basic JavaScript version of this for greater flexibility.  To be honest ~6 is my threshold before I want to automate the process.  It’s also a pain in the butt trying to access elements from swf to swf.  Anyhow, I’m glad I did this, so now in the future I just have plug images and swfs into it and I can change the appearence of the gallery within the Flash IDE.

Making Progress on Portfolio

Here’s the start to the the scrolling menu bar for my portfolio.  I’ve got the basic button interactive cues and some primitive movement.  I will work tomorrow on making the scrolling feel more responsive.  For now, I’m happy that it moves as intended.  It looks kind ugly because it’s not embedded in a webpage.  Anyhow, give it a go!

Link to SWF

I added some acceleration this morning.  It’s “zingy” now.

Link to SWF with acceleration

I haven’t decided whether to keep the acceleration.  It’s easy to change the parameters, though, to make things less jerky.

Striking a Balance

Thinking about my porfolio, it’s tough to strike a balance between utility and “Flash.”  I would like to show off some of my abilities, but at the same time I want it look natural and not forced.  This is tough, though, because if I don’t highlight the technology will folks looking at my portfolio notice?  In the end it should not be strictly about the technology, but rather does it get the job done and look nice doing it.  There are ways of strictly showing skills through demonstration and I think that’s what I would like to do.  It looked to me to be a good way to show skills when a designer hasn’t had any customers.  Still, though, I think many people get hung up on the technology without considering whether the technology is best tool to do what needs to be done.  There are several ways to “skin” the same “cat” in web design.