Flash & Media Idea

Design a Retro-Grungy website in Photoshop (In-Depth)

noreply@blogger.com (Rafael John) — Fri, 21 Jan 2011 13:13:00 +0000

In this tutorial we will be making a website with a grungy and retro feel. The concept is based on retro elements, grungy textures and a mix of brown and other dark colors that compliments well to the concept.

HERES THE FLAME-IDEA RETRO-GRUNGY CONCEPT

Our aim is to create a mock up for a web design to showcase both grungy and retro style, news and articles. The overall design both combines retro and grungy elements with retro fonts. The background will be a large vintage style wallpaper background image, and a header with retro elements.

OOPS!DOWNLOAD ALL THE RESOURCES FIRST

Because this is my first tutorial I will let you download all the resources I have used in zip format

Download it here

LET'S START

Create a canvas size at a typical large resolution. Our mock up features a large background image we want to accommodate even the larger resolutions used by 24-27 inch screens. Fill it with black and place the grid for our guide,be sure to align the grid at center. As it will also represent the contents.Show rulers and drag guides that matches the css grid's width. Our main content will be contained here.You can also lower the grids opacity.

Import the vintage style wallpaper, add a layer mask and use the gradient tool which is from black to transparent and start making gradients to fade out the backgrounds border.

Import the "Retro_Texture_by_WingsOfAHero.jpg" and place it on top of the our vintage style wallpaper. Set the layer mode to vivid light 34% opacity.

We are finished with the background select all the layers and group it(ctrl+g) and name it BG

Next

Import the texture2.jpg and align it at the center of our canvass,then duplicate it, be sure to leave about 200 pixels on the top for our header. This will contain our page's content. Erase its edges with default brush number 44 or any brush that can make the edges look torn.

*I have also shorten its width,you can also do this as long as both its left and right sides have equal spaces.

Choose the original texture2 layer and burn its edges and also make the edges look torn as we did in the previous step.

You can also make more copies and nudge them further to the right or left. Choose all the texture layer that you have duplicated and group them, name the group "content" and merge all the layers inside it.

*this is what it will look like

CREATING THE CONTENTS

Import the "news_texture.jpg" inside the content group, resize it at about 320x220 pixels and duplicate. Place it in the right side of our content page.We want it to be white so press ctrl+u for hue and saturation. Set the lightness to +48 or according to your preference. Also erase parts of its edges for the torn effect.

Then with the layer selected press ctrl + t right click and choose warp. Then add a drop shadow.

NEXT

Import "feature.jpg". You can also choose your own stock photos for this. Add a stroke on the picture. Double click the layer in layers window and on the stroke tab set the size to 1px ,position to outside and fill color to black.

ctrl click the layer to make a selection of the feature photo,then go to select > modify > expand and make it expand by 10 pixels. Then create a blank layer under the feature layer, select that layer and fill it with white.

Merge the feature photo with the white background. Duplicate it and slightly tilt the original, also add a drop shadow to the feature photo copy.

Then import the badge.png and place it on the lower right corner of the feature photo.

Adding the Navigation Bar

Import the nav.png and place it below our news section

ADDING LINK TEXT and CONTENT

Start filling the page with sample content. I made it 3 columns. I used a retro style font (romantisque)for the heading and navigation, and for the content I used verdana.

*dont worry it is included in the zip download

Its a bit too grungy at the moment so lets balance it by adding a heavily retro styled header.

Make a new layer above our BG group.We shall place the retro elements here, all the brushes I have used are included in the zip file. I'll let you work on your own on this one. Let your creativity work here.

*Here's what I have made,I also placed some brushes in other layers so that they overlap. You can also check deviantart for other cool retro brushes.

Heres the finished design. I hope you learned some few tricks with this,I have also organized our workflow by grouping certain elements according to category for better use, this is actually my first tutorial. So please comment because I need your feedback and follow if you like it.

Fade in/Fade out moving movie clips in Flash

noreply@blogger.com (Rafael John) — Thu, 20 Jan 2011 06:10:00 +0000

This is a step by step tutorial for fading moving movie clips in Flash.
In this tutorial we will be fading in or out moving objects in flash using a simple technique. You are sure to learn new tricks in this flash tutorial. Fade in and fade outs are common in flash web, well, lets make it fade while moving.

Tutorial Overview

Completion time: 20 mins
Difficulty level: Advanced
Programs used: Adobe flash cs4 or lower

Step 1
We need to make the canvass. Choose any dimension you want.

Step 2
In my example I've used a simple rectangle which I animated to fade in while going from left to right.Use the rectangle tool(R) and draw a rectangle.

Step 3
Use the selection tool(V) to select the rectangle(both its fill and border).

Step 4

Convert the selected rectangle into a movie clip by pressing F8.I named my movie clip "rectangle".

Step 5
In the timeline, click on frame 20(you can also change this).
Then make a key frame by pressing F6. And create a classic motion tween by right-clicking between frames 1and 20. And choose Create classic tween.

Step 6
Lets animate, step a:start by pressing frame one in the timeline.
step b:And move the rectangle to a new position which we can think of as point a (the faded rectangle is the previous position which is the same in frame, 20 which we can call point b).
*Remember that motion tweening needs two different position of the same object(namely point A and B) for it to render frames for it. If you tween an object that has the same position in its point a and b flash will continue to tween it. But it will not move.

*this is what we have at the moment

Step 7

Here's the cool part, remember that we want to fade in the rectangle as it moves.

Again, go to frame one and click(this is important) the "rectangle" movie clip.

Be sure that you are in frame one and have selected the rectangle movie clip.

Then show the properties window by pressing CTRL+F3.

And changing the Color Effect to Alpha. I set the opacity at around 50%.

*This means that at the start of the the animation, the rectangle will have 50% opacity and tween to be 100%. Making it fade in.Also no need to change the color effect of the rectangle on frame 20, just the rectangle in frame 1.

click here for larger image

Final Result

How hot is that?
In this flash tutorial we have learned that you can tween more than one attributes of an object.
In our case its the position and opacity. Feel free to apply this technique to your animations and experiment on what other attributes you can tween. Now thats hot -flame

Was this tutorial helpful? follow me on twitter @ryujinxryuk and follow my blog.

Im a deviant...am I unacceptable?

noreply@blogger.com (Rafael John) — Mon, 22 Nov 2010 11:39:00 +0000

Deviant:
One that differs from a norm, especially a person whose behavior and attitudes differ from accepted social standards.
Hell yeah I wanna be a deviant

Well I've been a member of deviantart for about 7 months now, and I can say that it did not just exposed me to really cool art but also made me improve my creativity and have my own style, I mean I've never in my life thought that I can do this arts and with just my mouse..hehehe. Its like the Picasso was awaken inside of me.
Ive never been inspired to do digital art like this, the whole deviant art community is overflowing with art,
drawing, poetry sculpting and all you can think about,,,,,

NOT JUST ART BUT EDUCATIONAL TOO!
Well? where do you think Ive learned my digital art knowledge? Of course in deviantart too, its full of tutorials
that suites your specific needs and the cool thingy bout it is that deviants who post tutorials really make it creative so we wont get bored, its like a tutorialart if you will, thats what i love with tutorials in deviantart.

Well theres a secret why I joined deviantart..I said secret! but Ill post it soon,
Is it true that left handed people are really good at drawing? Im not saying Im good ,its just that Im left handed too..haha...and also take not that the art Ive been submitting to deviantart were all digitally made with mouse *you gotta love the mouse* and I use my mouse (yes your right)
with my right hand....lol (ambi dextrose?)

hmm how about I make a poll:
which are better at drawing:
LEFT HANDED or RIGHT HANDED....nah....we all are great artists in our own creative awesome unique ways! long enough?OOPS ive heard theres a man in India who draws with his feet so I need to shut up now.

also if you wanna watch me in deviantart, hmm theres not much but there would be something,,,
my deviant art profile thingy

deviantart member since april 2,2010

New kid on the blog!

noreply@blogger.com (Rafael John) — Mon, 22 Nov 2010 08:21:00 +0000

helo!!!!
Well I guess im a new guy on the block here,,, or should i say on the blog,,hehe
hmm,, topics are more on art,cause im bit of an artsy pants here..hehehe

ENJOY!