IZONE- http://www.izcity.com/- бесплатный софт, вэб-сервисы, ресурсы для раскрутки, свежие номера журнала "Internet Zone".

NetStudio

Константин Жаринов

Программа NetStudio предназначена для создания и редактирования веб-страниц и объектов веб-графики.

Назначение и особенности программы

Она отличается от привычных визуальных редакторов тем, что назначение программы достаточно специально: компоновка пространства веб-страницы создаваемыми программой графическим элементами и редактирование этих элементов. Код HTML программа генерирует автоматически. Такая специализация NetStudio не позволяет отказаться при работе над сайтом от применения других программ, но делает ее чрезвычайно полезной именно в силу узкого назначения. NetStudio позволяет даже неподготовленному веб-мастеру создавать профессионально выглядящий дизайн сайта. И достигается это не только за счет компоновки HTML кода, но и за счет очень удачных средств редактирования графических элементов.

Получить программу можно, скачав дистрибутив с сайта www.netstudio.com. Полная рабочая версия стоит $89, но можно ограничиться бесплатной демоверсией с ограниченными функциями. Это ограничение касается запрета на сохранение созданных файлов и меньшим количеством предлагаемых шаблонов. Что касается формирования HTML-кода, то тут ничего не поделаешь: при применении демоверсии вам придется полагаться полностью на свои силы. Но проблема с сохранением графики решается достаточно просто: применяя копирование через "clipboard", или сделав "Print Screen", вы сможете перенести результаты работы в графический редактор, которым постоянно пользуетесь.

При помощи NetStudio вы сможете создавать и редактировать уже существующие HTML-документы, создавать и форматировать по своему желанию отдельные объекты графики, работать над файлами изображений, созданными в других программах или полученными через Интернет.

NetStudio предлагает вам на выбор несколько десятков шаблонов (TEMPLATE), из них десять шаблонов дизайна страниц, а также большой набор шаблонов для отдельных элементов: баннеров, бэкграундов, оформляющих списки "пулек", отдельных кнопок, вертикальных и горизонтальных панелей кнопок, "hover button", логотипов, и т.д., а также более чем пятьдесят стилей (STYLES) веб-страниц, с которыми вы можете по своему усмотрению комбинировать шаблоны.

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

Созданные изображения NetStudio сохраняет в следующих форматах: *.gif, *.jpg, *.png, *.bmp и *.nso. Последний формат является рабочим форматом программы. При сохранении вами созданного файла, NetStudio создает не один (*.gif, *.jpg или *.png), а два файла, второй из которых всегда *.nso. Именно наличие этого файла позволяет проделывать разнообразные манипуляции с редактируемыми изображениями.

Интерфейс программы

Перейдем к рассмотрению предоставленных в распоряжение пользователя меню и инструментов. Меню "File", "Edit", "View", "Help" вполне обычны и не требуют продолжительного комментария. Они предназначены для следующих операций: "File" - создание нового файла и его сохранение, "Edit" - операции копирования, вырезания, вставки и отката, "View" - управление интерфейсом программы, "Help" - информация о программе и помощь.

Специфическими для NetStudio являются пункты меню "Insert", "Format" и "Tools".

Меню "Insert" содержит опции "Banner", "Batton Bar", "Batton", "Hover Button", "Bullet", "Picture", "Text", "Line", "Shape", "Background", "Picture from the Web" и предназначено для создания соответствующих графических элементов: баннера, панели навигации (по умолчанию состоящей из пяти кнопок), отдельной кнопки, "пульки" для оформления списка, реагирующей на движения курсора кнопки, вставки текста в изображение, создания горизонтальной линии, вставки формы, фона и изображения.

Меню "Format" и "Tools" предназначены для редактирования изображений. При помощи этих меню вы можете управлять цветами (Fill, Change Color), текстовой частью изображений (Font - выбор типа шрифта, Align Text - "выравнивание текста"), трансформировать изображения по своему вкусу (Washout - "размытие", Shadow - "тень", Emboss or Engrave - придание изображению "рельефа", Soften Edges - "смягчение граней", Brightness and Contrast - увеличение и уменьшение яркости и контраста, Sharpen or Blur - понижение и усиление четкости изображения), делать прозрачным цвет (Make Transparent), форматировать фон (Background), изменять форму элемента (Change Shape To), управлять стилями (Styles), просмотреть стили в режиме предпросмотра (Preview Styles), отменять несохраненное форматирование (Remove Formatting).

При помощи меню "Tools" вы сможете отрезать от изображения ненужные части ("Trim"), сделать прозрачным цвет ("Set Transparent Color"), менять взаимное расположение наложенных один на другой объектов ("Bring Forward" и "Send Backward"), редактировать код HTML ("Edit with Web Page Editor").

Наиболее часто применяемые опции продублированы на панелях инструментов. Интерфейс NetStudio содержит две панели: "Standard Toolbar" и "Formatting Toolbar".

Стандартная панель предназначена для создания, сохранения и открытия документов и графических файлов, редактирования кода HTML, проделывания некоторых операций редактирования с файлами: копирования, вырезания и вставки, изменения размеров и взаимного расположения объектов. "Стандартная панель" дублирует некоторые опции меню "Insert": "Insert Banner", "Insert Horizontal Batton Bar", "Insert Vertical Batton Bar", "Add Batton to Batton Bar", "Insert Batton", "Insert Hover Batton", "Insert Picture", "Insert Shape" (кнопки 13 - 20 слева направо), на которой также внимание привлекают кнопки с 5 по 7, которые соответственно обозначают: панель стилей, команда просмотра созданного документа в браузере (действует после сохранения документа), редактирование кода HTML (действует при наличии какого-либо HTML-редактора, например FrontPage), затем следуют кнопки "Bring Forward", "Send Backward", "Trim", "Set Transparent Color", "Edit Properties" и "Background".

"Панель инструментов форматирования" позволяет редактировать созданную графическую и текстовую части изображений. Вы можете менять тип и кегль шрифта, устанавливать жирность, курсив и подчеркивание, редактировать цвет текста и графики (Fill, Change Color), применять Shadow - "тень", Emboss и Engrave - придание изображению "рельефа", Soften Edges - "смягчение граней", Make а Transparent - "делать прозрачным" объект, Fade to Transparent - "постепенное обесцвечивание", Washout - "размытие", Blur - усиление четкости элемента, Sharpen - размытие объекта с увеличением размеров, More Contrast -увеличение контраста, Less Contrast - уменьшение контраста, More Brightness - увеличение яркости, Less Brightness - уменьшение яркости.

В арсенале пользователя два окна: "Web Page" и "Picture". Первое предназначено для просмотра редактируемой веб-страницы, второе - для редактирования графических объектов.

Панель Стилей "Style" позволяет придавать готовые стили созданным вами документам. В вашем распоряжении более 50 стилей. Кроме того, вы можете создавать собственные стили.

Создание документа и графики

Создатели программы предложили два пути создания HTML-файлов и три пути создания графических элементов. Документ HTML может быть создан сразу после запуска программы при выборе опции "Picture and web page template", с последующим выбором во вкладке "New Picture Templates" строки "Web Page". Другой путь - воспользоваться командой "New web page" меню "File", которая также продублирована кнопкой на стандартной панели.

Графические объекты могут быть созданы: во-первых, через применение "мастеров" (wizard), второй путь - создание посредством применения шаблонов (template), третий - через создание пустого (blank) документа с последующей вставкой в него шаблона требуемого графического элемента на основе применения одного из пунктов меню "Insert" или через панель инструментов.

Начнем с "мастеров" и "шаблонов". После запуска NetStudio открывается следующее окно выбора последующей операции, в котором вам будет предложено воспользоваться "волшебниками" для создания кнопки, баннера или "художественного текста" (Fancy text): в поле "Create a new picture using" опции "Batton wizard", "Banner wizard", "Fancy text wizard", создать новый документ или изображение при помощи шаблона "Picture and web page template", во втором поле - открыть существующий документ "Open an existing picture" или создать новый "чистый" документ "Start with a blank picture".

Создание с помощью "мастера" баннеров, кнопок и текстов является достаточно простым делом. Вам будет предложено пройти последовательно несколько шагов: выбрать из списка соответствующий вашим задачам шаблон объекта, а в случае с баннером - выбрать еще и картинку, которая будет вставлена в баннер, и ввести текст. Но на этом пути есть один "подводный камень": совсем не каждый из предложенных шрифтов поддерживает кириллицу, поэтому после того, как вы создали элемент, вам придется доработать его "вручную": выделить при помощи курсора текст, переключиться в русский регистр, после чего выбрать один из поддерживающих кириллицу шрифтов (например: Andale Mono) - вставленный в изображение текст примет нужный вид. Но необходимость этих дополнительных манипуляций вообще ставит под сомнение полезность применения "волшебника", если только вы не создаете надписи на латинице.

Другой путь создания изображений: работа с шаблонами. Выбрав "Picture and web page template", вы увидите на экране вкладку, предлагающую вам на выбор типы элементов, с которыми вам предстоит работать. Это рекламные баннеры (Ad banner), фон (background), баннеры (Banner), предназначенные для оформления списков "пульки" (Bullet), отдельные кнопки (Button), художественный текст (Fancy text), горизонтальные и вертикальные панели кнопок (Horizontal Batton Bar, Vertical Batton Bar), реагирующие на подведение курсора кнопки ("Hover button"), логотипы (logo) и шаблоны страниц (Web Page). Выбрав один из элементов в левой части окна вкладки (Choose what kind of picture:), в правой части (Choose a template:) вы увидите список картинок, из которых можете выбрать по своему вкусу для редактирования. Необходимо заметить, что этот путь предоставляет наибольший выбор предлагаемых для создания и редактирования элементов: создать логотип или рекламный баннер можно только этим путем. Только эта вкладка предлагает вам на выбор несколько шаблонов для каждого элемента.

И наконец, создание графики при помощи меню "Insert". Оно предназначено для создания отдельных графических элементов и содержит следующие опции: "Banner", "Batton Bar", "Batton", "Bullet", "Hover Button", "Text", "Line", "Shape", "Background", "Picture", "Picture from the Web". Создав пустой (blank) документ, вы затем вставляете в него шаблон нужного вам элемента и редактируете его (вставляете рисунки, текст и т.д.). Ограничение на применение этого способа работы заключается в том, что для каждого элемента предусмотрен только один шаблон.

Работа с документом

В NetStudio вы можете создавать новый документ HTML или редактировать готовый.

Как уже говорилось, создание нового документа производится при запуске программы выбором опции "Picture and web page template", с выбором во вкладке "New Picture Templats" строки "Web Page". Другой способ - создание нового документа командой "New web page" меню "File".

Вопрос редактирования документа в NetStudio решен достаточно оригинальным образом. Непосредственно из программы код HTML не доступен, но он изменяется автоматически при изменении вставляемых в страницу графических объектов.

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

Теперь перед вами несколько возможных вариантов действий: изменить какой-либо графический объект, добавить объект или удалить какой-либо объект со странички.

Изменение любого из уже имеющихся объектов производится непосредственно в редакторе NetStudio, при этом в коде HTML будут отражаться только такие трансформации объекта, которые приводят к изменению размеров графического объекта. Эти изменения отображаются в атрибутах "height=":"" или "width=":"" тега <img src=":">.

В случае необходимости добавить или удалить графический объект вам следует воспользоваться каким-либо дополнительным редактором тегов HTML, например FrontPage Editor. Открыв в NetStudio документ, вы выбираете "Edit with Web Page Editor" в меню "Tools". Документ открывается в редакторе. Теперь вы можете удалить любой из объектов (сохранив файл, вы сможете просмотреть результат в окне NetStudio).

Добавление нового объекта производится несколькими путями: вы можете вставить изображение в документ через буфер, произвести вставку изображения стандартными средствами ("Insert" -> "Image") или перетащить объект из окна NetStudio в окно FrontPage Editor.

Кроме того, вы можете редактировать в FrontPage Editor текст документа, просматривая результат после сохранения в окне NetStudio.

Работа с графикой

Способы создания объектов графики мы рассмотрели выше, теперь можно обратиться к вопросу редактирования и того, какие возможности предоставляет для этого NetStudio. Список опций представлен ниже, вы можете производить следующие операции:

- Изменение размера
- Изменение формы
- Делать прозрачным цвет
- Изменять "представление" объекта
- Изменять фоновый цвет объекта
- Постепенно изменять цвет (от цвета к цвету)
- Использовать графику как фон
- Обрезать рисунок
- Применять геометрические фигуры
- Производить перекрытие объектов
- Применять размытие
- Изменять яркость и контраст
- Применять тень (To add a shadow)
- Применять "рельеф" (Emboss) и "гравировку" (Engrave)
- Применить прозрачность к объекту в целом или постепенное изменение прозрачности
- Размывать или затачивать элемент (Blur, Sharpen)
- Смягчать грани (soften the edges)
-Удалять форматирование

Каким образом изменяются размер и форма элементов? Наводите курсор на нужный элемент (после чего вокруг него появляется контур, а вокруг курсора - четыре направленные в разные стороны стрелки). Кликаете на элементе: вокруг него появляется уже более зримая рамка с широкой полосой наверху. Теперь вы увидите, наведя курсор на границу объекта (одну из боковых или нижнюю), что курсор преобразовался в двухстороннюю стрелку. "Потянув" курсор, вы вытянете объект без соблюдения пропорций. Вы увидите при этом, как изменился рисунок: все элементы вытянулись или напротив - сжались (в зависимости от того, в каком направлении вы "тянули" курсор). А если наведете курсор на угол объекта, то сможете увеличить объект, сохранив пропорции и изображение в неизменном виде. Применив "Trim" из меню "Tools", вы сможете обрезать рисунок, удалив ненужные части.

Более интересной функцией является придание объектам специфических форм. Производится командой "Change Shape To" из меню "Format" или из контекстного меню. Применение этой опции к графическому элементу позволяет придать ему одну из 74 форм: стандартные геометрические фигуры, разнообразные формы кнопок, указатели, звезды и флаги и т.д. Эти же геометрические фигуры вы можете применять независимо, как самостоятельные изображения, выбирая "Shape" в меню "Insert".

Делать прозрачным цвет вы можете при помощи опции "Choose Set Transparent Color" из меню "Tools".

Для изменения цветов изображений, созданных в других программах, применяется "Change Color" (из меню "Format", с панели инструментов или из контекстного меню). На выбор вам предлагается двадцать цветов и возможность самостоятельного определения требуемого цвета.

Изменять представление созданного в NetStudio графического объекта (баннер, кнопка и т.д.) вы можете опцией "Fill Color". Эта опция имеет более широкое назначение, чем просто изменение цвета изображения. При ее помощи, кроме простого редактирования цветов, вы можете также применять в качестве фона для объекта какой-либо другой рисунок: "Format" -> "Fill" -> "Picture". Здесь вы выбираете и вставляете подходящую картинку. Действует предпросмотр. Другая функция "Fill Color" - это постепенное изменение цвета объекта от одного края к другому: "Format" -> "Fill" -> "Fade". Здесь вы выбираете два цвета (которые будут отображаться соответственно с правой и левой сторон, и тип направления (Direction) трансформации цвета (по горизонтали, вертикали или под углом). Эти же функции опции "Fill Color" вы можете применять к создаваемому "художественному" тексту (конечно, фактически вы создаете тот же графический файл). Делаете "Insert" -> "Text", затем активизируете "Fill Color" или применяете в качестве цвета шрифта какое-либо изображение, или создаете текст с постепенно изменяющейся цветовой гаммой.

Как применять графику в качестве фона к стандартным объектам NetStudio, мы рассмотрели выше, но вы можете создавать графику, редактируя сканированные, полученные из Интернета или созданные в других программах изображения. Чтобы использовать нестандартные для NetStudio изображения в качестве фона (например, при изготовлении коллажей), вам достаточно проделать вставку рисунка, а затем применить к нему команду "Send Backward" из меню "Tools". Теперь вы можете вставлять в этот файл любые другие изображения: рисунок, в отношении которого был применен "Send Backward", всегда останется на заднем плане.

Средствами NetStudio вы также можете воспользоваться для применения таких стандартных способов редактирования изображений, как "размытие" (washout), изменение яркости ("change brightness") и контраста ("change contrast"), применения тени ("To add a shadow"), понижения ("blur") и повышения резкости изображения (sharpen), смягчения граней (soften the edges).

При редактировании кнопок навигации полезным является применение "рельефа" (Emboss) и "гравировки" (Engrave). При изготовлении коллажей и других сложных изображений невозможно обойтись без применения прозрачности к объекту в целом ("Format" -> "Make Transparent") или постепенного изменения прозрачности (кнопка "Fade" на панели форматирования).

И наконец, вы можете воспользоваться командой "Remove Formatting" меню "Format" для того, чтобы вернуть редактируемый элемент к его первоначальному виду. Обратите внимание: если вы создали сложное изображение, состоящее из нескольких элементов, "Remove Formatting" применяется к каждому элементу в отдельности, и распространяется только на команды форматирования, т.е. те, что содержатся в меню "Format".

Некоторые операции

Вставка текста и рисунка в редактируемый объект возможна двумя способами. Первый можно обозначить как стандартный. Вы видите на баннере надпись "Title", на отдельной кнопке - "button text", на кнопках навигационных панелей - "label". Кликнув в зоне такого текста, вы выделите его для редактирования, что будет обозначено появившейся рамкой. В открывшееся пространство можно вводить свой текст, меняя при этом стандартным способом размер шрифта, тип шрифта, его цвет, придавая ему тень и т.п. Рисунки вставляются аналогичным образом: программой предусмотрена возможность вставки рисунка в правую часть (или левую, в зависимости от шаблона) баннера, на месте надписи "Click here to insert picture". Поступаете в полном соответствии с этой командой: кликнув в этом поле, вы увидите стандартное окно выбора файла. Выбираете изображение, жмете "Insert" - и дело сделано.

Другой способ производится при помощи меню "Insert" и команд "Text", "Picture". Эти команды также содержатся в контекстном меню, вызываемом правой клавишей мыши. В отличие от предыдущего способа, применяемого к "стандартным" объектам NetStudio, последний способ применяется к импортированным изображениям.

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

Особенности работы с бесплатной версией

Особенности работы с бесплатной версией определяются запретом на сохранение полученных результатов. Чтобы понять, какие последствия это влечет, необходимо обратить внимание на то, что же делает работу с NetStudio такой удобной. Дело в том, что программой всякий раз при сохранении создается два файла: один, с любым расширением из числа наиболее применяемых в Интернете (*.gif, *.jpg, *png, или *.bmp), и второй - рабочий файл NetStudio с расширением *.nso. Именно сохранение всей необходимой информации в этом файле, который в 5-10 раз "тяжелее" любого другого файла, позволяет проделывать множество операций с редактируемым изображением и делает отдельные элементы сложных изображений независимыми. Если вы, сохранив созданный объект, закроете NetStudio, удалите файл *.nso, а затем, снова запустив программу, откроете оставшийся графический файл, то сможете убедиться, что отдельные элементы изображений (графика и текст, графические элементы) перестали быть "самостоятельными", и полностью подчиняются всем командам, применяемым к изображению в целом. Отсюда становится понятным, что основным недостатком в работе с бесплатной версией становится не запрет на сохранение как таковой, а именно невозможность создавать файлы *.nso. Преодолеть это ограничение можно только одним способом: тщательно спланировав работу, закончить редактирование изображения за один сеанс, после чего просто скопировать полученный результат через буфер в любой другой графический редактор и сохранить. Это - что касается изображений, состоящих из одного графического объекта. К сложным, состоящим из нескольких графических объектов изображениям могу посоветовать применять команду "Alt+Print Screen" с последующей вставкой в "ваш любимый графический редактор". Может быть, этот способ выглядит несколько "по-деревенски", но он работает.

Источник: "Компьютер Price", http://www.comprice.ru

 


Copyright © "Internet Zone", http://www.izcity.com/, info@izcity.com