На сегодняшнем уроке мы будем разбирать вопрос “Как увеличить картинку?”. Как и в остальных вопросах тут есть несколько ответов! Самое первое и трудное – это открыть Фотошоп, а дальше всё будет намного проще. После удачного открытия Фотошопа нам нужно открыть изображение , которое мы собираемся увеличить. После выполнения этого незамысловатого действия, пока мы не перешли непосредственно к увеличению картинки, должен вас предупредить, что всякий раз, при увеличении изображения, его качество будет ухудшаться.
Объясню, как ухудшается качество при увеличении картинки. Предположим, наше изображение состоит из всего девяти пикселей (пиксели это маленькие квадратики из которых состоит изображение), ну вот такое маленькое изображение мы нарисовали. Ширина нашего изображения три пикселя, и высота тоже три пикселя, и вдруг нам захотелось изменить размер нашего изображения, и мы увеличили его в два раза. Теперь наше изображение в высоту шесть пикселей и в высоту тоже шесть. Проведя несложные математические расчёты, мы узнаём, что изображение стало теперь состоять из тридцати шести пикселей. А теперь самое главное. Каждый пиксель нашего изображения увеличился в два раза, так как и изображение мы и увеличивали в два раза. То есть был один пиксель синего цвета, а стало четыре пикселя синего цвета стоящие квадратиком. Надеюсь, вы меня поняли.
Итак, первый способ изменить размер изображения.
Для того чтобы увеличить изображение в Фотошопе, нам надо увеличить размер холста, а то наша картинка просто напросто не поместится. Но перед этим нам надо дважды нажать на наше изображение с надписью «Задний план», в окне «слои», и в появившемся окошке нажать «Ок»,как я уже учил в прошлых уроках.
На верхней панели мы должны выбрать пункт «Изображение», он третий слева. В открывшемся списке мы должны выбрать пункт «Размер холста», он седьмой сверху. Так же открыть этот пункт мы можем зажав три волшебных клавиши (Alt + Ctrl +C). Это мы можем увидеть справа от надписи «Размер холста».
У нас появилось окошко, в котором мы видим два основных заголовка «Текущий размер: …М» и «Новый размер: …М». В текущем размере мы видим ширину и высоту нашего изображения сейчас. А в новом размере мы можем выбирать, в чём будет производиться измерение (процентах, в пикселях, в сантиметрах). В окошечках справа от слов «Ширина» и «Высота» нужно написать размеры того холста который у нас будет, желательно увеличивать холст настолько на сколько мы собираемся увеличивать картинку. Если мы поставим галочку перед словом «Относительно», то размеры нового холста будут показываться относительно старого, то есть «+1000» или «-1000». В пункте «расположение» мы можем выбирать в каком направлении будет увеличиваться наш холст, например: «вправо и вверх», «влево и вверх», «вниз вправо» и «влево» и т.д. В окошечке «Цвет расширения» холста мы можем выбрать цвет которым зальётся пространство, на которое мы увеличили наш холст, но в данном случае нам это не важно. Нажав на стрелочку «вниз» мы можете выбрать один из основных цветов (чёрный, белый и серый), так же мы можем выбрать «Основной цвет» – это главный, выбранный нами, цвет в палитре, или «фон» – это второстепенный цвет, выбранный нами в палитре. Там есть пункт «Другое», после нажатия на него выскакивает окно палитры, где мы можем выбрать цвет самостоятельно, после чего нажав «Да». В этом окне мы работу завершили. Смело нажимаем клавишу «Да». Ну, а если вы вдруг решили не увеличивать размер холста, нажмите клавишу «Отмена». Эта клавиша находится под клавишей «Да».
Всё, мы увеличили размер нашего холста и можем смело увеличивать изображение.
Теперь нам надо перейти в слой, на котором находится наше изображение, и нажать (Ctrl + T). Вокруг нашей картинки появится квадратик с точками на краях и по углам. Если мы нажмем и будем держать на одну из этих точек, то мы сможем растягивать наше изображение как захотим, двигая мышку с зажатой левой клавишей мыши. А если вы хотите увеличивать изображение пропорционально, сохраняя пропорцию между длинной и высотой картинки, то вам надо нажать левой кнопкой мыши на одной из точек, которая стоит на углах картинки, одновременно нажимая клавишу «Shift» на клавиатуре, и повести мышкой в сторону. Вот таким простым способом мы растягиваем наше изображение по холсту, который мы увеличили ранее.
Так же можно повернуть изображение если подвести курсор мыши к угловой точке на небольшое расстояние. У вас вместо курсора появится небольшая изогнутая стрелочка. Нажимая и удерживая левую кнопку мыши вы можете вертеть и крутить изображение как вам захочется. Вы наверняка заметили точку по середине вашего изображения во время его трансформации. Так вот, перемещая эту точку по изображению, тем самым, вы перемещаете ось его вращения. То есть, если вы поставите точку вращения в какой нибудь угол, то ваше изображение будет вращаться вокруг этого угла. Так же выбрать угол вращения можно на миниатюре в настройках трансформации, которая находится с самого лева.
Второй способ. Нажимаем тот же самый пункт «Изображение», но теперь выбираем не седьмой, а шестой пункт сверху «Размер изображения».
Там вы не найдёте ничего нового. Мы не зря с вами разобрали «Размер холста», хотя и здесь есть несколько пунктов, вам незнакомых. «Сохранять пропорции» – это мы знаем из вышесказанного. А «Интерполяция» – это сохранение пропорции между шириной высотой и разрешением. Но знайте, если выбрали измерение в процентах, то сейчас вам дано изображение 100%. И если вы его хотите увеличить, то вам надо вводить число больше ста, а если уменьшить, то меньше ста.
Наконец мы можем себя похвалить за ещё одну пройденную тему!
Внешние таблицы стилей
Создаем обычную html-страницу, с таким кодом:
Заголовок первого уровня
Здесь просто текст
Заголовок второго уровня
Здесь просто текст
Теперь в блокноте создаем пустой документ style.css и сохраняем его в ту же папку, где лежит html-страница:
Это наша страница стилей. Давайте подключим стили (style.css) к html-странице. В html существует тег , который отвечает за подключение внешних файлов. Добавляем в html-страницу:
Заголовок первого уровня
Здесь просто текст
Заголовок второго уровня
Здесь просто текст
Внутренние таблицы стилей
Эту таблицу стилей задают внутри элемента HTML, с помощью атрибута style . Вот пример:
Это заголовок красного цвета
Минус этого способа очевиден: параметр style приходится задавать каждому заголовку и поэтому теряется преимущество CSS.
Встроенные таблицы стилей
В этом случае таблица стилей встраивается в заголовок html-страницы. В HTML есть теги , с параметром type , он указывает, что подключается таблица стилей CSS. Вот пример:
Этот заголовок будет красного цвета
Этот заголовок будет красного цвета
Все заголовки h1 у нас на странице красного цвета. При желании можно один из них перекрасить в синий цвет, для этого нужно воспользоваться внутренней таблицей стилей:
Этот заголовок будет красного цвета
Этот заголовок будет синего цвета
Этот заголовок будет красного цвета
В данной ситуации применяется принцип каскадирования, он разрешит конфликт. В нашем примере внутренняя таблица имеет выше приоритет и поэтому заголовок станет синим.
Минусы этого способа очевидны... Таблицу стилей нужно создавать для каждой HTML страницы, поэтому мы будем пользоваться внешней таблицей стилей.
Сейчас мы рассмотрели способы подключения CSS к HTML, далее рассмотрим синтаксис CSS.
Пока стили CSS не подключить к HTML странице, никакого эффекта от их использования не будет. Существует несколько способов, как это можно сделать.
Для тех, кто любит смотреть в формате видео.
Для того, чтобы продемонстрировать, как работает каждый из этих способов, возьмем, для примера, html-файл со следующим содержимым.
Задача стилей CSS, которые будут подключаться, сделать элемент абзаца
Красным цветом.
Во всех примерах, результат на веб-странице будет один и тот же. Вы увидите вот такой красный абзац текста.
1 вариант. Внутри открывающего тега с помощью атрибута style.
Элементам на странице, которые располагаются внутри элемента body, можно добавить атрибут style. Значением этого атрибута могут быть свойства и значения CSS, которые должны будут применены к этому элементу.
Давайте посмотрим, как это работает на конкретном примере. Атрибут style добавлен для элемента
Абзац
Обратите внимание, что в этом случае не нужно использовать селектор, т.к. элемент, к которому добавлены стили уже определен.
2 вариант. Внутри элемента style.
Еще один способ подключения стилей CSS, это воспользоваться элементом