Вы знаете, что вся веб-графика квадратная?

Даже то, что выглядят неровным или круглым, на самом деле квадратное или прямоугольное.
Веб-страницы почти всегда оформлены с помощью изображений. Но если вы не понимаете основные принципы о графике в интернете, вы не сможете создать хорошие веб-страницы.

Веб-графика - это квадрат

Первый и самый основной принцип, с помощью чего можно понять веб-графику является то, что она квадратная или прямоугольная. Лучший способ узнать это – посмотреть на картинку в графической программе. Выберите изображение, которое не выглядит квадратным. Попробуйте скачать (щелкните правой кнопкой мыши, "Сохранить рисунок как ...") и откройте его в Photoshop, Freehand, или Paint Shop Pro. Картинка в изображении круглая, но само изображение квадратное.

Вся веб-графика квадратная - так устроен интернет. Интернет отображается на компьютере. Компьютеры отображают картинки, в виде миллионов крошечных точек. Но даже эти точки не круглые, а тоже квадратные.

Пиксели в веб-графике

Как уже говорилось выше, все изображения составлены из миллионов крошечных точек, называемых пикселями. Каждый пиксель представляет собой крошечный-крошечный квадрат, который окрашивается под основное изображение. Существует аналогичная техника в живописи, называемый пуантилизм разработанная Жоржем Сера. Что касается компьютерного пуантилизма, то это квадратные пиксели. Именно поэтому форма окончательного изображения приобретает форму квадрата.

Но если основа Веб графики - квадратная, то каким образом получаются круглые, изогнутые изображения или, другие, имеющие округлые формы и края? Это достигается двумя методами: сглаживанием и прозрачностью.

Сглаживание

Сглаживание или устранение контурных неровностей происходит из-за способности человеческого мозга интерпретировать то, что мы видим. Эта технология для создания изогнутых картинок просматривает каждый пиксель кривой линии и изменяет насыщенность цвета в зависимости от того, какая доля кривой является частью этого пикселя. Таким образом, если кривая занимает половину пикселя, то он на 50% насыщается цветом кривой.

Наш мозг затем конвертирует это размытое изображение в четкую кривую. Вы можете создать сглаживание самостоятельно путем размывания краев у изогнутых линий, но большинство графических программ автоматически уже имеют «сглаживание», если вы только не изменили параметры, чтобы указать, что хотите неровное изображение с неровными краями.

Прозрачность

Если Ваше изображение неровное, а вы хотите картинку с четко – очерченными краями, то существует два основных способа сделать это:
1. Используйте тот же цвет фона для вашей веб-страницы что и в вашем изображении.
Наиболее распространенный способ – использовать черный или белый фоны, так как большинство мониторов соответствуют цветовому изображению, которое на них проявляется.
2. Для фона изображения используйте основной цвет, сохраните файл с расширением .GIF (формат графического обмена), при этом пометьте этот основной цвет прозрачным. Это укажет браузеру на то, что веб-графику необходимо отображать, показывая не только один цвет. Любой цвет под изображением также будет виден.

Единственное, что следует помнить, что прозрачность делается одним цветом с изображением. Так что если вы пытаетесь создать изогнутые края со сглаживанием, вы должны создать кривую в таком же (или близко) к тому цвету, каким будет фон на вашем веб-сайте. Это гарантирует, что сглаживание не будет создавать ореол вокруг изображения.

Ну а теперь идите и получите удовольствие, создавая кругло-квадратную Веб-графику!

Источник: webdesign.about.com
Перевод: Панайотова Олга