eyelearn » bitmap images for the web
Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/eyedea70/public_html/eyelearn.org/ma/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/eyedea70/public_html/eyelearn.org/ma/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700

Warning: Invalid argument supplied for foreach() in /home/eyedea70/public_html/eyelearn.org/ma/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/eyedea70/public_html/eyelearn.org/ma/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700

Warning: Invalid argument supplied for foreach() in /home/eyedea70/public_html/eyelearn.org/ma/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

eyelearn

a look at design for the web & all it entails

· view menu ·

bitmap images for the web


Warning: preg_match(): Compilation failed: invalid range in character class at offset 4 in /home/eyedea70/public_html/eyelearn.org/ma/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 1384

Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/eyedea70/public_html/eyelearn.org/ma/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700

Warning: Invalid argument supplied for foreach() in /home/eyedea70/public_html/eyelearn.org/ma/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

Warning: preg_match_all(): Compilation failed: invalid range in character class at offset 4 in /home/eyedea70/public_html/eyelearn.org/ma/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 700

Warning: Invalid argument supplied for foreach() in /home/eyedea70/public_html/eyelearn.org/ma/wp-content/plugins/lightbox-plus/classes/shd.class.php on line 707

With your beautiful profile designs in hand – let’s take a look at preparing and saving your images for the web.

→ view final design

This page was created for the tutorial “Get to grips with CSS3 multiple background images”, written for the Net magazine’s website (now part of creative bloq).
→ read tutorial


alternatives for bitmap editing

gimp
GIMP
GNU Image Manipulation Program // open source // PC/MAC/LINUX

acorn
Acorn
The Image Editor for Humans by Flying Meat // MAC

paint net
paint.net
image and photo manipulation application // free (but no longer open source) // PC

pixelmator
Pixelmator
image editing app // MAC

a new alternative :)

affinity designer
Affinity Designer
vector graphic design software by Serif // MAC

image optimisation

8bitalpha
8bitalpha (online)
Upload a 24-bit PNG with alpha transparency and get back an 8-bit PNG also with alpha transparency.

imgoptim
imageOptim (MAC)
ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations.

JPEGmini
JPGmini (MAC/PC/online)
JPEGmini is a patent-pending photo recompression technology, which significantly reduces the size of photographs without affecting their perceptual quality.


patterns

Practice makes perfect :)
Let’s get creative with repeating textures and patterns.


TASK
Experiment with creating your own patterns in any graphics app of your choosing. Implement your finals for testing and preview in the provided sample page.
↓ download source files
(includes vector source file for pattern creation, HTML/CSS files for testing)

useful tutorials & resources

Revision3 – Pixel Perfect with Bert Monroy

Pixel Perfect is a tutorial podcast by artist Bert Monroy. If you like video tutorials – you might find an insight into his working techniques useful, here is a sample:

These tutorials cover working techniques for various purposes, very useful techniques and tips for retouching and image editing – however, they are not specifically for the web.

profile page design

mini project – part #2

With your design in hand, it’s time to get coding and implementing your design :)
Feel free to focus entirely on the layout and content structure. Next week’s lesson will be part of the ‘webpage design’ course where we will cover images and colour, continuing on from David’s sessions with coding. So you can then put focus on adding your visuals as well as colour.

to do list

  1. mark up your content in a meaningful and semantic manner
  2. write your CSS with a focus on layout and structure
  3. upload your page for viewing online

Please feel free to comment below if you have any questions :)

8 Comments

  1. prisca
    8
    31/10/2014

    @SERGI
    lovely work on your profile page :) very impressive to see it fluid, too ;)
    a few points to consider:

    ~ your font definitions are repeated quite a lot throughout your CSS. If you specify the main font for your text for the body, then override it for your main heading – you will save yourself a few extra lines of code ;)
    (after yesterday’s session – you will also now create a more specific font stack, of course ;))

    ~ I would also suggest to have a closer look at your line height:
    for your main heading (your name) – the line height could be reduced – when your name spills onto 2 lines, the spacing seems a little much. Whereas your main text seems a little tightly set…

    ~ skills section: I’m not sure why you made this content narrower than the rest?
    I think with so little info – a neat margin will work better, be cleaner and clearer.

    ~ a few edits and notes:
    spacing tweaks

    ~ I would also add a little more inner spacing to your info box, scale down your photo a little ~ here’s my result of a possible edit:
    sergi

    @MARTHE
    nice work ~ I love your use of colour, works very well ;)
    a few comments:
    ~ you’re missing a reset for your CSS – this will be important to ensure closer consistency across browsers.

    ~ ideally, you’ll declare your font-family for the body; and bear in mind that line height does not need a unit and is ideally set relatively. You’re using line height for spacing, too. While that does work to some degree – the drawback will be that your text will overlap when spilling over 2 lines if your line height is very low. Ideally, you’ll use margin for spacing between your text elements.

    ~ I’ve had a little play with the overall balance of your page (I don’t think centre aligned text works for your content here. The headings look fine—though I would much prefer all left aligned as it will fit your visuals better—but the text is much easier to read if left aligned):
    marthe

    hope this helps :)

  2. Marthe
    7
    28/10/2014

    I don’t know if I have posted this before, but I can’t find my previous post. Anyway here is my profile page:

    http://mvittor.users41.interdns.co.uk/profile/profile.html

  3. Sergi
    6
    22/10/2014

    Hi all!
    I’ve just done the coding of the about me page but I’m still not sure about the colours that I should use. What would you suggest?
    http://stantinya.users41.interdns.co.uk/coursework/artweb/aboutme/index.html

  4. prisca
    5
    20/10/2014

    Marthe,
    ideally, you’ll upload it into a new directory on your server :-)

  5. Marthe
    4
    20/10/2014

    Where do you want us to upload the profile page Prisca?

  6. prisca
    3
    20/10/2014

    @Shav,
    I love post-its :) always a good start :)
    I’m not quite sure why some of your ideas create such an offset between content elements? Without understanding your aim, or knowing what kind of visuals you might want to include – it’s hard to comment further, curious to see the next stage :)

    @Matt,
    glad you’re giving Affinity Designer a go … will hopefully be help you along soon :)
    Not quite sure what to comment on without content ~ so will be curious to see how your self portrait drawing will come along, and how your info will fit it.

  7. Matt
    2
    17/10/2014

    Hi, really early idea and still trying to tame Affinity design but here it is.

    http://www.ma-jones.com/images/mj_profile.png

  8. Shav
    1
    16/10/2014

    Hi Prisca. I’ve made a blog post on my profile ideas.
    http://sfogarty.users40.interdns.co.uk/bloggy/?p=45