Мой основной проект: Боевые искусства в кинематографе! (fight-films.info)

Свеженькое
Реакция публики
Облако пометок
css Google html SEO WordPress Яндекс видео графический дизайн заработок индексация интернет ключевые слова контент партнерка поисковые системы посещаемость продвижение раскрутка реклама сайт статья хостинг

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

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

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

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

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

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

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

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

Сглаживание

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

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

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

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

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

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

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

Комментировать эту запись запрещено :(