project 3 vanessa

Great website on history of graphic design

Thought you might find this interesting:

http://www.designhistory.org/


Viveka

Hi, sorry, the title for my Proposal below should have been Project 3-Pauline. thank you

Project 2 Proposal-Pauline Huang

DIS 2105 Project 2

Pauline Huang

Proposal

The idea of controversy

Controversy is a dispute, especially a public one, between sides holding opposing views (Free dictionary, 2010). It is also a debate; discussion; or agitation of contrary opinions (dictionary, 2010). So with this definition, I will look at two groups who mostly have different/ opposing perspective about something.

Celebrity dressed in fur as fashion VS Animal’s right supporter

Since the rise of the world of fashion, fur wear plays such a prominent role on fashion world and precisely become a trend among celebrities. For them, it can be a symbol of luxury, beauty and glamour. However this idea of wearing fur as beauty or fashion contrast with the idea of animal rights activist/supporter group who treats it as an unfavorable action (violence, abuse) towards animals, for example PETA (The People for the Ethical Treatment of Animals). PETA is a non-profit organisation and also the largest animal rights group in the world. Their argument based on research/evidence for example:

• Each year, more than 40 million animals are killed for their fur.
• To kill animals without damaging their fur, trappers will strangle, beat, or stomp them to death. Animals on fur farms are gassed, poisoned, electrocuted, or have their necks snapped.
• It can take up to 40 animals to make one fur coat.

Some celebrities such as Madonna, Paris Hilton, Kanye West, Mary-Kate and Ashley Olsen being targeted for supporting the violence by keep wearing the animal fur. PETA also use high-profile celebrities like Charlize Theron, Pamela Anderson for example to speak out against the torture and murder of animals in the name of fashion. I pick this case of controversy since I am interested with their different strong arguments about something they believe and in addition it is not only involving 2 groups but wide public and invite them to think and see about this opposing idea.

The idea for Photoshop Project

I would like to make it balance (between the groups) on the Photoshop. So mainly for now, I am thinking of putting it on opposed side (right and left for the two opposed groups). I will use on selection tools, layer mask, set the color, contrast, and other tools to balance the both sides color/bright.

Some celebrity that wearing fur and being targeted by PETA

1) Madonna

PETA singles her out as their worst dressed celebrity of 2009. The animal rights activists claim she is the biggest fur offender.

2) Mary-Kate and Ashley Olsen

Mary-Kate and Ashley Olsen often seen adorned in fur at high-profile events, have been nicknamed the Trollsen Twins by the animal rights organization.

3) Kanye West

Kanye West and Amber Rose attended the Louis Vuitton fashion show in Paris. Kanye against the critique of PETA by saying that clothing is a choice.

Campaign against fur wear

 

Danity Kane Anti-Fur Naked Ad for PETA

References

http://www.fanpop.com/spots/danity-kane/images/2588959/title/danity-kane-anti-fur-naked-ad-peta-photo

http://www.fashionising.com/trends/b--Fur-fashion-trend-fur-coats-fur-clothing-899.html

http://www.gossipboulevard.com/2008/06/09/peta-continue-trashing-olsen%E2%80%99s/3978/

http://smartsexyrichcrazy.com/tag/kanye-west-wearing-fur/

http://www.treehugger.com/files/2009/03/madonna-worst-dressed.php

           

http://www.xiongdudu.com/image/Anti_Fur/7

DIS2105 - wacky photoshopping

http://effects.worth1000.com

DIS 2105: Project 3 Brief

Project three brief: Compositing – Advanced techniques
Briefing date: 13 September
Due date: 18 October
Proposal due: 20 September

Produce one finished artwork, utilizing advanced compositing techniques.

Your compositing skills should now be significantly developed. This project involves combining your technical and conceptual skill to create a finished artwork.

You will source your own images (through research or your own photography), ensuring all the source material is high resolution – your finished artwork should be high resolution, and will be printed in the final week of semester.

The source material will be completely decided by you, however, I am providing you with a starting point or theme:

CONTROVERSY

Definition from wikipedia: controversy is a state of prolonged public dispute or debate, usually concerning a matter of opinion. The word was coined from the Latin controversia, as a composite of controversus – "turned in an opposite direction," from contra – "against" – and vertere – to turn, or versus (see verse), hence, "to turn against."

Interpret this theme as you like, however I need to see evidence of your concept development both in your journal (research and experimentation) and in a ‘rationale’ document which you will provide with your finished artwork.

You are required to present a proposal next week (20 September).

OBJECTIVES

1.    To further develop skill with advanced techniques in Photoshop. particularly utilizing selection, colour management and masking tools.
2.    To develop an artwork in response to a theme, through brainstorming, research and experimentation.

CRITERIA

1.    Your proposal is due next week – this should include some initial research and sketches.
2.    You must use Photoshop as the primary authoring tool, however you are permitted to use Illustrator also, if vector artwork is to be included.
3.    Your finished artwork must be high resolution – approx a3 size @ 300 dpi.

SPECIFICATIONS

Requirement: Produce one finished artwork
Format: Portrait or Landscape
Size: A3 (or thereabouts) @ 300 dpi
Presentation: Jpg files posted to the blog
Final Composition: PSD files
Rationale: 250 words explaining how you reached your final artwork.
Evidence: Your journal mark (10% of total mark for this subject) will include assessment of your research and experimentation for this project.

This project is due in October 18, Week 13, beginning of class – we will print these out at the art school during class time.

Pauline 2nd project

exercise 5 vanessa

DIS2105, Project-2 by Vanessa W

DIS1704: CSS references

Hi guys,
Here are a couple of css websites worth looking at to really see how much can be achived in a really smart way. Both have been around for a few years and have really contributed to the css community.


http://www.csszengarden.com/
http://www.cssplay.co.uk/

Viveka

DIS1704: Exercise 4

Please recreate an approximation of the page below. I have used CSS here to create style rules for 4 html ‘elements’ – before you start, try and figure out what these elements are. Remember, an ‘element’ means an html tag or entity, like body, p (paragraph) or img (image).

DIS2105: Brief for Project 2

Digital Imaging – Project Brief 2
Unit Code: DIS2105
Unit Coordinator: Viveka de Costa
Project One Brief: Compositing – Getting Started

Produce two realistic looking compositions using the supplied resource images (files to be supplied in class).

So far in this unit, we have focused on developing the following technical skills: Using Photoshop’s advanced selection techniques, making image adjustments using adjustment layers and masking. We are now going to call on all those skills to assemble several images in to two ‘believable’ collages.

OBJECTIVES
To develop confidence and skill with advanced techniques in Photoshop, particularly utilizing selection tools.

CRITERIA
You must use Photoshop as the authoring tool and you must use the supplied images. You may create additional textures or backgrounds using Photoshop if you would like to.

SPECIFICATIONS
Requirement: Produce two realistic compositions using supplied files.
Format: Portrait or Landscape
Size: A4 (or thereabouts) @ 300 dpi
Presentation: Jpg files
Final Composition: PSD files supplied on disc
As with previous project, I will be incorporating a mark for your journal notes and sketches in to the final mark – so use your journals during your project development and completion and bring it to class on the project due date.

This project is due in Week 9 – 13th September and should be published on the blog on this date.

DIS1704: Exercise 3 - Image gallery

Hi there,

Please prepare the following as an html file:

 Each of the thumbnail images should link to a larger version of the file. Make the thumbnail images 200 x 200, and the main images about 500 x 370. The large image page should look like this:

Here are the original images you can use to complete the exercise:

DIS2105: More on Selections in Photoshop

Remember that you can save your selection at any time – if you don’t save it, the selection will be lost when you close the image. The image must be saved as a PSD file in order to save a selection.

• Once your selection has been made, keep it active (marching ants) and go up to the ‘Select’ menu and choose ‘Save selection’

 

• The ‘Save a selection’ dialogue box then opens up. Here you can name the selection.
• In the example below, this is the first selection being saved, so some options are greyed out.
• Once you have named your selection, hit ‘save’.
• If you create another selection, when you save it, you can choose to ‘add’, ‘subtract’ or intersect it with the selection you previously saved.

• Choose the selection you want to work with from the ‘channel’ dropdown, then specify what you want to do from the ‘Operation’ radio buttons.

Selecting edges with the Magnetic Lasso tool



The magnetic lasso tool will automatically create a path a long an edge, detecting changes in contrast to define where that edge is.

1. Open the ‘phonebooth’ image, and try an initial selection of the red phone box using the tool set to its default – click on the first point of your selection (let’s try and select the red phone boxes from the background), then release and drag the cursor around the shape. The magnetic lasso creates a path, following the edge of the phone box, detecting the edge due to the tonal difference between it and the background  – you will notice though, that you hit some problems with the white space behind some of the trees behind the phone box – the tool detects this white space as a similar tonal value and so includes some of the shapes in the leaves. See below (To get this screen shot I had to double click to make my path in to a selection):



2. To undo the previous anchor point, just hit the delete/backspace key. This will eliminate the most recent point. You can repeat the deleting until you are in a position that suits your selection and then continue.
3. The default options for this tool have a setting of ‘width’ set to 10, which you can see in the tool options – in the shot below, I have reduced this to 4 px:


4. 
The width refers to the area that is taken in to consideration by the tool when the path is being made – obviously, the higher this number is, the more potential there is for error if you are trying to make a selection against a busy background. Having a smaller value here means you have to be more precise in your dragging around the shape though.
5. To see the size of the area being taken in to consideration by the tool, hit the caps lock key and move the mouse very slightly. To reduce or increase the size on the fly (you may want to increase and reduce several time as you make your selection), use the left and right curly brackets respectively {} – The same way we reduce brush size.
6. You can also add your own anchor points with this tool – just click when you need your own point and release the click when you want the tool to do the work
7. While using the magnetic lasso, you can also click the mouse on a point and hold down option to revert to the plain lasso tool. Clicking the mouse on a point and then hitting option once will revert to the polygonal lasso tool. Click and release with the mouse to return to the magnetic lasso.

Image Transparency Selections

When you have a layer that contains transparency (ie, your object is floating on the grey and white checkered background), you can easily load a selection of the object by apple/control clicking on the thumbnail image of that object in the layers palette – note that this will not work unless you click right on the image in the layers palette, rather than the layer name.

Image Luminosity Selections


Using the Channels palette, you can make selections based on the luminosity of the tonal values of the image. This can then be used to create a variety of effects, for example, creating a split toned image.

1. Open the image called ‘Landscape, then open the channels palette
2. If you hold down apple/control and then click on the thumbnail image of the RGB layer in the channels palette, you will select the brightest areas of the image, and partially select the less bright areas
3. This is hard to visualize with the marching ants – so, to see this selection better, let’s make a mask and save it as a channel
4. With the selection still active, click the ‘Save selection as channel’ icon at the bottom of the channels palette – it’s the icon that looks like a grey square containing a white circle – you will then see what looks like a grey scale image, but what it really is, is a representation of the selection, where white is the fully selected area, black is the fully de selected area and grey is the partially selected pixels in between.
5. You can use this selection to alter the shadows or hilights of the image, or you can add a split tone, simulating what can be done with a lot more time and some chemicals in the photographic dark room.
6. To add the split tone, you first need to convert the image to black and white. To do this, go back to the layers palette, then go Image/Adjustments/Black and White.
7. Now go back to the Channels palette and you will see that eventhough the image is now black and white, it still has the three RGB channels – the colour has been removed, however the tonal values are still there.
8. Select the image hilights in the image by command/apple clicking on the RGB channel – this is where we will add a tonal variation.
9. Back in the layers palette, click the ‘New Adjustment Layer’ icon at the bottom of the palette – choose ‘solid colour’ from the options that appear.
10. This opens the colour picker – choose a warm yellow colour.
11. To now put a tone in to the shadows, reselect the selection of the hilights you just used, by going Select/Reselect. To now select the shadows, all you need to do is invert this selection – go Select/Inverse – the shadows are now selected.
12. Now, back at the base of the layers palette, click the ‘New Fill or Adjustment layer’ icon and choose solid again. This time, choose a very dark purple colour from the picker.
13. You can then edit the opacity of the adjustment layers to get the desired effect.


DIS2105: Making Selections

 * Remember at all times to add to a selection by using shift and minus from a selection by using option

Manual Selections – recap points
    •    Draw freehand selections with the Lasso tool
    •    Selecting straight edges with the Polygonal Lasso tool
    •    Selecting with the Pen tool and paths – makes paths which can be loaded as selections and saved as work paths
    •    Making selections from shapes
    •    Adding to and subtracting from selections
    •    Saving selections – adding and subtracting from saved selections

Automatic Selections
    •    Using the Quick Selection tool – looks for an edge, ie a change in contrast
    1.    Make a selection with the QS tool, with the settings on default – you can see that there are limitations here – as soon as there is a tonal shift, the selection will most likely expand to where it shouldn’t.
    2.    Now try using the ‘subtract from selection’ option, to ‘show’ the tool what to ignore
    3.    Continue making your selection – it should now be sticking to the edges of the shape much better.

    •    Using the Magic Wand tool – Automatically selects adjacent pixels of similar tone
    1.    Toggle the ‘contiguous’ option to see how tool can select all or only one instance of a sampled colour

    •     Selecting with Color Range
    1.    Open ‘Cactus_Flowers.psd’ and go ‘Select/Colour Range’ to launch the tool. The aim here is to select the 2 yellow flowers in the foreground only.
Instead of using the very small preview window in the dialogue box, choose ‘image’ from under the preview and change ‘Selction Preview’ to quick mask as below:

    1.    In the ‘Select’ drop down, you can select a variety of colours using the presents, you can also select shadow, highlights and mid tones too.
    2.    Go back to just ‘Sample colours’ and with the plain eye dropper selected, click in to the middle of one of the foreground flowers
    3.    Hold down shift and select a few other yellow spots within that flower, to widen the sample – this is the same as using the the ‘plus’ eye dropper tool.
    4.    If it gets hard to see your selection in the quickmask mode, choose another preview mode – for example ‘Black Matte’ to get a better idea of how you are going.
    5.    Add to the selection a bit more until you are satisfied.
    6.    Now we need to remove those flowers in the background from the selection. To do this, there is an option called ‘Localized clusters’ – check this box.
    7.    You can now access the range slider, which is by default set to 100 – pull this value down to decrease the size of the area taken in to account by the tool. The fuzziness slider work in a similar way to the ‘tolerance’ in the wand tool.
    8.    It may be preferable for you to do this part in the ‘Black Matte’ view. Once you are happy with the selection, hit ok.
    9.    The point of this selection exercise, was to change the colours of these 2 flowers in the foreground, so now that they have been selected, go into the ‘Create new fill or adjustment layer’ icon and choose ‘hue and saturation.
    10.    Pull hue down slightly to change the yellow to a pale orange.

Project abstract Pauline

DIS2105: Photos to use for today's exercises

DIS2105 project 1- vanessa wyke

Exercises 1 & 2 - Rachel

Exercise 1: Table and List
Exercise 2: Links

DIS2105: Using blends, gradients and lighting effects to bring vector artwork to life

This is a great tutorial by graphic artist Sara Haraigue who shows the possibilities offered by blends, gradients and masks for lighting graphic compositions and adding depth of colour to detailed shapes within them.

In this step-by-step she uses blends in Illustrator to experiment with fine details, adding very subtle lines, textures and tones – something that isn’t always easy to do with vector shapes. She then imports the image into Photoshop, taking advantage of Smart Objects, before creating custom shapes, adding layer effects and making colour adjustments.


download the pdf tutorial

Exercise 1 vanessa

file:///STUDENT%20DATA/VANESSA/EX1-WEEK4/VANESSA_EX_1.html

DIS1704: Exercise 2

Please create the following as an html file. Where I have placed the link text ‘google’, for example, please create the actual link inside the table.

Remember to actually go to the website and copy the url from the address bar, rather than just trying to remember it. If there is a website here you are unfamiliar with – google and you shall find!

The other thing to note on this screenshot, is that the browser window has a name – ‘Exercise 2’. This is because the 'head' has been added in between open 'html' and open 'body'. The 'title' tag should be inside the 'head'. Add the and 'head' and 'title' elements to all your html pages from now on - see the w3scools reference for more information.

DIS1704: Tutorial videos for week 5 - Links

Hi guys, here are three videos covering what we went through in class today: Creating links, adding the 'href', 'target' and 'name' attributes.

the Turn - Fredo Viola

The site of this musician, Fredo Viola is pretty amazing - he mixes sound and visuals in the same kind of way - layering and collage. I know we are obviously making still works, but this is definitely inspiring.

http://theturn.tv/ 

Viveka

this website has some nice collage pictures. http://onlinecred.tumblr.com/

vanessa

DIS1704: Exercise 1

Please replicate this image as an html file. Remember to save your html file with the extension '.html', since this is what actually makes the file an html file. Also, no spaces or special characters. Don't worry if you don't have the exact shade of green, the exercise is just about getting a colour and other attributes in there, and also implementing the tags correctly.

Please bring the completed html file to next weeks class so I can tick you off!

DIS2105: Artists you might ant to look in to ...

Bernard Frize is a french painter whose makes abstracted works. His artistic ideas revolve around the medium itself, rather than having a particular message to depict. His painting is based on technique, movement and colour.
Visit his website and read and read a good article about his work on design boom.

Melinda Harper is an Australian artist who was involved in the 1990's with an artist's run space called Store 5. Store 5 attempted to reinstate geometric abstraction in the contemporary art scene. Other artists involved were Contanze Zikos and Rose Nolan.

John Nixon is another painter who was involved with store 5, but who had been around since the 70s working in a minimalist, abstract style. In Melbourne he is represented by Anna Schwartz.

this artists work might help you come up with ideas. he does video/audio work , click on See all 24 videos on the right. you might enjoy Nice Nice - Everything Falling Apart , 3. Powercord VS Philter Phreak, 2005 , some of the videos have some really fuzzy and distorted sound effects that can be uncomfortable .

http://vimeo.com/c505

still works here
http://www.sodeoka.com/

vanessa

DIS2105

Continuing the exploration of technical exercises with an abstract theme, please download this tutorial and associated files. As well as being useful for collage and blending techniques, it's a really useful one to practice at file management - naming layers and grouping them for ease of access.

Download pdf tutorial
Download the zipped artwork files

Viveka

DIS2105 - Abstract project - Exhibition in Sydney

If you're in Sydney, check out this exhibition:

http://www.artgallery.nsw.gov.au/exhibitions/current/paths_to_abstraction

I might go myself this weekend while I'm there.

Viveka

DIS2105 - Notes for week 1

Please complete the attached tutorial - it just goes through a 3d tool and manipulation with blending modes. Generally classes will consist of a technical demo, then discussion and work on projects.

Week 1 tutorial
Abstraction in the visual arts

DIS2105

In the last class I handed out the brief for the first project - Visual Noise
Produce a non-objective abstract composition.

Download the brief.

Viveka

DIS1704 - Notes for week 3

In this class we look at tables and lists. Work through my videos below and then attempt to recreate an html file that looks like this image below. Remember that when you save your files into the text editor, you have to select' file/save as' and save the file with the extension '.html'. It's the extension that makes the page an html page.
Try and keep all your html files in a folder structure set up for each week - Filing properly is really important when it comes to making web pages.









Note: If you find saving the actual pages too hard, or if you have been unable to download a text editor, do this exercise using the 'try-it-and-see' editor at w3schools.com - you won't be able to save your work, but it is still good practice.

Viveka

DIS1704 - Please download Text Wrangler

To complete the exercises during this semester, you will need a text editor. Unfortunately the text editor you have on your computer is most likely not ideal for writing code - a lot of  text editors (note pad, Text edit) actually try and process html, and open up your document in much the same way as a browser does. This means when you save your code, you might end up losing it all together. Word is also not good for this task, due to formatting problems. Word does give you an option to 'save as html', but this will create a web page that looks exactly like the content of your word document, ie a white page with code on it.

So, please download a text editor suited to creating html pages. There are a few out there, but the one I use and recommend is Text Wrangler - download and install it on your home computer. Hopefully we'll have access to this in the lab by the time we are in there again. Text Wrangler is only available for Mac, so if you have a pc, try Kimodo.

Viveka

Dis1704 - notes for week 2

In this week's class we looked at some actual code, focusing on the 'structural' tags - that is, the tags that are essential for a browser to be able to process the file. I demonstrated to the class using the W3Schools website, which is a great place to learn html - no software required.

In the videos below, I step through setting up a basic group of pages. This exercise is on the W3Schools html tutorial website. Please note that when you close the 'try-it-and-see' window on this website, you will lose your work - it's not possible to save this code without copying and pasting in to a text editor like Text Wrangler.

The videos below are designed to be watched in sequence - the screencasting software I use only allows up to 5 minutes of video, so occasionally I get chopped off and have to add on another video picking up where I left off.

DIS1704 - notes for week 1

In today's class we looked at the history of the internet and discussed how servers work. We also looked at urls and talked a bit about web standards. The first 2 documents below, 'week 1 a' and 'week 1 b' cover what we went through in class. The other 2 contain some more detailed notes about the history of the internet, just in case you are interested!

Week 1-a
Week 1-b
Internet timeline
A brief history of the internet

Viveka

Welcome to the blog - Unit guides for DIS2105 and DIS1704

Hi everyone,

This blog is a communication tool for DIS2105 and DIS1704. Since the classes are both pretty small, and there are a couple of students doing both, I thought I would set up one blog rather than two separate ones.

As I mentioned in an email I just sent out, I will be away next Monday 2 August. All course content for these days will be available here on the blog.

As last semester, this blog will be open to everyone to add content, so please sign your name since we will all have the same login - I will send these details out shortly.

I am attaching the Unit Guides here for those who have not received them yet.
DIS2105 Unit Guide 2010
DIS1704 Unit Guide 2010

Viveka