Как закруглить углы в CSS и HTML. Закругление углов картинок. Прямоугольник с закругленными углами Геометрическая фигура с закругленными углами

Эллипс.

Многоугольник.

Линия.

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

Рука – если изображение не помещается в рамку экрана, мы можем его перетаскивать.

Поворот вида. Поворачивает полностью лист со всеми слоями.

Масштаб - если навести курсор на изображение,он принимает форму,крестик в кружке, и с каждым щелчком левой кнопкой мыши изображение будет увеличиваться. Если нажать клавишу Alt, то с каждым щелчком, изображение будет уменьшаться.

Цветовые квадраты -основной (верхний) цвет и фоновый (нижний) цвет.

Режим быстрой маски . Вызывается кнопкой Q. полупрозрачное изображение (что-то вроде пелёночки прикрывающей рисунок), на котором можно рисовать как на самом обычном слое, а потом преобразовать эту маску обратно в выделение.

Режимы просмотра документов . Первый, стандартный режим, ставится по умолчанию, второй-полный экран с полоской меню, третий-полный экран. Переключаться между режимами можно так же нажатием клавиши F.

"Горячие" клавиши Photoshop.

ctrl+N создание нового файла

ctrl+O открытие файла

ctrl+S сохранение файла

ctrl+W закрытие файла

ctrl+A выделение всех элементов

ctrl+C копировать

ctrl+V вставить

ctrl+ "-" уменьшить размер

ctrl+ "+" увеличить размер

ctrl+ "0" натуральный размер

F смена режимов отображения экрана

F5 палитра настройки кисти

F7 окно слоев

tab режим просмотра

ctrl+R отображение линеек

ctrl+D снятие выделений

ctrl+H скрыть/показать направляющие

ctrl+T свободное трансформирование (изменение размера картинки, поворот, трансформация)

ctrl+enter окончание работы с текстом

ctrl+shift+N создание нового слоя

ctrl+J дублировать слой

ctrl+G объеденить слои в группу

ctrl+E слить слой с нижним слоем

ctrl+shift+E слить все слои в один

ctrl+U окно цветовой фон/насыщенность

ctrl+B окно цветового баланса

ctrl+shift+U быстрое перекрашивание изображения в черно-белое

ctrl+alt+Z вернуться на несколько шагов назад сразу

ctrl+shift+Z вернуться на шаг назад

ctrl+Z вернутся на 1 шаг назад/вперед

[ уменьшить размер кисти

] увеличить размер кисти

shift+[ уменьшить жесткость кисти

shift+] увеличить жесткость кисти

Лекция 3. Шрифты.

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

1. Шрифты с засечками

2. Рубленные шрифты

3. Рукописные

4. Машинописные

1. Шрифты с засечками имеют небольшие поперечные линии на концах штрихов и имеют переход от толстой линии к тонкой.

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

3. Рукописные шрифты имитируют текст написанный вручную ручкой, пером, кисточкой и т.п. В этой категории так же можно выделить подкатегории:

Эти шрифты выглядят, как правило, довольно декоративно, а потому не стоит их использовать для набора длинных текстов. Они будут плохо смотреться в тексте, выполненном только заглавными буквами. Зато набранные большим кегелем такие шрифты могут создавать потрясающие эффекты. Запомните это для нашего следующего урока по сочетанию шрифтов.

4. Машинописные шрифты имитируют текст, набранный на печатной машинке.

5. Декоративные. В эту категорию можно условно отнести все остальные шрифты. Они совершенно не подходят для длинных текстов, но они незаменимы при оформлении заголовков, художественных текстовых блоков.

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

Первый мой урок Photoshop расскажет Вам о том как закруглить углы фото.

При изготовлении сайтов частенько приходится сталкиваться с проблемой как закруглить углы рисунка, или как закруглить углы фото. В этом уроке Фотошоп я научу Вас как закруглить углы рисунка в фотошоп . Так же этот урок Фотошоп позволит Вам закруглить углы фотографии. Надеюсь, это и так Вам понятно. Ведь для Фотошоп и картинка и фотография всё едино. В своей работе я пользуюсь Adobe Photoshop SC5, русская версия. Ну не силён я в языках.

Сегодняшний мой урок посвящен закруглению углов фото в фотошоп. Давайте вместе сделаем фотографию с скругленными углами как у меня на картинке.

1. Чтобы осуществить закругление углов в Фотошопе , откроем с помощью Фотошоп нужную нам картинку (фотографию). Для примера я взял одну из фотографий своего фото архива.

2. Приводим размеры рисунка к нужным нам параметрам. Для этого нажимаем ALT+CTRL+I. Откроется окно "Размер изображения". Задаем необходимые нам размеры. Можно и просто обрезать картинку до нужного размера.

3. Выделяем рисунок (CTRL+A) (появится пунктирная линия по периметру) и копируем его (CTRL+C); Копируем фото для того, чтобы исходное изображение осталось без изменений, посте того, как мы осуществим закругление углов в Фотошопе . Хотя можно работать и на оригинале, но тогда, когда закругленные углы будут готовы, мы просто сохраним фото как другое изображение.

4. Открываем новое окно (CTRL+N), задаём нужные размеры изображения и нажимаем "ОК". Прошу обратить внимание, что я задал фон - "прозрачный". Вы можете сразу задать фон, требуемого Вам цвета;

5. Вставляем в новое окно скопированный рисунок (CTRL+V) и создаём новый слой (CTRL+SHIFT+N). В Этом слое с помощью инструмента "прямоугольник со скругленными углами " рисуем прямоугольник нужного размера. Цвет прямоугольника значения не имеет. Выбор инструмента производится путём нажатия на правую кнопку мыши. Или простым нажатием клавиши (U). Радиус закругления устанавливаем по своему усмотрению (см. рисунок ниже);

При необходимости Вы можете переместить нарисованную фигуру с помощью стрелок на клавиатуре или с помощью мыши, удерживая нажатой левую клавишу. Предварительно не забудьте активировать на панели инструментов "перемещение" (верхняя кнопка). Также Вы можете изменить размер фигуры. Для этого нажмите (CTRL+T) и растяните фигуру до нужных размеров с помощью мыши, удерживая левую клавишу. Если Вы хотите изменить размер с сохранением пропорций, Вам необходимо удерживать SHIFT, и растягивать за угол фигуры.

6. Переходим в панель слоёв. Удерживая CTRL кликаем левой клавишей мыши по превью (картинке) слоя прямоугольника. Появится пунктирная обводка фигуры.

7. Переходим на нижний слой. Для этого в панели слоёв кликаем справа от картинки. В нашем случае - слоя 1. Выделение голубым цветом перейдёт на слой 1.

8. Нажимаем CTRL+ SHIFT+I. Появится пунктирное выделение по границе той части картинки, которая находится за пределами нашего прямоугольника имеющего закруглённые углы .

9. Нажимаем на клавиатуре DEL. Часть изображения, что находится за пределами прямоугольника будет удалена.

10. Вновь активируем слой с прямоугольником. Удаляем его, нажав на иконку корзины.

11. Нажимаем клавишу "М" и кликаем левой клавишей мыши в любое место изображения. Выделение убрано. готовы. Можно сохранять изображение, которое мы получили осуществив&закругление углов в Фотошопе , в нужном нам формате.

Если такое изображение будет использовано для создания дизайна сайта, сохраняйте его для Web и устройств (ALT+SHIFT+CTRL+S).

12. Внимание! Если у Вас по краям изображения со скругленными углами остались прозрачные пикселы, Вам необходимо выполнить тримминг. Для этого нажмите "Изображение", выберите "Тримминг", в появившемся окне установите настройки как у меня на картинке и нажмите "Ok". Размер холста приобретет размер изображения, а все лишние прозрачные пикселы будут удалены.

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

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

1.Прямоугольник (Rectangle).

Рисует прямоугольник путем перетаскивания курсора.

Чтобы нарисовать квадрат или круг, нажмите клавишу «Shift» и, не отпуская ее, перетащите курсор по диагонали, пока не получите квадрат нужного размера.

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

2. Прямоугольник со скругленными углами (Rounded Rectangle).

Радиус угла определяет скруглением углов прямоугольника.

Радиус скругления по умолчанию задает в окне установок: Редактирование>Установки> Основные (Edit>Preferences>General). Поле «Радиус угла» (Corner radius).

Изменить радиус скругления интерактивно (при работе с инструментом «Прямоугольник со скругленными углами»):

в окне «Прямоугольник со скругленными углами» (которое появляется при щелчке в рабочей области);

при перетаскивании инструмента нажимать клавиши «Стрелка вверх» или «Стрелка вниз» (увеличить или уменьшит радиус скругления), «Стрелка влево» (получить прямые углы), «Стрелка вправо» (получить углы с максимальным скруглением).

3.Эллипс (Ellipse).

Рисует эллипс путем перетаскивания курсора.

4.Многоугольник (Poligon).

Рисует многоугольник путем перетаскивания курсора по диагонали или по дуге, поворачивая фигуру.

Свойства многоугольника (радиус и количество сторон) задаются в диалоговом окне «Многоугольник» (Poligon), которое появляется при щелчке в той точке, где должно начаться построение прямоугольника.

Для добавления и удаления сторон многоугольника нажимайте клавиши «Стрелка вверх» и «Стрелка вниз».

6.Звезда (Star ) .

См. многоугольник.

Свойства звезды: Radius 1 – расстояние от центра звезды до наиболее близких к нему точек; Radius 2 – расстояние от центра звезды до наиболее далеких от него точек; Points (Концы) – количество концов звезды.

Группа 2 (окно свойств инструмента появляется при щелчке в области действия, а именно, там, где должно начаться построение, или при двойном щелчке по инструменту)

1. Отрезок линии (Line Segment ) .

В окне «Свойства отрезка линии» (Line Segment Tool Options) указываются следующие параметры: длина линии, угол наклона, Окрашивать линии в текущий цвет заливки (Fill line).

2.Дуга (Arc ) .

В окне «Параметры инструмента «Отрезок дуги»(Arc Segment Tool Options») сперва необходимо определить точку, из которой будет нарисована дуга, на локаторе неподвижной точки.

Свойства дуги:

Length X - Axis (Длина по оси Х) – толщина дуги.

Length Y - Axis (Длина по оси Y) – высота дуги.

Type (Тип) – тип контура объекта: открытый или закрытый.

Base Along (Вдоль) – направление дуги по осям (X или Y).

Slope (Наклон). Направление наклона дуги: вогнутая дуга – отрицательное значение; выгнутая дуга – положительное значение; прямая линия – нулевое значение.

Fill Arc (Окрашивать дугу в цвет заливки).

3. Спираль (Spiral ) .

В окне «спираль» указываются свойства спирали:

Radius (Радиус) – расстояние от центра до самой дальней точки спирали.

Decay (Рост) – величина, на которую каждый виток спирали будет уменьшаться по сравнению с предыдущим витком.

Segments (Число сегментов) – количество сегментов в спирали; каждый полный виток спирали состоит из четырех сегментов.

Stale (стиль) – направление спирали.

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

Скругление углов в Photoshop

Для достижения результата мы используем один из инструментов группы «Фигуры» , а затем просто удалим все лишнее.

Открываем в Фотошопе фотографию, которую собираемся редактировать.
Затем создаем копию слоя с водопадом под названием «Фон» . Для экономии времени воспользуемся горячими клавишами CTRL+J . Копия создается для того, чтобы оставить нетронутым исходное изображение. Если (вдруг) что-то пойдет не так, можно будет удалить неудачные слои и начать заново.
Идем дальше. А дальше нам понадобится инструмент «Прямоугольник со скругленными углами» .

В данном случае из настроек нас интересует только одна – радиус скругления. Значение этого параметра зависит от размера изображения и от потребностей. Мы зададим значение в 30 пикселей, так будет лучше видно результат.
Далее рисуем на холсте прямоугольник любого размера (мы его потом будем масштабировать).
Теперь нужно растянуть полученную фигуру на весь холст. Вызываем функцию «Свободное трансформирование» горячими клавишами CTRL+T . На фигуре появится рамка, при помощи которой можно перемещать, вращать и изменять размер объекта.
Нас интересует масштабирование. Растягиваем фигуру при помощи маркеров, указанных на скриншоте. После завершения масштабирования нажимаем ENTER .

Совет: для того, чтобы совершить масштабирование максимально точно, то есть, не выйдя за пределы холста, необходимо включить так называемую «Привязку» . Посмотрите скриншот, там указано, где данная функция находится. Она заставляет объекты автоматически «прилипать» к вспомогательным элементам и границам холста.
Далее нам необходимо выделить полученную фигуру. Для этого зажимаем клавишу CTRL и кликаем по миниатюре слоя с прямоугольником.
Как видим, вокруг фигуры образовалось выделение. Теперь переходим на слой-копию, а со слоя с фигурой снимаем видимость (см. скриншот).
Теперь слой с водопадом активен и готов к редактированию. Редактирование заключается в удалении лишнего из углов картинки. Инвертируем выделение горячими клавишами CTRL+SHIFT+I . Теперь выделение осталось только на углах.

Прямоугольник — самая простая из основных фигур, отвечает за нее элемент . Задаем х- и у-координаты верхнего левого угла прямоугольника, его ширину (width) и высоту (height). Прямоугольник будет залит цветом (свойство fill), который мы укажем, по умолчанию — это черный цвет. Цвет заливки можно задать всеми теми же способами, что и для . Если указать значение «none», прямоугольник будет без заливки, то есть прозрачным. Правила указания степени прозрачности заливки прямоугольника (fill-opacity) аналогичны правилам для линии. Оба свойства «fill» и «fill-opacity» являются свойствами представления и описываются внутри атрибута style.

Заметка

Визуально x и y координаты в параметрах прямоугольника могут оказаться не левым верхним углом, если например к фигуре будет применена трансформация.

Контуры прямоугольника рисуются той же кисточкой, что и линии, с теми же самыми свойствами. По умолчанию для кисточки используется значение none (stroke: none) и контур не рисуется. Несколько примеров:

Результат в «живую» или смотрим на картинке:

Заметка

Контур рисуется таким образом, что его половина находится внутри прямоугольника, а другая половина — вне его. Смотрим на один из прямоугольников в увеличенном виде:

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

Закругленные прямоугольники

Чтобы нарисовать прямоугольник с закругленными углами, нужно задать радиусы закругления угла по осям x (rx) и y (ry). Максимальное число для rx — половина ширины (width) прямоугольника. Максимальное значение для ry — половина высоты (height). Если задать только одно из rx или ry, тогда неуказанное будет приравнено к указанному.