These techniques are focused on the needs of painters, artists and photographers who need to personnalize the display of their pictures on the web without installing any gallery template but learn how to do it themselves with a few simple webpages.
IN THIS COURSE, YOU WILL LEARN HOWTO:
- Create responsive photo grids to show a collection or an event gallery.
- Blur photos to reduce theft or to hide logos or persons in photojournalism.
- Zoom and magnify pictures to get details on painting techniques.
- Play with transparency and Opacity to make enhance each photo at a time.
- Create text captions when hover on pictures to display additionnal information (camera, date, author, price..) like in flickr.
- Display different image resolutions in terms of devices.
- Prevent from downloading pictures.
- Adding links and buttons on overlay to send users to sell page.
And much more specific image techniques to come ;)
This course starts with the technical basics of html and css coding and goes ahead with the creation of a complete responsive image grid portfolio from scratch.
At last we will make all this alive on the web but putting the content on a webserver dedicated to this course.
This video shows you with video captures what are the main parts of this course.
We will review all the needed tools to work in this course. Editing tools like Textwrangler and Browsers like chrome to execute the code.
You will be able to create your firts html5 page with the right tags and syntax
This lecture explains how to code the source address of an image while it has differents folder locations.
What is css ? you will learn how to create a style and use it for a text legend and an image
Classes and ID's are css selectors. learn how to style a html tag
When placing differents elements on a web page, learn how to create space beetween them
Div is like a box. Learn how to structure a web page with div's
Learn how to display lists of elements. Images may be listed as text. This lecture is important because we will use this css technique to display images on a grid further
Background image on the main page is a must have of the great web templates of today. Let's have a look on how to use them on your own.
You will learn how to code a full width background responsive image. I show you a blended method with css only. We use image preloading and some css techniques.
We have seen the creation of a Two and Three columns grid to display the pictures. How to display by code a Fourth columns grid ?
I'm Franck. I started working on web developpement in 1995 and as a freelancer in 2006 by building professionnal blogs with movabletype and now wordpress. I also work on creating audio and video content on the web, documentaries, voice over and storytelling webdocs.
I am both an artist and a technician. I'm passionate of painting and filming but my work is on the web.
Today a great part of my job is training for the web for multimedia journalism and i give courses in the field of digital production tools, video editing, web developpement and creating digital content.
I work on wordpress since several years and on Sony Vegas Pro, Final Cut Pro, storytelling with Klynt.
He discovered the Web in 1995 and became a webmaster. He is self-Employed since 2005 and began producing Professional Blogs.
He is interested in lending to the phenomenon of podcasting and wrote the first book in French on the subject published by Eyrolles French Editor in May 2006.
Since 2006 he is involved both in multimedia storytelling and web developpement focusing on multimedia.