Posts Tagged ‘рисунок’

Еще одна победа Adobe

Среда, Апрель 18th, 2012 Нет комментариев

Under : , , , , ,

После этой публикации некоторые из Вас, мои уважаемые читатели, могут обвинить меня в предвзятости и необъективном отношении к продукции фирмы Adobe. Но смею Вас уверить, что это не так. Если уж и есть в мире фирма, производящая ПО для дизайнеров регулярно и качественно, так это именно Adobe. И я даже не имею в виду, в данном случае, их мировой бестселлер Adobe Photoshop. Я уже писал в прошлом номере о еще одной замечательной программе этой команды, а эту статью хочу посвятить ImageStyler 1.0. (далее…)

Photoshop ЧаВо (FAQ)(Часто Задаваемые Вопросы)

Понедельник, Апрель 16th, 2012 Нет комментариев

Under : , , , , ,

Сколько памяти выделять нужно выделять Photoshop для нормальной работы и почему?
Если вы работаете с графикой для web (обычно, она небольшого размера) — целесообразно ставить 50% или около того, чтобы иметь возможность без проблем работать одновременно и с другими приложениями (например, HTML редактор, FTP клиент и/или что-то другое). Если же вы работаете с файлами большого размера — советую выставить 80%-90%. (далее…)

Особенности верстки

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , , , ,

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

Напрашивается вопрос, можно ли сделать так, чтобы веб-страница отображалась одинаково? Учитывая, сколько придется принять во внимание разных неоднозначных факторов, следует сказать, что нет, нельзя. Поэтому задача верстки веб-страниц формулируется так: сформировать документ, который бы корректно отображался с небольшими различиями на основных платформах и в браузерах. Корректно означает, что соблюден исходный замысел автора, воплощен требуемый дизайн документа, и он показывается в браузере без ошибок. (далее…)

Изображение на всю ширину макета

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , , ,

Известно, что ширина окна браузера варьируется в довольно широких пределах, поэтому подгадать под нее не представляется возможным. Установить рисунок на всю ширину можно лишь в том случае, когда применяется фиксированный макет. Ширина при этом четко задана, и сделать рисунок требуемого размера достаточно просто. Следует уточнить, что речь здесь идет не о ширине веб-страницы как таковой, а лишь о ширине макета, в который вписывается вся информация. Например, на сайте boeing.com применяется именно такой подход (рис. 1) и суммарная ширина изображений не превышает заданную величину.

Рис. 1. Главная страница сайта boeing.com

Рис. 1. Главная страница сайта boeing.com (далее…)

Фоновые рисунки

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , ,

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

Фон на веб-странице

Установка фонового рисунка на веб-страницу традиционно происходит через атрибут background тега <body>. Такой рисунок повторяется по горизонтали и вертикали, заполняя таким способом все окно браузера. Понятно, что особых вариантов для творчества здесь нет, поэтому обратимся к стилям и посмотрим, что же можно делать с помощью CSS.

В CSS имеется пять атрибутов, которые управляют фоновой картинкой: ее добавлением, положением и повторением. Однако все эти параметры заменяет одно универсальное свойство background, его и будем использовать в дальнейшем. (далее…)

Выравнивание элементов

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , , , ,

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

Центрирование по вертикали

Одним из способов показать посетителю направленность и название сайта является использование сплэш-страницы. Это первая страница, на которой, как правило, расположена flash-заставка или рисунок, выражающий главную идею сайта. Изображение также является и ссылкой на остальные разделы сайта. Требуется поместить этот рисунок по центру окна браузера вне зависимости от разрешения монитора. Для этой цели можно воспользоваться таблицей с шириной и высотой равной 100% (пример 1). (далее…)

Две колонки, навигация справа

Воскресенье, Апрель 8th, 2012 Нет комментариев

Under : , , , , , ,

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

Рис. 1

Рис. 1. Веб-страница с навигацией в правой колонке (далее…)

Метод Shape Tweening

Четверг, Апрель 5th, 2012 Нет комментариев

Under : , , , , , , , , , ,

Метод предназначен для преобразования формы одного объекта в другой.

Следует заметить, что метод работает только с объектами типа «рисунок». Хотя объекты типа «текст» и «символ» можно преобразовать в рисунок, используя Modify>Break Apart (CTRL+B).

Далее мы рассмотрим на примере простого преобразования окружности в квадрат, как работает метод Shape Tweening.

Шаг 1

Для начала с помощью инструмента Oval (O) нарисуем окружность. Чтобы получилась именно окружность, а не эллипс — зажмите клавишу SHIFT.

Шаг 2

Включите инструмент Arrow (A) и на линейке Timeline выделите позицию под цифрой 30. Теперь выберите в меню Insert>Keyframe (F6). Этим действием вы сделали 30-ый кадр будущего ролика ключевым. Обратите внимание, что линейка между кадрами стала серой.

Шаг 3

В 30-м кадре с помощью инструмента Rectangle (R) нарисуйте справа от окружности квадрат. Включите инструмент Arrow (A), выделите окружность и удалите DELETE.

(далее…)

Изображения ismap

После такой серьезной темы как обработка форм,я перейду к чему-нибудь веселенькому. Я познакомлю вас с изображениямиismap потому что это просто есть такой способ. Он поддерживается браузерами и естественно имеет право на жизнь.Хотя с приходом новых веяний в HTML (особенно Java-аплетов) он стал настоящей редкостью.И хотя можно в 80% случаев найти ему более быструю замену,все-же вы можете в некоторых случаях найти именно ismap предпочтительней всего.

Синтаксис очень простой,почти не отличается от того,если бы вы решили оформить рисунок для якорь гиперссылки:

<A href="cgi-bin/somescript.cgi"><IMG src="somepic.gif" border=0 ismap></A> 

Заметьте что все отличие заключается в том,что в тэге IMG добавлен атрибут ismap. Он говорит браузеру,что когда пользователь щелкнет на картинке то нужно перейти не просто к URL указаному в <A href=»URL»> а что нужно к этому URLдобавить координаты той точки по которой пользователь щелкнул мышью .

В нашем примере если пользователь щелкнул по точке x=10 ,y=15 то браузер перейдет на URL: (далее…)

Оптимизация вывода графики на экран

1. Описание класса CView

Объекты классаCViewимеют окно, представляющее собой обычную прямоугольную область экрана, без рамки, меню и других элементов. Вывод в такое окно (в том числе и текста) производится в графическом виде. При работе с этим классом очень важны моменты, рассматриваемые ниже.

Сообщение и метод OnDraw

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

Итак, для обеспечения корректного отображения информации в окне нужна функция, которая будет перерисовывать содержимое окна всякий раз, когда оно потребуется. Для этого служит методOnDraw. В качестве параметра этому методу передается указатель на контекст устройства, используя который, можно перерисовать окно.
(далее…)