Creating a drop-down (pop-up) menu in Fireworks

•April 9, 2014 • 3 Comments

First, create a new canvas depending on the shape you want your menu-bar to be (I did a horizontal one).

– Select the “text” tool & type out the options you want to appear on the main menu (i.e. – “locations”, “about”, “menu”).

Screen Shot 2014-04-08 at 8.46.26 PM

Next, create a “hotbox” or a “slice” around the menu option that you want to drop down (I chose “menu):
Screen Shot 2014-04-08 at 9.55.26 PM    Screen Shot 2014-04-08 at 10.07.21 PM

Then you want to make sure the hotspot (or slice) is selected before clicking “modify”–>”pop-up menu”–> “add pop-up menu” :

Screen Shot 2014-04-08 at 8.46.54 PM

…Once you’ve added each of the items to your drop-down menu, you can also add sub-menus to the drop-down by clicking the small, blue square-button (the one to the far-right in comparison to the “+” and “-” ) .

Screen Shot 2014-04-09 at 12.37.15 AM

Once you’ve inserted your text (and links, which I didn’t have because there was no menu to link to), you can also adjust other elements of the menu through the other tabs in the “Pop-up Menu Editor”:

Screen Shot 2014-04-08 at 8.52.20 PM

 

 

Finally, I  think it’s always really useful to “Preview in Browser” so you can see what it would look like once it’s live on your website!

Screen Shot 2014-04-08 at 9.01.09 PM

 

 TA – DA!

 

Screen Shot 2014-04-08 at 9.02.39 PM

 

By Olivia Combemale

 

How to Insert Music into a Podcast (Audition)

•March 30, 2014 • 1 Comment

Hey there!

So, as I’ve been working to perfect the first podcast for my blog I’ve come to the realization that a music blog’s podcast kind of requires music. So I wanted to share a quick tutorial on overlaying your podcast with music, and how to add extra “silence” if you want to share a sound without taking away from the podcast itself. This tutorial is written for Adobe Audition.

The most important part of inserting music is really listening to your podcast. I can’t stress that enough. Do not insert music just to insert music, use it as a way of enhancing your podcast and giving it that little bit of extra something, and be conscientious of incorporating appropriate sounds in relevent spots.

Within your multitrack session you’re going to initially need to select the main portion of your podcast (which in my case is spoken) by double clicking the appropriate track.

From there, to insert silence, you’re going to click where you want to insert silence within the track so that the spot is identified by the time marker. You’re then going to want to select Edit > Insert > Silence, as seen below.

Image

After choosing to insert this silence, you’ll have to determine how much silence is necessary. Listen to the sound byte or clip you’re looking to insert, and then choose the appropriate amount. For the sake of this example, I’m selecting 10 seconds.

Image

Now you will have a break of silence in the middle of your podcast, as shown here:

Image

You’ll then open the sound byte you’re looking to insert. I highly recommend adding a fade in/fade out for a more natural insertion of the sound. This can be done by dragging the little boxes within the top downward until a yellow line appears, as displayed here:

DIYBlogPost4image

Image

From there you can amend the fade until it is appropriate for your piece. You’re going to want to go back to your multitrack session and ensure that your sound byte is located appropriately within the greater podcast, and that it is in line with the silence you previously added.

Image

There you have it; you’re now able to insert sound bytes into your podcast! Also remember to go back and listen to your podcast to ensure the flow is correct!

– Julia

How to Create a Drop Down Menu

•March 30, 2014 • 1 Comment

On a website with many different pages and collections of links, it is helpful to organize these additions by using a drop-down menu to slim down the site and improve its efficiency. Creating a drop-down menu involves only a few simple lines of code, but it can make all the difference in the layout of your site.

You want to start your code with a <form name=”generic drop-down menu”> tag, changing what’s inside the quotation marks to whatever you want. This will define the form name for your reference later on. The <‘select> and <‘/select>tag defines the list as a list of options where one specific option must be selected to continue.

Your code so far should look like this:

<form name=”drop-down menu”>
<select>

</select>
</form>

The next step is to add in the various options for links that you are going to have on your site. The basic form of that is as follows:

<option value=”URL”>Listed Item</option>

Obviously you want to change the URL portion, and then decide what sort of hyperlink or abbreviated form to write in the “Listed Item” spot. This is what will be displayed on the list on your site, so for example, to make the list I have below, I would edited this spot to contan the word “Cats.” You can then copy and paste this to include more options in your list to account for however many list items you have.

After this, simply close your tags and your drop down menu will be created. Without any style elements added, the select drop down menu will look like this:

 

Image

We are still not done, however, as we need a ‘confirm’ button to select whatever link is in the menu. To add this, the code is:

<input type=”button” onClick=”location=document.jump.menu.options[document.jump.menu.selectedIndex].value;” value=”Select”>

After adding this button in, your menu will look like this:

Image

You can spice this up with CSS elements or in-line editing if you’re savvy enough. Enjoy the menu!

How to remove a person/image from an image in Photoshop

•March 30, 2014 • 1 Comment

You set your camera to the perfect angle, you have the lighting just right, everything is ready for you to take your perfect photo. Three, two, one, “snap”. At the very moment you take your photo, however, a pedestrian walks directly into the center of the frame. Great. Your picture is ruined.

Don’t despair! Thanks to Photoshop, you can erase that pesky pedestrian and get the perfect picture you imagined!

Here is my original photo with a pedestrian walking right smack in the middle of the picture:

outside1

 

Select the “lasso” tool and trace the outline of the image or person you want to remove from the picture.

Screen Shot 2014-03-30 at 1.32.21 PM  Screen Shot 2014-03-30 at 1.32.57 PM

Next, click the “spot healing brush tool” and be sure to select “content aware” in the tool menu box.

Screen Shot 2014-03-30 at 1.36.40 PM  Screen Shot 2014-03-30 at 1.36.46 PM

Now take your curser and draw over your selected portion. You will see the image/person be covered in a gray translucent color. When you let go of the mouse, the gray translucent color will disappear and so will the image/person you wanted to remove. It will look like this:

Screen Shot 2014-03-30 at 1.40.17 PM

To clean up the blurry portions of the image, reduce the brush size and go over the blurry portions little by little until you are happy with the finished product! Here is what the final version of my image looks like:

Screen Shot 2014-03-30 at 1.43.52 PM

Perfect! No pesky pedestrian in sight!

– Amelia

I’ll just sit the next couple of plays out…

•March 30, 2014 • 1 Comment

So I’ve been overhauling my site lately because I’d managed to make it look more like the world’s worst played game of Tetris (i.e. ridiculous shapes strewn all over the place without any rhyme or reason) than a well thought out and designed website.

Image

I decided that I wanted to have a weekly post on my topic placed inside of its own preview div on my homepage. However, this turned out to look pretty crappy in its initial iteration:

Image

My spacing here leaves much to be desired. After reviewing the potential reasons for this, I realized that in my infinite wisdom, I’d left out a critical piece of code in my external style sheet…

Image

I added a margin of 3.3% and reduced the width of each box by 2%. An example of the new code is below.

Image

Yeah, the margins really helped this whole page look marginally less awful:

Image

You may have noticed that I didn’t use a table to get this stuff done – whether this was advised or ill advised, its how it went down. I used a “parent div” that contained a “left,” “right,” and “center” div – I thought that a table would end up being more complicated in terms of getting the right spacing, and this solution worked out well. To see how the exact code looks, check out the screenshot below.

Image

Following these steps can help you create more reader friendly spacing and layout that makes the site less off putting to the user.

How to Change the Speed and Duration of a Clip in Premiere Pro

•March 30, 2014 • 1 Comment

Does this matter? Do people even need to use this?

 

Being able to change the speed of a clip is an important tool to have when video editing. This enables you to speed it up so that movements are fast and choppy, or slow it down so that movements are long and drawn out. The most famous example of this is the tried and true slow-mo run across the finish line shots. Another example of this is also seen in tv show comedies where characters are on some sort of wild goose chase and they are running everywhere.

Easy as Pie

To change the speed of the clip, open your premiere pro file and highlight the clip whose speed you want to change. Right click and select speed/duration.

Image

 

A box will pop up and give you options. You can make the speed change through a percentage of what it was or also change the duration by frames.

 

 

Image

 

Different Ways to Change the Video

To change by percentage, type in the desired percentage.

To change by frames, type in the desired frames you want. Note: frames do not equal time! Videos have certain designated frames per second that are automatically detected in Premiere Pro. Use that number and multiply it by the number of desired seconds.

 

For example, I know my frames per second are 30 and I know I want a clip 30 seconds long. Therefore, I will multiply 30×30 to get 900 frames for my clip. Remember, if you choose a number of frames lower than what you have, the video will speed up. If you choose a larger number of frames, the video will slow down.

 

Remember, this is important when you want to adjust the time or distort the video itself. This is not the equivalent of cutting a clip.

Questions? Comments? Feel free to ask or comment below!

 

-Cat

How to convert MP3 to OGG using online conversion tool

•March 29, 2014 • Comments Off on How to convert MP3 to OGG using online conversion tool

You may want to convert your MP3 audio files to OGG so that they can be well received on every browser.

To do this, I used a free online conversion website called zamzar.com

The instructions on the website are easy to follow and the site e-mails you a link to your OGG audio file as soon as you upload it.

To begin, upload your selected file to the website.

Image

Image

 

 

Then select which file format you would like to convert it to

Image

Next, enter your e-mail address

Image

Then click “CONVERT”

Image

 

Once the link has been e-mailed to you, download the file and use it in your code. Good luck!