2016-10-24
Создаем новый документ в фотошопе и переносим на него картинки
Здравствуйте уважаемый посетитель!
Сегодня рассмотрим довольно простые, но в то же время очень необходимые и часто выполняемые действия при создании дизайн-макета, это как создать новый документ в фотошопе и перенести на него картинки из ранее полученных заготовок.
- Создаем новый документ композиции шапки дизайн-макета сайта
- Переносим картинки заготовок
Создаем новый документ композиции шапки дизайн-макета сайта
В самом начале следует сказать, что тем, кому еще не приходилось иметь дело с графическими редакторами, целесообразно в первую очередь ознакомиться с их работой, хотя бы с основными инструментами, так как в противном случае будут не совсем понятны дальнейшие действия.
Это можно сделать, используя размещенные в сети интернет различные обучающие материалы по работе с графическими редакторами, а также воспользоваться, имеющимися здесь, на сайте бесплатными видеокурсами, для Adobe Photoshop - Фотошоп для начинающих (бесплатная версия) , для GIMP - Видеосамоучитель GIMP .
Как ранее отмечалось, здесь будет показано создание дизайн-макета с использованием редактора Adobe Photoshop CC. Но, аналогично можно все это выполнять и в программе GIMP.
Ранее, перед тем как делать заготовки для шапки, говорилось, что для отображения темы сайта, возникла идея показать автомобиль, защищенной некой защитной "аурой", а рядом с ним вора неудачника с поднятыми руками и попавшего в луч света прожектора.
По-моему, такая композиция в какой-то мере будет отражать суть противоугонной маркировки стекол, а именно: защиту автомобиля из-за малой заинтересованности воров к его угону и упрощение поиска автомобиля и поимки воров в случае совершения кражи.
В предыдущей статье мы сделали разметку макета, где шапке отведено место в размере 1200 * 210 пикселей (px), из которых 50px предусматривалось для меню. Также, мы получили заготовки для шапки сайта - это изображение автомобиля и вора, пытающегося его угнать. Используя это, попробуем создать картинку, отражающую тему нашего сайта.
В начале, создадим отдельный для шапки документ. Для этого, через меню "файл/создать" открываем окно "новый", вводим полученные при разметке размеры холста (ширина 1200px, высота 160px), как показано ниже и нажимаем "ОК".
Переносим картинки заготовок
Далее, перенесем элементы изображения наших заготовок на созданный холст шапки. Перенос элементов рассмотрим более подробно, так как эта операция встречается довольно часто при формировании изображений. И сделаем это на примере картинки автомобиля.
В первую очередь, для возможности работы с прозрачными и полупрозрачными участками изображений, переведем формат "jpg", в котором мы получили картинки заготовок, в растровый графический формат "png".
Это можно сделать довольно простым способом: в главном меню левой кнопкой нажать "Файл" и в появившемся всплывающем меню выбрать "Экспортировать", а затем "Быстрый экспорт в "PNG", как показано на рис. 2.
После чего, мы должны закрыть картинку в формате "jpg" и вновь открыть ее уже в формате "png".
Перед тем как переносить элементы изображений, мы должны их отделить от фона заднего плана. В фотошопе имеется несколько инструментов, позволяющих вырезать элементы, такие как, как "Быстрое выделение", "Волшебное палочка", "Лассо" и др. В GIMP имеются аналогичные инструменты.
Так как в наших заготовках присутствует однородный белый фон, контрастный с изображениями самих фигур, то в нашем случае довольно удобно использовать инструмент "Волшебное палочка".
Найти этот инструмент можно на панели инструментов в дополнительном меню, нажав правую кнопку, или зажав и задержав на пару секунд левую, как показано на рис.3.
Откроем первую заготовку - картинку автомобиля и выберем инструмент "Волшебное палочка".
Для того, чтобы выделить элемент, надо при включенном инструменте "Волшебное палочка", навести указатель на фон и нажать левую кнопку мыши. После этого элемент должен выделиться пунктирной линией. При этом, допуск в панели параметров лучше установить в пределах 30, а также включить "Сглаживание" и "Смежные пиксели", как это показано на рис.4.
Далее, перенесем выделенный фон заднего плана на другой вновь созданный слой. Для этого, при выбранном инструменте "Волшебное палочка" нужно навести курсор на изображение и нажать на правую кнопку мыши. После чего, в появившемся меню, выбрать "Вырезать на новый слой".
В итоге, после проделанных операций, мы получили элемент автомобиля, отделенный от фона заднего плана, который переместился на вновь созданный слой (в нашем случае это "Слой 1"). Это можно увидеть, если отключить "Слой 1", как показано на рис.6.
Но, если внимательно посмотреть на изображение автомобиля, то можно увидеть, что на нем остался еще фрагмент не удаленного фона в области спойлера. Удалим оставшийся фрагмент фона вместе со спойлером. На мой взгляд, спойлер здесь будет лишний.
Для удобства выделения необходимой области, увеличим масштаб изображения и воспользуемся инструментом "Магнитное лассо".
Этот инструмент можно найти на панели инструментов в дополнительном меню, нажав правую кнопку, или зажав и задержав на пару секунд левую, как показано на следующем рисунке.
Выделять элементы инструментом "Магнитное лассо" можно следующим образом. В начальной точке, щелкнув левой кнопкой следует двигаться по контуру выделяемой области, периодически нажатием кнопки фиксировать остановки в наиболее крутых изгибах контура. При этом, можно заметить, как наносимая линия выделения по ходу движения будет "примагничиваться" к контуру. В местах пересечения выделяемой области с ранее выделенным фоном, точной обводки контура не требуется.
После замыкания выделяемого фрагмента нужно два раза щелкнуть левой кнопкой мыши, после чего, выделяемая линия должна отобразиться пунктирной линией, что означает, фрагмент готов к обработке.
Для переноса выделенного фрагмента на вновь созданный слой, нужно, как и в предыдущем случае, навести курсор на изображение и нажать на правую кнопку мыши. После чего, в появившемся меню, выбрать "Вырезать на новый слой".
В конечном итоге, после всех проведенных операций, мы получим элемент автомобиля, полностью отделенный от фона заднего плана. Это можно увидеть, если отключить "Слой 1" и "Слой 2".
Полученную картинку лучше сохранить для дальнейшего использования, удалив, при этом ненужные слои фрагментов фона. Это можно сделать нажатием на выделенные слои правой кнопки мыши и выбрав левой кнопкой в появившемся меню "Удалить слои", как показано на рис.10. После чего, стандартным образом, через меню "файл/сохранить как" можно сохранить файл в нужном месте.
Для этого, в начале уменьшим размер изображения автомобиля соразмерно размеру шапки. Уменьшим ширину его, скажем, до 200 пикселей, как показано на рис.11.
Затем, с помощью изменения масштаба сделаем размер окна удобным для дальнейшей работы и переместим полученное изображение в новое окно. Для этого, кликнув правой кнопкой мышки по иконке открытого окна, в появившемся меню выберем "Переместить в новое окно".
Перед тем как переместить изображение автомобиля на холст шапки выберем инструмент "Перемещение". Этот инструмент можно найти на панели инструментов в дополнительном меню, нажав правую кнопку, или зажав и задержав на пару секунд левую.
Теперь все готово для переноса. Для этого, наведем курсор на изображение, нажмем левую кнопку мышки и не отпуская ее перетащим автомобиль на холст шапки.
На этом операцию по размещению изображения автомобиля в шапку мы завершили. На первый взгляд кажется, что это трудоемкое занятие, которе включает в себя множество разных операций. Но это, совершенно не так.
Кажущаяся трудоемкость вызвана тем, что здесь, в целях лучшего понимания показано все до мельчайших подробностей, даже не большие действия. На самом деле, если не расписывать каждый шаг, то времени на это уйдет не больше минуты.
Следующим шагом будет перенос на холст шапки фигуры вора с поднятыми руками из второй нашей заготовки. Делается это в точно таком же порядке, что и в предыдущем случае, только лишь ширину изображения при переносе, можно еще уменьшить, примерно до 70 пикселей. Поэтому, делать подробное описание этой операции, на мой взгляд, необходимости нет.
Конечный результат переноса фигуры вора показан на рис.15.
Перенесенные фигуры в дальнейшем можно перемещать в любом направлении, использовав инструмент "Перемещение". Его можно найти вверху панели инструментов, как показано ниже.
Также, мы можем изменять размер выделенных фигур, в режиме "Свободное трансформирование", который можно выбрать через меню "Редактирование", или воспользоваться горячими клавишами "Ctrl+T". А если, при этом, навести курсор на выделенный слой и нажать правую кнопку мышки, то в появившемся окне можно выбрать и другие операции по изменению выделенного изображения.
На этом, размещение изображений наших заготовок в шапке сайта мы закончили и переходим к созданию композиции.
В рамках этой статьи планировалось также показать и эту часть, но, получилось так, что описание переноса изображений заняло слишком большой объем, особенно в части графической информации. Наверное, слишком подробно все это здесь изображено. Но, может это и к лучшему.
Поэтому, оставшуюся часть, в которой будет рассмотрено создание композиции шапки сайта перенесем в следующую статью.
С уважением, Николай Гришин
Рад приветствовать вас читатели блога . В этом уроке вы узнаете как создать новый документ в фотошопе . Что бы создать новый документ (далее Н\д) перейдите на панель инструментов в раздел File. В открывшемся списке выберите строку New:
Перед вами откроется окно с настройками свойств Н\д:
Давайте разберем основные разделы:
- Name — Название вашего документа
- Preset — В этом списке содержатся стандартные шаблоны с настройками
- Разрешение (размер) вашего Н\д. В поле Width указывается размер по ширине, а в поле Height указывается размер по высоте. Сейчас единица измерения Н\д измеряется в пикселях (pixels), но можно указать сантиметры (cm), миллиметры (mm) и тд.
- Color Mode — здесь можно выбрать в каком режиме работать. Сейчас у нас выбран режим RGB. Этот режим удобен для цифрового редактирования. Правее можно указать «битность» будущего изображения. Чем больше бит, тем лучше будет качество редактирования, но вмесет с этим будет больше использоваться оперативной памяти. Не нужно ставить больше 16 бит, а лучше на первых порах ставьте 8 бит.
- Backqround Contents — в этом поле можно указать каким цветом будет залит основной слой Н\д. Можно выбрать либо White (белый), либо Backqround Color (цвет, который выбран в палитре инструментов), либо Transparent (Прозрачный слой).
После того поставите нужные свойства жмите OK. Если вы хотите сохранить эти настройки то можете нажать по кнопке Save Preset, что бы создать шаблон с настройками, который можно будет выбрать в списке Preset.
Просторы интернета просто заполонили уроки по фотошопу. Когда-то я тоже не имела никакого отношения к веб дизайну. И, несмотря на многообразие обучающих видео и статей, я столкнулась с тем, что в сети совершенно нет информации о таких азах как, допустим, как создать новый файл в фотошопе. Или документ, или лист… Кому как удобнее… Но суть не меняется. Вроде бы, простейшая вещь, но без нее далеко не уедешь. Думаю, сами уже не раз натыкались на урок, который начинается слов «создаем новый документ…», а как это делается благополучно опускается. Поэтому, думаю, в этот раз стоит акцентировать свое внимание на этом и разобраться с проблемой.
Давайте попробуем создать в фотошопе новый лист размеров 1000 на 1000 пикселей. Для этого запускаем программу и обращаем свой взгляд на верхнюю панель. Нас интересует вкладка «файл». Кликаем по ней и из выпадающего списка выбираем команду «создать». Либо же, для любителей «горячих клавиш» используем комбинацию ctrl+n.
На экране появляется окно с настройками, с помощью которых мы можем задать размер нового файла. Пусть будет 1000 на 1000 пикселей.
Здесь же вы можете задать разрешение.
Или воспользоваться уже существующими настройками, которые позволят вам создать документ одного из наиболее распространенных форматов.
Создать новый файл размером А4 в фотошопе тоже довольно просто. Эту функцию вы найдете во вкладке «набор». Из выпадающего списка нам следует выбрать «международный формат бумаги». И в поле «размер» из выпадающего списка выбираем А4.
Имя документа вы можете задать в поле «Имя». Где оно находится, смотрим на изображении.
Вот так выглядит новый рабочий лист в фотошопе.
Допустим, вы допустили ошибку при создании и теперь вам требуется изменить размер созданного документа. В этом вам поможет вкладка на верхней панели, что носит название «Изображение». Кликаем по ней и из выпадающего списка выбираем «размер изображения».
В появившемся окне мы можем задать новый размер рабочего листа.
Видите, как просто создать новый лист для работы в фотошопе? Хочу заметить, дабы подогреть ваш интерес к этой замечательной программе, что большая часть операций так же проста, как и продемонстрированная вам только что. А их комбинации создают потрясающие эффекты. Искренне надеюсь, что вы продолжите изучать веб дизайн и погрузитесь в мир волшебства, который носит имя Adobe Photoshop.
Одной из основ работы в графическом редакторе является умение изменять размер редактируемого изображения. Именно этот прием я хочу описать в сегодняшней статье, потому что знание базовых навыков необходимо при дальнейшем изучении такой серьезной программы как Adobe Photoshop .
Итак, первым делом открываем наш рисунок. После этого нам понадобится вкладка Изображение . Там выбираем пункт Размер изображения .
Перед нами появится окно, в котором мы и будем менять размер рисунка.
Обратите внимание, что в настройках размера есть два поля – это Размерность и Размер печатного оттиска . В чем же разница между ними? Размер печатного оттиска отображает ширину и высоту печатаемого документа, то есть при отправке на принтер, мы получим, в данном случае, изображение на бумаге, размером 20,11 х 14,66 см с разрешением 72 пикс/дюйм. Но что будет, если мы поменяем разрешение на 300 пикс/дюйм? В этом случае размер печатного оттиска не изменится, а поменяется Размерность . Теперь она составляет 2375 х 1708 пикс.
Объясню, что произошло. Photoshop, используя свои алгоритмы, достроил изображение до разрешения в 300 пикс/дюйм, добавив туда несколько сотен пикселей.
Понятное дело, качество рисунка от этого не улучшится, то есть изображение станет мутноватым. Но по сравнению, скажем, с Paint, Photoshop гораздо лучше справляется с этой задачей – пиксели сглаживаются. На рисунке слева – иконка, увеличенная в 10 раз при помощи Paint, справа – при помощи Photoshop.
На всякий случай напомню, что при уменьшении изображения, качество рисунка также заметно снижается, как и при увеличении. Поэтому, не стоит слишком увлекаться этим инструментом. Исключение – это работа с векторной графикой. В этом случае можно менять Размерность как угодно – качество изображения не пострадает.
Еще один интересный инструмент в Photoshop – это Размер холста . Этот инструмент также позволяет влиять на размер изображения. С его помощью можно как отрезать часть рисунка с любой стороны, так и, наоборот, добавить несколько пикселей.
К примеру, у нас есть вот такое изображение, размером 120 х 80 пикс.
Из него мы хотим получить иконку, размером 64 х 64 пикс. Воспользуемся инструментом Размер холста . Для этого выбираем в меню Изображение пункт Размер холста .
В появившемся окне нужно указать, изображение какого размера в пикселях (мм, процентах, дюймах) мы хотим получить. Стрелочками указываем, с какой стороны необходимо удалить или добавить пиксели.
В итоге получаем иконку нужного нам размера.
На этом все. Думаю, что эта статья будет полезна всем, кто начинает знакомство с программой Adobe Photoshop.
И снова я вас приветствую, уважаемые читатели и посетители моего блога о компьютерной грамотности для начинающих. Мы с вами сегодня продолжим наши недавно начавшиеся занятия по фотошопу и будем его осваивать. Сегодня у нас будет простенький урок, где мы с вами узнаем как создать новый документ в фотошопе. Казалось бы всё просто, но даже на этом этапе есть свои нюансы, которые мы и разберем.
Я много раз сталкивался с тем, когда люди не знали как создать документ и даже .
Ну давайте, заходите в ваш фотошоп, а дальше уже пройдемся по пунктам. Нажмите меню «Файл» в самом верху, а затем выберете «Создать документ» . Вот теперь-то и начинается самый главный процесс. Вас открывается окно с настройками создания.
Ну здесь всё очень просто. Вам просто нужно будет дать название вашему проекту, который вы будете воплощать жизнь. Это же имя будет использоваться по умолчанию, когда вы будете сохранять ваше изображение. Здесь это роли не играет, так что можете назвать проект хоть «Я твой дом труба шатал».
Ширина и Высота
Вообще-то после задания имени должен идти «Тип документа», но о нём мы поговорим позже, поэтому пока остановимся на ширине и высоте.
Тут, я думаю, вам должно быть всё понятно. Вы выставляете желаемое количество точек по горизонтали и вертикали. То есть если вы хотите, чтобы ваше будущее изображение было в точности по размеру экрана, то тогда смотрите разрешение вашего экрана и вставляете такие же цифры по ширине и высоте, например 1366 и 768.
Только смотрите, чтобы единица измерения стояла «Пиксели», а то я как-то случайно поставил размер 520×300 только в сантиметрах. Ох и здоровенная же штука получилась. Просто как видите, вы можете задавать разные единицы измерения. Но если вы работаете с простыми цифровыми изображениями, то выбирайте размер в пикселях.
Ну а если вам нужно подогнать лист под формат А4, то ставьте размер 210 по ширине и 297 по высоте (это как раз размер бумаги этого известного формата). Ну и конечно же не забудьте поставить единицы измерения в миллиметрах. Суть уловили? Тогда идем дальше.
Разрешение
Разрешение здесь является не таким же параметром, который мы использовали выше. Здесь немножко по другому. Но суть остается та же: чем больше разрешение — тем качественнее изображение. Вы это скорее всего не заметите при обычном просмотре, но при увеличении изображения качество будет теряться быстрее у той фотки, у которой меньше количество точек на дюйм.
Единица измерения по умолчанию стоит 72 пикселя на дюйм. Это стандартное разрешение в стандартных единицах измерения. Для работы с обычным изображением или фотографией вам этого хватит за глаза, но если вам нужна абсолютная точность, качество или просто хотите подготовить документ для печати, где нужно, чтобы всё было идеально, то ставьте разрешение 300 точек на дюйм.
Качество будет лучше, но и как обычно увеличивается размер итогового изображения. Вы сами можете наблюдать, как изменяется размер вашего будущего изображения при изменении разрешения, да и других параметров тоже. Для этого посмотрите в правый нижний угол окна создания документа. Вы особенно только не пугайтесь, потому что при сохранении в другом формате размер будет меньше.
Цветовой режим
Этот режим определяет с какой вы будете работать. Но для самых обычных целей и во время первоначального обучения ставьте только RGB и не стесняйтесь. И не забудьте поставить 8 бит. Этого нам хватит. Или вы считаете, что 16 миллионов цветов будет недостаточно?
Если хотите, то ставьте 16 и 32 бита, только вы разницы не увидите, а размер изображения увеличится.
Содержимое фона
Здесь определяется какой фон будет у нас в начале. По умолчанию фон всегда белый. да и используется он чаще всего для создания изображений. Так что можете оставить его. Но вы также можете поставить фон определенного цвета, который вы сами можете задать и прозрачный фон.
Прозрачный фон — это самое интересное. Очень удобная вещь для создания каких-то логотипов или других изображений, где фон не нужен. Благодаря такой прозрачности, рисунки можно лепить куда угодно в другие изображения и они не его не испортят, так как фон загораживать не будет. Такие файлы с поддержкой прозрачности хранят в формате PNG. Этот формат мы рассматривали в статье про .
Ну для начала поставьте белый фон, так кк с ним работать легче всего.
Тип документа
Как и обещал, возвращаюсь к тому пункту, который я пропустил. Здесь мы можем выбрать один шаблонов для каких-то определенных форматов. Например выше я говорил вам, что вы можете задать ширину и высоту в миллиметрах, чтобы получить формат A4. Но на самом деле всё можно сделать гораздо легче. Достаточно лишь нажать на «Тип документа» , и выбрать из выпадающего списка «Международный формат бумаги» , после чего поле «Размер» станет активным и вы сможете выбрать уже готовый формат А4, который настроен автоматически.
Точно также происходит, если вы хотите формат по размер фотографии 10×15. Просто выбираете набор «Фото» , а затем в графе размер «10×15». Точно также можете посмотреть другие форматы и размеры. Таким образом этот процесс может облегчить вам процесс создания нового документа.
Исходя из всех этих нюансов, вы можете создать документ, подогнав его под свои нужды. Не волнуйтесь, ничего страшного здесь нет. Всё равно для каждой отдельной статьи я буду говорить какие параметры ставить. Ну а так попробуйте сами. Ничего плохого уж точно не случится.
Ну а на этом я урок заканчиваю. Надеюсь, что всё было понятно. Если есть какие-то вопросы, то непременно задавайте их. Ну а вообще, если вы хотите изучить фотошоп в кратчайшие сроки, без лишней воды и разбираться в нём на 5 с плюсом, то советую вам обязательно посмотреть превосходный видеокурс по работе в фотошопе с нуля . Это действительно просто великолепный курс, в котором всё расставлено по порядку, а не в разнобой, и рассказано человеческим языком со всеми объяснениями.
С уважением, Дмитрий Костин
