WEB ART & DESIGN SPRING 2010

Sunday, December 6, 2009

Photo Uploading - Bianca DiMaio

My friend informed me about a website that allows you to upload your photos for display online. The only other site I have used for uploading pictures was photobucket, however, I found www.photoshop.com to be much more interactive and interesting to visit. This site seems like a professional way to showcase your photography online. It's interface is similar to iTunes and uses the idea of "cover flow" to view the images. I made an account on the site over the summer upon purchasing a new digital camera.

https://www.photoshop.com/user/biancatake1

Saturday, December 5, 2009

Make Photos Look More Professional - Jordan Schindler

Alright, so for my final project, I had to touch up a lot of photographs we took for promotional reasons to look more like glamorous Hollywood-like photos. Photoshop is an unbelievable resource, and has the ability to allow you to take even the dullest of digital camera photos and make it look like you've been shooting photos professionally all your life. I found this little tutorial extremely helpful, and being able to see a photo in the different stages helped me gage how to do my own work. Hopefully this will help you retouch your own photographs.

Friday, December 4, 2009

Flash Resources~Will Rowe

When I started working with flash I found the ActionScript 3.0 language to be easiest for me to use, as opposed to the graphical interface. I am a Computer Science major and know several different programming languages which ActionScript is very similar to. The great thing about flash is that there are two different ways of getting thing done, the graphical interface for those used to Photoshop, and the coding for people like me who like to control exactly how an application works. The best resource for me learning how to use Flash was Lynda.com. They have training for the graphical interface and the ActionScript language that use videos showing you exactly what to do on screen. I also used the help menu which links to the very extensive Adobe Help, forums, and ActionScript language database. Google is also a good resource, if there was something I wanted to do and could not figure it out, I just searched it and was able to figure it out. Finally, there are several sites that I have included below that have tutorials on how to do cool things with Flash. Enjoy Flash guys, it really is a powerful tool for the web!

Links:

Other Resources
Active Tuts+-Tutorials for making web applications
Chad and Todd-These guys work for Lynda.com and offer more tips and solutions for flash
ActionScript.org-This is THE site for everything ActionScript, definitely a wealth of information

Thursday, December 3, 2009

Create CSS file with Web Slices in Photoshop

For one of my web site assignments i was playing around with the web slices features in photoshop and found that when you create your web slices you can have photoshop make all the slices float in DIV tags insted of putting everything into tables.

To do this create your webslices in photoshop like you normally would but when you go to save for web and devices and you click save in the pop up box where you can name what you want to save your slices as: go to the setting drop down list and choose "Other..." from the choices.

Another dialogue window will pop up called 'Output Settings' will open in here you can change a multiple number of options but since the CSS is what we're concerned with you want to click on the second drop down menu from the top and select 'Slices'. Click the radio button that says 'Generate CSS' and in the 'Referenced' drop down menu choose 'By ID'.

Go head and click OK and name your file (if you already haven't) and click save. This will generate an HTML file and a folder called 'images' where all the slices are saved.

Next you need to open dreamweaver if you don't already have it open, and open up the HTML file that you just created. This is where is gets a little tricky because photoshop combines the CSS with the DIV tags all in the same HTML file. To separate out the CSS to add to a new or existing CSS file you want to open your existing CSS file or go to 'File > New' and in the page type choose CSS.

Now go back to the HTML file you created in Photoshop and click 'Code View' from the display type. In the page code you want to copy everything between the:

brackets, not including the , and paste the code into your CSS file. Then save it in your web site root folder. Now create a new HTML file. Between the '' and the '' brackets insert the code:


If your CSS is in a folder within your root folder your code should look like this:



The '../' denotes your main web root folder, where ever it is located locally. In the body of the new HTML page you just created copy and paste all the DIV tage code from your photoshop HTML file (the code between the and the tags).

Voila! Go back to "Design View" in dreamweaver and refresh your page. Everything should look the way you created it in Photoshop.

Side Note: for good measure you should probably put a container DIV around all your Div slices incase you want to do things like centering your web page within the browser.

Hope this helps!

Class, ID, Tag, Compound? CSS guide!

I was having a lot of trouble trying to figure out the difference between the different types of CSS tags and such when i was in dreamweaver, so after some searching on the web i found this:

http://www.digitalfamily.com/dreamweaver/css-tutorials/css-selectors-cs4.html

Hope this helps if anybody wants to know about the other types of CSS types

Branding vs Art - Zander Taketomo

I found this comment on the weight of branding vs. ones collection of work to be pretty interesting. Its from the opinion of an art buyer (Heather Morton.)

Heather Morton.

Wednesday, December 2, 2009

Use this website to creat a digital magazine layout -Colin Malone

http://issuu.com/
an example can be seen at
www.mcjawn.com

Web sites fit for an iPhone

Alright so I figured this might be useful since web browsing on portable devices is becoming more popular. As we all know our sites have problems as it is fitting on computer screens, I'm sure you can imagine the problems you might run into fitting them onto a tiny little screen like an iPhone. So we need to find a way to easily downsize our websites.

I found this site: http://epiphanet.com/services#iphone which offers servicing to downsize your site and make sure it fits right. However there is a price, and it's probably expensive, so we need to find alternatives.

I'll be honest, I don't know the alternatives, but I'm curious if anyone else does. There's also the possibility this won't be a problem for your site, it may just naturally fit well in a small screen. It's just something to think about though.

- Josh Nase

Tuesday, December 1, 2009

home pages

Here is what I'm basing my professional site on:

http://www.jimcarrey.com

I know that his stuff is a little out there, but it really captures his body of work and his personality, which I think is crucial in a personal homepage. The flash is way too sophisticated for our project, but it definitely provides some good ideas. I also added some other homepages I found on this year's Webby awards.

http://www.conservation.org
http://www.keithtyson.com
http://www.livehopelove.com

The last one is my favorite out of all of them.

-Melissa

Hi-Fructose Magazine

I found this website a couple days ago and it has some incredible imagery. It also has all sorts of different artsy and interesting information. I like the layout and the style that the site is portraying. Check it out!

http://www.hifructose.com/index.php?option=com_content&task=view&id=435&Itemid=56

-Kim Burnick