Уменьшение размеров элементов в Photoshop. В фотошопе размер


Создание дизайна сайта в фотошопе, размеры макета

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

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

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

создание дизайна сайта

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

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

А вот о ширине следует призадуматься, так какого размера делать то ее???? А рисовать ширину тела сайта необходимо в 1003 пикселя, Вы спросите, почему 1003 пикселя, а не 1024, да потому как нужно учитывать боковой скроллинг у браузера, а он составляет немного не мало 21 пиксель.

размеры макета

Вот и получается, что тело нашего сайта должно быть 1003 пикселя, этот параметр гарантирует, что у вас не появится горизонтальный скроллинг у сайта. Так как бывают случаи, когда верстальщик верстает макет, под разрешение 1024х768 пикселей, после чего появляется горизонтальный скроллинг, благодаря которому небольшая, но все, же часть сайта находится вне пределов монитора пользователя.

А это уже как вы наверное понимаете мало того что некорректно смотрится но и вызывает неудобство для пользователя сайтом (потенциального клиента), это большой минус.  Этот скроллинг появляется из-за того что дизайнер не учел что фиксированная ширина макета сайта 1003 пикселя, а верстальщик сверстал макет на 1024 пикселя. Конечно, это может быть и ошибка верстальщика, но сейчас не о верстке.

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

Я  при создание дизайна сайта в фотошопе, использую размеры холста равные 1200 х 1800 пикс. Фиксированную ширину делаю в 1000 пикселей, а оставшиеся 200 пикселей разделяю пополам по 100 на правую и левую стороны соответственно, которые будут выполнять функцию резинки для остальных разрешений мониторов. Ниже я привел схему, каких размеров я создаю холст и разметку.

разметка страницы дизайна сайта

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

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

fotodizart.ru

Как в фотошопе уменьшить размер вырезанного объекта?

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

Уменьшение размера объекта в Photoshop при помощи инструмента «Свободное трансформирование»

Самый простой и быстрый способ изменения размеров объекта в фотошопе заключается в использовании инструмента «Свободное трансформирование«. Находится он во втором пункте главного меню — «Редактирование«.

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

Далее переходите в пункт меню «Редактирование» и выбираете там «Свободное трансформирование«.

изменение размеров объектов в photoshop

Свободное трансформирование в фотошопе

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

как в фотошопе уменьшить размер вырезанного объекта

Квадраты, потянув за которые вы измените размер объекта

После того, как размер выставлен для его применения и сохранения необходимо нажать кнопку «Enter«.

Таким образом вы можете увеличивать или уменьшать размеры любых элементов, в том числе и вырезанных, в программе Photoshop всех версий.

helpadmins.ru

Как изменить размеры изображений в фотошопе - Основные фото обучающие уроки - Каталог файлов

Вот изображение, которое я имею открытый на моем экране:A small hut in Mexico. Image © 2012 Photoshop Essentials.com

Оригинальная фотография.

Это - фотография, взятая поездка в Мексику. Конечно, оригинальная версия фотографии была намного больше, чем, что мы видим здесь, но я изменил размеры его и сделал его меньшим, таким образом, это соответствует лучше на странице. Как я делал это? Это легко. Чтобы изменить размеры изображения в Фотошопе, мы используем команду Размера Изображения, до которой мы можем добраться, подойдя к меню Image в Строке меню вдоль вершины экрана и выбрав Размер Изображения:Selecting the Image Size command in Photoshop. Image © 2012 Photoshop Essentials.com

Пойди в Изображение> Размер Изображения.

Это поднимет диалоговое окно Image Size, как показано ниже:The Image Size dialog box in Photoshop. Image © 2012 Photoshop Essentials.com

Диалоговое окно Image Size.

Этот скриншот диалогового окна Image Size был немедленно сделан после того, как я открыл оригинальную фотографию, прежде чем я изменял размеры его к уменьшенному варианту для показа на странице. Если ты посмотришь близко, то ты заметишь, что диалоговое окно разделено на две главных секции -Пиксельные Размеры и Размер Документа - каждый показывающие различные измерения. Так как эта обучающая программа - все о том, как изменить размеры изображения, мы только должны интересоваться главной секцией, Пиксельными Размерами, так как это - то, которое управляет фактическими, физическими аспектами (в пикселях) фотографии.Давайте посмотрим более близко, тогда, в части Pixel Dimensions, которая говорит нам две вещи о нашем изображении. Во-первых, если мы смотрим непосредственно направо от слов "Пиксельные Размеры", мы видим текущий размер файла изображения. В моем случае это говорит мне, что моя фотография составляет 14.6 М (стенды "M" для мегабайтов, или "миллионов байтов"):The current file size as shown in the Image Size dialog box. Image © 2012 Photoshop Essentials.com

Текущий размер файла показан направо от слов "Пиксельные Размеры".

Знание размера файла изображения может быть полезным, если ты хочешь сравнить размер оригинальной версии с измененной версией, но это не помогает нам фактически изменять размеры нашего изображения. Для этого нам нужна другая часть информации, которую часть Pixel Dimensions говорит нам - текущаяШирина и Высота нашего изображения:The current width and height of the image, in pixels, as shown in the Image Size dialog box. Image © 2012 Photoshop Essentials.com

Текущая ширина и высота изображения, в пикселях.

Здесь, мы видим, что моя оригинальная фотография была 2608 пикселей шириной к 1952 пикселя высотой. В том размере у меня не было бы проблемы при печати потрясающего 8x10, но мне был нужен уменьшенный вариант, тот, который будет соответствовать лучше на этих страницах. Таким образом, как я делал его меньшим? Я просто изменил числа в коробках Ширины и Высоты к тому, в чем я нуждался! Я установлю новую ширину для своего изображения к 900 пикселям и высоты к 647 пикселям (конечно, это - просто пример, ты можешь войти в любой размер, в котором ты нуждаешься):Changing the Width and Height of the image in the Image Size dialog box. Image © 2012 Photoshop Essentials.com

Вход в новую Ширину и Высоту оценивает за изображение.

Чтобы изменить ценности Ширины и Высоты, просто дважды щелкни по внутренней из этих двух коробок (или Ширина или Высота), который будет, в настоящее время выделять число показывая в коробке, и затем печатать новую стоимость. Когда ты сделан, щелкни кнопкой OK, и Фотошоп изменит размеры твоего изображения к новым размерам, которые ты определил.Ты можешь также изменить размеры своего изображения процентом размера исходного изображения вместо того, чтобы печатать в определенной пиксельной стоимости. Если ты посмотришь направо от коробок стоимости Ширины и Высоты, то ты заметишь, что тип измерения в настоящее время устанавливается в пиксели, но если ты нажмешь или на слово "пиксели" или на стрелку вправо слова, то выпадающее меню появится, который позволяет тебе изменить тип измерения на процент:Changing the measurement type from pixels to percent in the Image Size dialog box. Image © 2012 Photoshop Essentials.com

Изменение измерения печатает от пикселей до процента.

Как только ты выбрал процент в качестве своего типа измерения, часть Pixel Dimensions покажет ширину и высоту твоего имиджа процента, а не пиксельной стоимости. Изменение размеров изображения, используя процент сделано тот же самый путь, как будто ты использовал пиксельные ценности. Просто дважды щелкни в коробке стоимости Ширины или Высоты и типе в новом проценте. Когда ты сделан, щелкни кнопкой OK, и Фотошоп изменит размеры изображения к любому проценту, оценивают тебя введенный.Ты заметишь, если ты не изменил настройки по умолчанию, что, когда ты входишь в новую стоимость Ширины или Высоты, другая стоимость изменяется автоматически. Другими словами, при попытке изменить стоимость для ширины твоего изображения, то высота изменится наряду с ним. Поэтому по умолчанию Фотошоп сохраняет оригинальное соотношение сторон изображения неповрежденным, когда ты изменяешь размеры его, который обычно является, что ты хочешь. Обычно, ты не изменил бы ширину фотографии, не изменяя высоту также, иначе вещи будут выглядеть искаженными. Фотошоп сообщает нам, что ценности ширины и высоты изображения в настоящее время соединяются, показывая связанный символ направо от ценностей:An icon tells us the Width and Height values of the photo are linked together. Image © 2012 Photoshop Essentials.com

Этот символ говорит нам, что ценности Ширины и Высоты в настоящее время соединяются.

Если ты посмотришь около основания диалогового окна Image Size, то ты будешь видеть Ограничить выборПропорций, который управляет, связаны ли ширина и высота. По умолчанию выбор отобран, но если ты должен изменить ширину и высоту отдельно, просто сними флажок с этим выбором:The Constrain Proportions option in the Image Size dialog box. Image © 2012 Photoshop Essentials.com

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

 

Изменение размеров и качество изображения
Изменение размеров изображений в Фотошопе может быть легким, но есть что-то очень важное, чтобы иметь в виду когда дело доходит до поддержания качества изображения. В целом это должно хорошо сделать фотографию меньшей, чем ее первоначальный размер, но ты хочешь избежать делать его больше, когда это возможно. Давайте смотреть на пример.Скажем, я должен сделать ширину и высоту моей фотографии меньшими на 50 процентов. Чтобы сделать это, в диалоговом окне Image Size, я просто изменю и Ширину и ценности Высоты к 50 процентам:Resizing the image by 50 percent. Image © 2012 Photoshop Essentials.com

Сокращение размера изображения.

Я нажму OK в верхнем правом углу диалогового окна Image Size, в котором Фотошоп пункта закрывает диалоговое окно и изменяет размеры моего изображения. Так как я сделал и ширину и высоту меньшими на 50 процентов, фотография - теперь одна четверть своего первоначального размера:The image after resizing it by 50 percent in Photoshop. Image © 2012 Photoshop Essentials.com

Изображение после изменения размеров ширины и высоты на 50 процентов.

Как мы видим, фотография теперь значительно уменьшенная, но полное качество изображения остается довольно последовательным. Посмотрим, что происходит, тем не менее, если я беру это меньшее изображение и пытаюсь увеличить его назад к его первоначальному размеру. Чтобы сделать это, я вновь открою диалоговое окно Image Size, подходя к меню Image наверху экрана и выбирая Размер Изображения, тогда я установлю и Ширину и ценности Высоты к 200 процентам:Resizing the photo by 200 percent in Photoshop. Image © 2012 Photoshop Essentials.com

Изменение Ширины и Высоты оценивает 200 процентам.

Я нажму OK, чтобы принять ценности и близко из диалогового окна Image Size, в котором Фотошоп пункта увеличивает изображение, делая его четыре раза размером, которым это было момент назад:The image after resizing it by 200 percent in Photoshop. Image © 2012 Photoshop Essentials.com

Изображение после увеличения его размера на 200 процентов.

Давайте сравним качество изображения увеличенной версии с той из оригинальной версии:A small hut in Mexico. Image © 2012 Photoshop Essentials.com

Оригинальная фотография.

Увеличивая изображение, мне удалось возвратить его к его первоначальному размеру, но когда мы сравниваем качество с тем из оригинала, увеличенная версия ясно как не хорошо выглядит. Мы потеряли много детали по изображению, и это начинает выглядеть мягким и расплывчатым. Если бы я должен был увеличить его еще больше, качество изображения прогрессивно становилось бы хуже.Вот то, почему. Когда ты используешь команду Размера Изображения, чтобы сделать фотографию меньшей, Фотошоп делает ее меньшей по существу, выбрасывая пиксели. Это просто берет некоторые пиксели от изображения и бросает их виртуальное окно. К счастью, Фотошоп действительно хорош в знании, которое пиксели выбросить, не жертвуя качеством изображения, таким образом делая наши изображения меньшими обычно не является проблемой.Проблема входит, когда мы просим, чтобы Фотошоп сделал наши изображения больше. Если Фотошоп делает их меньшими, отказываясь от пикселей, как ты думаешь, что он делает их больше? Если ты ответил, "Добавляя пиксели к изображению", ты будешь правым! Но вот больший вопрос. Где Фотошоп получает эти новые пиксели, от которых он добавляет к изображению? Если ты ответил, "Гм, я не уверен. Я предполагаю, что это просто отчасти составляет их из ничего", ты был бы правым снова!В этом и заключается проблема. Когда Фотошоп делает изображение больше, он должен добавить пиксели, которые не были там прежде, и так как Фотошоп не был на сцене, когда ты сделал фотографию, он понятия не имеет, на что должна фактически быть похожей большая, более подробная версия изображения, что означает, что он должен предположить. Конечно, Фотошоп - очень сильная программа, и ее предположения основаны на некоторой очень сложной и высшей математике, но в конце дня, это - все еще просто предположение, и это не собирается предполагать правильно. Итог, чем больше ты пытаешься сделать свое изображение, тем хуже твое изображение собирается посмотреть. Вместо острой, очень подробной версии ты надеялся на, ты получишь что-то, что выглядит унылым, мягким и расплывчатым.

 

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

www.photophotoshop.ru


Смотрите также