Теперь рассмотрим следующую группу инструментов.

Инструменты заливки

Заливка. Щелкните по этому инструменту и удерживайте левую клавишу мыши, раскроется меню выбора: градиент и заливка.

Здесь можно выбрать необходимое.

Ведро - заливает изображение (выделение) цветом или текстурой.

Итак, для заливки имеем следующие параметры:

Заливка (fill) - определяет, что использовать в качестве "краски": основной цвет (foreground)зальет основным цветом, шаблон (узор - pattern) зальет некоторым узором.

Шаблон (pattern) - узор для заливки.

Режим (mode) - способ наложения пикселов, значений много и рассматриваться будут по мере необходимости.

Непрозрачность (opacity) - определяет степень прозрачности заливки.

Допуск (tolerance) - диапазон цветов для заполнения.

Галочка сглаживание означает смягчить края перехода.

Попробуем на деле:

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

Теперь на панели параметров выберете: Заливка -> Узор, Узор -> любой понравившийся.

Снова подведите наше ведро вовнутрь выделения и щелкните. Теперь оно залито шаблоном и выглядит так:

Обратите внимание, в открывающемся окне шаблонов, представлена лишь небольшая их часть. Если щелкнуть по стрелочке справа, то откроется меню, внизу которого указаны другие коллекции шаблонов. Их можно добавить к имеющимся.

Градиент. Создает заливку с плавным переходом между двумя или несколькими цветами.

Рассмотрим панель параметров:

Если щелкнуть по срелочке справа, то откроется палитра с вариантами градиента, при двойном щелчке перед стрелкой откроется окно редактирования градиента (здесь можно настроить свои варианты градиента).

Определяет вид градиента (слева направо - линейный, радиальный, угловой, отраженный, ромбовидный).

Инверсия (reverse)- галочка указывает геометрически перевернуть градиент.

Дизеринг (глубина - dither) - галочка указывает сгладить для уменьшения сегментации.

Прозрачность (transparency) - галочка указывает на использование прозрачности.

Попробуем на деле:

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

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

Теперь подведите курсор мыши к середине левой стороны нашего выделения, нажмите левую клавишу мыши и, не отпуская, протяните линию до середины правой стороны(рис.1)
Теперь протяните линию градиента по диагонали (рис.2)
А теперь сверху вниз (рис.3)

Посмотрите на разницу и поэкспериментируйте с различными градиентами и их видами.

Сохранение изображения

Наш урок подходит к концу, осталось только научиться сохранять наши шедевры.

Щелкните пункт меню Файл (File), в отрывающемся меню вы увидите привычный пункт -Сохранить Как (Save As)- и новый - Сохранить для Web (Save for Web). Разберемся какой для чего.

Если вы работаете над изображением и хотите иметь возможность изменять его в будущем, то следует выбрать пункт меню - Сохранить Как (Save As)

Где сохранять и какое имя дать - ваше личное дело, а вот формат будет *.PSD;*.PDD. Именно в этом формате сохраняются все ваши настройки (у нас их пока нет, но позже появятся). Таким образом, сохраняется не картинка целиком, а сохраняются ее части, каждую из которых вы сможете изменить когда захотите.

Если же ваше изображение готово, то выбирайте пункт меню - Сохранить для Web (Save for Web). Изображение будет сохранено оптимизированным для Интернета (т.е. с наилучшим сочетанием качество\размер файла). Отрывшееся окно сохранения следует рассмотреть подробнее:

Четыре вкладки наверху предлагают посмотреть варианты изображения:

Оригинальный (original) - изображение как оно есть. Как правило, большой размер файла, недопустимый для web.
Оптимальный (optimized) - оптимальное соотношение качества и размера файла с точки зрения программы.
2-up, 4-up - соответственно два и четыре варианта изображения рядом, внизу каждого указан размер. Вы можете выбрать оптимальный на ваш взгляд.

В правом верхнем углу этого окна задаются дополнительные настройки:

Здесь можно выбрать формат сохраняемого изображения. Общие рекомендации - используйте форматы JPEG и PNG для фотографий с тонкими реалистичными цветовыми переходами, формат GIF - для контрастных, малоцветных рисунков. Кстати, все рисунки на этой страницы сохранены в формате GIF.

Если вы используете вкладки, рассмотренные выше, то настраивать эту часть окна необязательно, по крайней мере, на этом этапе.

Итак, выбирайте самое оптимальное изображение на ваш взгляд и щелкайте по кнопке Сохранить (Save). Откроется уже привычное окно сохранения, где следует указать Папку (куда сохранить) и Имя файла, остальное будет уже указано, снова щелкаем по Сохранить (Save). Изображение для web готово.

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

Чтобы закрепить эти навыки, поэкспериментируйте (создавайте разные по форме области и заливайте их различными способами).

На следующем уроке вы научитесь работать с текстом и познакомитесь с основным понятием программы - слоями.

Рассажу-ка, как залить (загрузить) сайт на хостинг. Причем выложу две инструкции:
- КРАТКАЯ СПРАВКА - для тех, кто шарит, просто им нужна подсказка;
- ПОДРОБНАЯ ИНСТРУКЦИЯ - для тех, кто в танке и вообще не понимает ничегошеньки. Все мы такие были - это нормально. Выложила все, с том числе ссылки и картинки. Пользуйтесь на здоровье!

Краткая справка как залить сайт на хостинг

Быстро и по сути:
1) Покупаете хостинг (). Там есть пробный период (по-моему 5 дней), кстати - как раз потренироваться заливать сайты и страницы. С покупкой вы получаете три параметра: Хост, логин и пароль. Их используют для подключения и загрузки.
2) Скачиваете FTP-клиент (программа). Самая популярная и удобная - FileZilla . Запускаете. И да, если FileZilla не устанавливается (бывает на древних компах и нетбуках), то пробуйте Total Commander. Принцип работы тот же, но интерфейс DOSовский. А так все одинаково.
3) Вводите в верхнее поле: Хост (или Сервер), Имя пользователя (или Логин) и Пароль. Их высылает хостер при покупке хостинга. См. e-mail.
4) ЛЕВАЯ ЧАСТЬ показывает проводник и содержание папок в компьютере. ПРАВАЯ ЧАСТЬ показывает проводник и содержание папок на хостинге. От том, что вы подключились будет сообщение, а также в окне справа появиться папка с названием сайта (доменом).
5) Слева откройте папку, откуда будете заливать файлы на хостинг. Справа зайдите в папку с названием сайта на стороне хостинга, например, "mysite.com". Затем папку "www".
6) Слева выбираете файл для заливки, нажимаете на него правой кнопкой мышки и жмете "Закачать на сервер". Поздравляю, вы залили страницу в Интернет! Теперь можете проверить, как она отображается в браузере.

ОБРАТИТЕ ВНИМАНИЕ:

ВАЖНО №1: Корневая папка сайта - "www" . В ней должна лежать - ГЛАВНАЯ СТРАНИЦА САЙТА, то есть файл index.html или index.php. А также другие файлы и папки соответственно, если они есть.

ВАЖНО №2: при последующих заливках обратите внимание, в какую именно папку вы заливаете файл! если, например, вы хотите залить картинку в папку images, убедитесь, что именно она открыта со стороны хостинга!

Вот собственно и все о том, как добавить сайт в Интернет . Если не получилось по короткой инструкции или что-то непонятно, читайте полное руководство ниже.

ПОДРОБНАЯ ИНСТРУКЦИЯ как закачать сайт на хостинг

Для тех, кто ничего не понял, со всеми деталями, картинками, пояснениями и скриншотами!
Так сказать инструкция для девушек (блондинок, брюнеток и рыжих, поскольку дамы с дредами и синими волосами и так знают, как это сделать).
Дорогие мои, никого не хотела обидеть, но первое предложение с приметками отсеяло всех мужиков:Р. Что важно!
В последнее время несколько раз сталкивалась с тем, что закончившие онлайн курсы по дизайну не знают как заливать сайты на хостинги.
Для меня когда-то загрузка сайта в Интернет тоже была тайной за семью печатями... Но стоит раз попробовать и ситуация проясняется.
Сайт на самом деле - это папка с файлами, которые могут быть сверстаны в форматах HTML и иногда плюс PHP* и скрипты (программная часть в виде кода).

По умолчанию мы берем ситуацию:
- У вас УЖЕ ЕСТЬ ГОТОВЫЙ сайт, просто он на домашнем компе, а не в Интернете.
- Вы купили домен к нему, а возможно, и хостинг. ( - но вы можете выбрать любую контору. Принцип размещения сайтов в Интернете одинаковый везде).

Тут чуточку остановимся для объяснений.
Сайт может выглядеть так:
1. index.html (или index.php) – главная страница сайта (название index дается главной странице сайта и любой папке по умолчанию на всех сайтах в интернете)
2. index.css – файл, где прописан стиль страницы (цвет подложки, размер окон, шрифт)
3. папка images – картинки для дизайна страниц
4. page1.html (или page1.php) – любая страница сайта, но не главная
5. page2.html (или page2.php) – любая страница сайта, но не главная
6. page3.html (или page3.php) – любая страница сайта, но не главная
Допустим, такого вида:

ПОМНИТЕ! ВЫ ЗАЛИВАЕТЕ ТЕ ПАПКИ, КОТОРЫЕ ВАМ ДАЛ ПРОГРАММИСТ! Этот набор мы берем просто для примера.

Итак, у вас есть уже купленный домен и хостинг . Обычно их продают одни и те же товарищи в Интернете (хостеры). Но можно покупать у разных. Мне лично нравиться компания Ukraine.com.ua - у них недорогие доменные имена + хорошая техническая поддержка, что важно, когда возникают вопросы по работе хостинга.

Домен – это имя сайта в интернете, например: mysite.com, http://freetravel.com.ua , ukr.net.
Хостинг – это тот «жесткий диск» в Интернете, где ваша папка с файлом будет лежать и будет доступна всем пользователям Интернета круглосуточно.

Итак, вы покупаете себе доменное имя. Его присваивают Вам дня два. Затем покупаете на сайте Ukraine.com.ua хостинг. У них, кстати, есть 5 дней бесплатного использования хостинга - на пробу, чуть что.

Если вы уже купили хостинг, Вам высылают письмо с названием сервера, логином и паролем для использования хостинга:
Для доступа по FTP*** используйте следующие реквизиты:
Сервер: mysite.ftp.ukraine.com.ua
Логин: mysite _ftp
Пароль: А0а0А0А

Эти пароли используются не на сайте хостинга, а для для FTP-клиентов (программ, которые позволяют залить сайт на хостинг, а по сути – в Интернет).
Основных две:
FileZilla – РЕКОМЕНДУЮ!
Total Commander – использовать, если ваш комп – дрова и FileZilla на него не устанавливается.

Скачайте программу FileZilla, вводите свои пароли и подключаетесь.
Пошагово о том, как загрузить сайт на хостинг.
Заливка файлов на хостинг через FileZilla:


О том, что вы подключены сообщает появление папки вашего домена на поле справа:


Справа появилась папка с вашим доменом. Заходите в нее, а потом в папку www!

Файл index (главная страница сайта) должен лежать в папке www(!!!). Чтобы его залить, нужно справа открыть папку www! Затем нажимаете правой кнопкой мышки на нужный файл и выбираете «Закачать на сервер».


Важно, чтобы папки с обоих сторон четко совпадали. Если вы хотите допустим, добавить новую картинку в папку images, то в FileZilla с обоих сторон должна быть открыта папка images.

После того, как вы закачали файл через FileZilla – вы можете все проверить по Интернет, просто забив адрес в браузер. Все должно работать. Если что-то не отображается, значит вы его не залили! Обязательно проверяйте залитые файлы онлайн.

Решение проблем загрузки сайта на сервер.

Если подключение не произошло – вопрос может быть в динамичном IP. Актуально для тех, кто пользуется мобильным или чужим интернетом.
Дело в том, что хостинг Украина делает для своих пользователей дополнительную защиту по IP вашего интернета. Если он меняется, значит, его нужно также менять на сайте Ukraine.com.ua в личном кабинете в разделе БЕЗОПАСНОСТЬ. Собственно, это еще одна причина, по которой хостинг мне нравиться, ведь чтобы зайти на сайт, нужно пройти идентификацию и через СМС-код. А значит, до моего сайта никто не доберется))).
Как изменить прописанный IP!
Авторизуйтесь. Заходим в личную панель управления на хостинге:

Зайдите в раздел Безопасность

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

Если они не совпадают – добавьте его на белое поле:

Должно появиться:

Теперь можно закачать сайт на хостинг с момощью программы FileZilla (или Total Commander). Последовательность указана выше.

Кстати Total Commander используеться также, как файлзилла, но там немного другой интерфейс (досовский, чуть что). Но в принципе, владельцу сайта "не шашечки нужны, а ехать", то есть - залить страницу в интернет!

________________________________________ ____
Справка:
*Форматы HTML или PHP. У файлов соответствующие расширения: index.html или index.php Если вы можете открыть страничку index браузером - это HTML:) Файлы PHP можно открыть только на сервере (хостинг в интернете или локальный сервер, который устанавливаеться на рабочий комп - но если вы не разработчик - вам это не надо).
**Системы управления сайтом используются теми пользователями, которые не могут (или не хотят) писать коды для страницы самостоятельно. По сути это просто использование удобного интерфейса.
*** FTP (File Transfer Protocol - протокол передачи файлов). Заливка сайта на хостинг это тоже самое, что залить их на чужой комп. Кто ж такое любому позволит. Для этого используют FTP – он позволяет залить определенные файлы в определенное место и все.

Все это я покажу вам на примере фотографии джинсов.

Выбираем инструмент создания прямоугольной области выделения Rectangular Marquee Tool , зажимаем Shift и создаем квадратную область выделения как на рисунке:

Нажимаем Ctrl+C , чтобы скопировать часть изображения. Затем создайте новый документ File > New… При этом, если вы скопировали часть изображения, программа автоматически подставит размеры этого фрагмента для нового документа.

Вставьте скопированное изображение, нажав Ctrl+V .

Итак, это заготовка для создания паттерна. Если мы создадим его сейчас, то при заливке изображения большего размера, чем 331х331px, будут видны швы (места стыковки). Для тех, кто не понял, показываю на примере.

Обратите внимание на выделенные фрагменты. Такие швы возникают из-за того, что при заливке паттерны стыкуются друг с другом, начиная с левого верхнего угла, правый край к левому и низ к верху. А далеко не все края изображений совмещаются стык-в-стык. Решить это проблему поможет фильтр Filter > Other > Offset…

Как можно догадаться, первый параметр указывает на какое количество пикселей сместить изображение по горизонтали. Второй – по вертикале. Сместите изображение так, чтобы стыки получились ближе к центру изображения, здесь проще с ними работать. После этого, используя наборы инструментов из вкладки Healing или Stamp , уберите швы.

Я использовал инструмент Spot Healing Brush Tool . Просто выбрал его и провел два раза по швам: вверх и вниз. Вот, что получилось:

Теперь создадим Pattern . Для этого перейдите Edit > Devine Pattern… и укажите название паттерна.

Все! Теперь давайте проверим, что у нас получилось. Создайте новый документ любого размера. Выберите инструмент заливки Paint Bucket Tool , в настройках укажите, что заливать будем паттерном, а не цветом, и выберите ваш, только что созданный, паттерн.

Заливаем изображение и получаем

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

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

Загрузка файла с шаблоном

Итак, загружаем архив с шаблоном:

Внутри архива находятся несколько вложенных папок:

• папка с изображениями (images, img);
• папка со скриптами (js);
• папка со стилями (css);
• папки с кодами Глобальных блоков, Информеров и т.д.

Также в архиве, как правило, присутствуют:

• инструкция.txt (ReadMe.txt) - настоятельно рекомендую обязательно прочитать;
• конструктор шаблонов.txt (tmpl.txt) - общий код каркаса;
• таблица стилей.txt (css.txt, style.txt) - файл с набором стилей;
• вид материалов.txt - содержит код вида материалов;
• и др. текстовые файлы с кодами, которые нужны для полной установки шаблона.

Примечание: содержимое вашего архива может отличаться от моего шаблона (это зависит от типа, структуры, сложности шаблона и других факторов).

Делаем резервную копию текущего шаблона

Прежде чем приступить к установке нового шаблона рекомендую сделать бэкап текущего шаблона (на всякий случай)

Для этого - заходим в "Панель управления" своего сайта - "Дизайн" - "Резервное копирование шаблонов":

Нажимаем в правом верхнем углу кнопку "Создать резервную копию", после чего вы увидите появившийся резервный архив с вашим текущим шаблоном вида "1372338464.zip" с датой создания в скобках:

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

Пошаговая инструкция по установке шаблона на uCoz:

Установка шаблона делается согласно той инструкции, которая находится внутри вашего архива с шаблоном . Как я уже говорил в рамках этой статьи я буду показывать установку шаблона DesktopChaos .

Шаг-1.

Загружаем папку с изображениями images к себе на сервер. Это можно сделать двумя способами.

Первый способ - через FTP-клиент, например, FileZilla. Скачиваем и устанавливаем программу: http://filezilla.ru/get/ .

После этого, на главной странице Панели Управления жмем и задаем новый пароль:

После этого открываем ftp-менеджер FileZilla, в самом верху вводим Хост, Имя пользователя и Пароль, нажимаем "Быстрое соединение":

В левой части менеджера находим папку с картинками своего шаблона, жмем на ней правой кнопкой мышки, в появившемся меню нажимаем "Закачать на сервер". Готово. Теперь картинки находятся на нашем сервере.

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

Второй способ - загрузка изображений через Файловый менеджер . Переходим на главную страницу ПУ и нажимаем на "Файловый менеджер":

В право верхнем углу жмем Создать папку, вводим название images и нажимаем Enter:

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

Таким образом закачиваем на сервер все картинки из папки images.

Шаг-2.

Устанавливаем (если нужно) значение тега . Заходим в "ПУ (Панель Управления)" - "Настройки" - "Общие настройки" и в соответствующее поле вставляем код:

Шаг-3.

Устанавливаем Таблицу стилей. Для этого, находим в архиве файл "Таблица стилей.txt", открываем и копируем из него весь код (Ctrl+A, Ctrl+C) и вставляем его вместо старого кода в "ПУ" - "Дизайн" - "Управление дизайном (CSS)" - "Таблица стилей (CSS)":

Шаг-4.

Устанавливаем код из файла "Конструктор шаблонов". Открываем файл из архива "Конструктор шаблонов.txt", копируем все содержимое и вставляем его в "ПУ" - "Дизайн" - "Конструктор шаблонов", нажимаем кнопку "Создать шаблоны":

Шаг-5.

Теперь, аналогичным образом переносим содержимое файла "Вид материалов.txt" в вид материалов модулей: "Новости сайта", "Блог", "Каталог файлов", "Каталог статей". Идем в "ПУ" - "Дизайн" - "Управление дизайном (шаблоны)":

Код из файла "Вид комментраиев.txt” аналогично копируем в "Комментарии" - "Вид комментариев".

Шаг-6.

Создаем Глобальный блок. Переходим в "ПУ" - "Дизайн" - "Управление дизайном (шаблоны)" - "Глобальные блоки":

В правом верхнем углу жмем "Добавить блок", в появившемся поле пишем названия блока INFO и нажимаем "Добавить":

Находим в архиве папку "Глобальные блоки" и открываем файл "INFO.txt", копируем содержимое файла и вставляем в только что созданный глобальный блок INFO, сохраняем:

Шаг-7.

Устанавливаем необходимые значения:

• Название информера: Последние новости;
• Раздел: Новости сайта (либо "Блог", либо "Каталог файлов", либо "Каталог статей");
• Тип данных: Материалы;
• Способ сортировки: Дата добавления материала D;
• Количество материалов: 5;
• Количество колонок: 1.

Жмем "Создать".

После этого чуть ниже появляется блок с созданным нами информером, справа в нем видим иконки, выбираем первую из них "Управление дизайном информера" и в появившееся окно вставляем из папки "Информеры" содержимое файла "Последние новости", сохраняем:

Код данного информера $MYINF_1$ вставляем в созданный нами ранее глобальный блок INFO .

Информер для форума создается похожим образом.

На этом установка шаблона DesktopChaos завершена.

К стати, если вы так и не разобрались с установкой нового шаблона на свой сайт, то в официальном магазине uTemplate.pro можно заказать услугу по установке шаблона.