Аватара — небольшая картинка, изображающая персонаж, которым «притворяется» автор блога или форума. Этот персонаж может не иметь ничего общего с реальной личностью, он является воплощением виртуальной личности автора.
Обычно аватары имеют размер 80—100 точек по горизонтали и по вертикали и создаются на основе фотографий или имеющихся картинок (в случае использования изображений из Интернет всегда нужно помнить об авторских правах и этике!). Кроме того, в аватарах возможна анимация.
Создадим анимированную аватару my-tux на основе картинки egonpin_Tux.png , загруженной с сайта www.openclipart.org (рис. 9.1). Поскольку картинка относится к категории PublicDomain и будет использована исключительно для учебных целей, проблем с соблюдением авторских прав возникнуть не должно.
Исходная картинка является прозрачной, имеет размеры 246×336 точек и глубину цвета 32 бита. Для аватары на этой основе нужно будет создать анимированное изображение формата GIF шириной 80 точек и соответствующей высоты. Пусть фон аватары совпадает с цветом «одежды» исходного пингвина.
Навыки графического дизайнера с нуля. Gimp. Бесплатный графический редактор.
Итак, начинаем творить. Сначала изменим фон изображения, потом масштабируем его, а затем создадим эффекты анимации.
Откроем исходное изображение в GIMP, выделим его целиком с помощью команды » Выделение / Всё «, скопируем, а затем создадим новое. Созданное изображение автоматически окажется размером с исходное, но для него обязательно нужно проверить разрешение экрана — оно должно соответствовать тому, что реально обеспечивает видеосистема (» Дополнительные параметры » в диалоге создания изображения). Затем инструментом » Получение цвета из изображения » («Пипетка») устанавливаем цвет «одежды» пингвина в качестве цвета переднего плана, выделяем полностью новое изображение и заливаем его цветом переднего плана с помощью инструмента «Заливка» с соответствующими параметрами.
Рис. 9.1. Исходная картинка для создания аватары
После этого вставляем (» Правка / Вставить «) выделенное ранее исходное изображение в новое, сохраняем результат в формате XCF, а затем создаём из плавающего выделения новый слой и масштабируем изображение пропорционально до ширины в 80 точек. Результат показан на рис. 9.2.
В качестве анимации заставим пингвина перебирать лапками. Поскольку GIF- анимация делается по слоям, потребуется 4 слоя с изображением разных фаз этого процесса, причём у каждого слоя должен быть непрозрачный фон. Этого можно добиться, скопировав слой фона, разместив копии нужным образом и затем объединив слои изображения и фона для соответствующих кадров анимации.
Создание нового проекта. Графический редактор ГИМП (GIMP)
Рис. 9.2. Заготовка для аватары
Нужно заметить, что все операции редактирования нужно делать в прозрачном слое изображения, когда он активен и сделан видимым. Все остальные слои на этом этапе полезно сделать невидимыми.
Для перемещения лапки выделяем её с помощью «прямоугольного выделения» (виртуозы могут воспользоваться инструментом «эллиптическое выделение» или любым другим), вырезаем её, вставляем в активный слой, перемещаем плавающее выделение в нужное место (чуть выше исходного положения лапки) и прикрепляем плавающее выделение.
После завершения работы со слоями переводим изображение в индексированный режим (» Изображение / Режим / Индексированное «) и сохраняем результат в формате GIF, обработав слои как анимацию и установив бесконечный цикл с интервалом между кадрами, например, 500 миллисекунд.
9.2 Создание логотипов и элементов дизайна страниц
Графическое оформление сайтов может быть создано исключительно вручную, однако GIMP предоставляет начинающим «сайтостроителям» некоторый набор процедур автоматизации создания элементов графического оформления. Автоматизация процесса осуществляется с помощью программ (скриптов), которые могут быть написаны как на собственном языке GIMP, так и на широко известном языке Python. Наборы скриптов для обработки изображений доступны как из меню » Расш. » главного окна, так и из меню » Фильтры » окна изображения (рис. 9.3 и рис. 9.4).
Источник: intuit.ru
Тест на тему Растровый редактор GIMP
| Раздел | Информатика |
| Класс | — |
| Тип | Тесты |
| Автор | Курмакаева А.Д. |
| Дата | 03.05.2015 |
| Формат | docx |
| Изображения | Есть |
Поделитесь с коллегами:
А) растровых изображений
Б) векторных изображений
В) фрактальных изображений
Г) нет правильного ответа
Ответ: свободная модель разработки и распространения, кроссплатформенность, гибкость и расширяемость.
Ответ: прямоугольное выделение, выделение эллипса, свободное выделение, выделение связанной области, выделение по цвету, умные ножницы
Значок глаза означает
А) Наличие прозрачного фона
Б) Видимость слоя
В) Наличие одного и более слоев
Г) Активность слоя (то есть тот, с которым в данный момент ведётся работа)
Цветной полосой выделен
А) Активный слой, то есть тот, с которым в данный момент ведётся работа.
Б) Прозрачный фон
В) Изображение на слое
В) можно оставить все эти настройки в исходном состоянии (по умолчанию), поскольку они вполне разумны
В) может только авторизованный пользователь
Источник: for-teacher.ru
Как создать свой собственный дизайн сайта с помощью Gimp
Прошло всего несколько дней с тех пор, как я начал с gimp, и я уже чувствую себя достаточно комфортно, поэтому я решил создать учебник для веб-сайта с помощью GIMP.
для начинающих пользователей рекомендуется зайти на gimp.org, чтобы получить быстрый обзор инструментов GIMP и вмешательства, тем не менее, это довольно просто и легко.
Вот результат этого урока
Шаг 1
Создайте новое изображение 780 × 1000
Step2
Залейте фон цветом #ededed, используя инструмент заливки.
Шаг 3
Шаг 4
Используйте инструмент Rectangle select и перетащите по всей ширине, которая равна 780x, а высота 125x использует линейку в качестве направляющих.
Шаг 5
Теперь выберите инструмент «Заполнить градиентом», выберите градиент от FG до BG (RGB) и добавьте цвет 000000 для FG и BG в 3a4146.
Шаг 6
Теперь перетащите сверху вниз, чтобы убедиться, что линия идеально прямая.
Теперь это должно выглядеть так
Для логотипа создадим простой текст в виде логотипа с некоторым эффектом отражения.
Шаг 7
Добавьте текст Gimp-tutorials.net размером 30 пикселей и шрифтом Trebuchet MS Bold, вы можете попробовать свое собственное имя и шрифты, конечно
Шаг 8
Теперь, чтобы создать отражение, скопируйте текстовое название с логотипом и поместите его ниже исходного
Шаг 9
Использование инструмента переворачивает слой отражения логотипа вертикально
Шаг 10
Выберите слой с отражением логотипа и установите флажок «Сохранить прозрачность».
Шаг 11
Используйте инструмент «Градиентная заливка», выберите «FG to Transparent» и измените цвет FG на 3a4146.
Step12
Теперь потяните несколько раз снизу вверх, чтобы затемнить нижнюю часть текста логотипа отражения.
Шаг 13
Верхняя панель навигации, создайте новый слой и используйте инструмент выделения прямоугольника, чтобы перетащить на полную ширину 780x и высоту 20x
Шаг 14
Теперь используя градиентную заливку, выберите градиент от FG до BF (RGB) и добавьте цвет 0276cf для FG и BG к 82c9ff, примените градиент снизу вверх, как показано ниже
Теперь для вкладок, создайте новый слой и назовите его Tab.
Шаг 15
Используйте инструмент «Прямоугольник» и нарисуйте прямоугольник шириной 105px и высотой 8px, снова используйте линейку для наведения.
Шаг 16
Теперь щелкните правой кнопкой мыши вкладку и выберите «Выделить> округлено» и измените Радиус% на 45.
Шаг 17
Теперь используйте градиентную заливку, используя те же цвета, что и панель навигации, 0276cf для FG и BG для 82c9ff.
Шаг 18
Теперь перетащите снизу вверх, чтобы убедиться, что вы начинаете с 225px на линейке и заканчиваете на 125x на линейке, иначе вкладка не будет хорошо сочетаться с панелью навигации, вы можете увидеть, как я начинал и заканчивал линию заполнения. на картинке ниже, пытаясь до совершенства, я сделал did
он должен выглядеть так
Шаг 19
Дублируйте вкладки 3 раз, переименуйте их, чтобы оставаться организованным
и разметить их так
Шаг 20
Теперь мы хотели бы центрировать вкладки, сделаем это, нажав на все цепочки, смотрящие значки в диалоге / окне слоя.
Шаг 21
Теперь добавьте текст для каждой вкладки, введите тип дома, продукты, контакты, о.
Это хорошая идея, чтобы сохранить вашу работу прямо сейчас, используя формат XFC, чтобы быть в безопасности.
Теперь пора создать левую панель, это будет простая чистая боковая панель, которая хорошо работает с сайтами на основе CSS, мы разместим ее в левой части макета.
Шаг 22
Создайте новый слой, назовите его «левая строка меню»
Шаг 23
используйте инструмент выделения прямоугольника и нарисуйте высокий выбор 200px и 950x, который пойдет до самого дна, затем залейте его цветом #232323
Шаг 24
Цепочка связывает вкладки, а также текст и перемещает его так, чтобы выровнять, как это
Шаг 25
Теперь, чтобы создать разделители строк для левой строки меню, создайте новый слой, назовите его Line, увеличьте до 300%, чтобы вы могли видеть, нарисуйте прямоугольник с высотой 1px и почти шириной меню, затем заполните его цвет 232222
Шаг 26
Нарисуйте еще одну линию и используйте цвет 4e4c4c.
Вот как это выглядит увеличенным в 200%
Шаг 26
Дублируйте 7 слоя линий и расположите их так, как показано ниже.
Шаг 27
Сначала добавьте световой эффект градиента к фону. Создайте новый слой, назовите его «эффект градиента», затем нарисуйте прямоугольник размером 205 пикселей и залейте его снизу вверх цветом #ededed для FG и #ffffff для BF.
Шаг 28
Создайте еще один слой и сделайте то же самое для нижней части тела, но на этот раз рисуйте сверху вниз.
Теперь основной дизайн макета готов, пришло время добавить базовый контент, потребуется немного приятных фотографий. Один из моих любимых сайтов с бесплатными изображениями — http://www.stockvault.net/ он на 100% бесплатный! это не будет стоить вам ни копейки: P. зайдите туда и скачайте подходящую картинку.
вот что я использовал
Вы можете скачать его здесь
http://www.stockvault.net/details.php?gid=98sgid=#128578; Он будет работать с правильным хостингом веб-сайтов.
Я изменил текстовый логотип, чтобы больше подходить сайту, всегда полезно экспериментировать с различными шрифтами, чтобы получить идеальный вид.
Застрял на чем-то или нуждаюсь в помощи, оставьте сообщение здесь и плохо ответьте на него, обратная связь очень ценится.