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