Как нарезать макет сайта в фотошопе


Скоростная нарезка шаблонов сайта | GeekBrains

Как быстро нарезать PSD макет в Adobe Photoshop CC 2015.

1 минута33606

https://d2xzmw6cctk25h.cloudfront.net/post/154/og_cover_image/9c297d7af905c882e94b8729de26ebc0

Быстрая нарезка PSD шаблона

Не так давно вышел Adobe Photoshop CC2015, и в нём появилась очень инетересная функция "Экспорт". Она позволяет сохранить слой из PSD-документа в отдельный файл в формате PNG. После некоторых эксперементов мне удалось настроить Photoshop так, что макет я нарезаю за 3-4 минуты. Поделюсь своим опытом.

  1. Для начала кликаем "Инструменты", "Перемещение", и в верхнем меню выставляем. Теперь, если мы кликнем по слою, он будет выделен и показан его размер. 
  2. Дальше идём по цепочке "Редактирование" => "Настройки" => "Основные" => "Инструменты" и ставим галочку "Мастштабировать колёским мыши". Помогает экономить массу времени.
  3. Теперь кликаем по слою правой кнопкой и выбираем "Быстрый экспорт в PNG" - если вы хотите сохранить в директорию с макетом и стандартным именем,  или "Экспортировать как" - если хотите выбрать имя и директорию.
  4. Теперь зададим для этих функций горячие клавиши. Для этого идём по цепочке "Редактирование" => "Клавиатурные сокращения", выбираем "Меню панели" в списке находим "Слои" для команд "Быстрый экспорт в PNG" и "Экспортировать как" ставите удобные вам: 

.

5. Снова идём в "Редактирование" => "Настройки", только на этот раз в "Экспорт", и там выставляем:


  

В принципе, всё. Теперь достаточно выделить нужные вам слои и вызвать быстрый экспорт. Это занчительно быстрее, чем пользоваться инструментом "Раскройка". Если у вас есть свои наработки, буду рад увидеть их в коментариях.

P.S. Статью пишу в первый раз, не судите строго.

Тем, кто хочет стать программистом, рекомендуем профессию «Веб-разработчик».

обучениеitкейсопытphotoshop дизайн

Как создать макет веб-сайта в Photoshop

Этот урок научит вас создавать макет веб-сайта, показанный ниже, в Photoshop. Щелкните здесь, чтобы просмотреть готовый макет. Вы также узнаете, как преобразовать это в оптимизированный html-сайт, в следующих нескольких руководствах.

Это руководство является частью 4-страничного учебного пособия о том, как создать простой веб-сайт с помощью Photoshop и Dreamweaver.

Урок 1: Создание уникального заголовка веб-сайта
Урок 2: Создание макета веб-сайта в Photoshop
Урок 3: Нарезка макета в Photoshop
Урок 4: Создание веб-сайта в Dreamweaver

Мы разработали макет с черным фоном с областью для логотипа, привлекательным графическим заголовком, навигационными ссылками, контентом и изображениями.

Помните, что при разработке макета вам необходимо определить пространства для следующих элементов:

Никакая часть этих материалов не может быть воспроизведена каким-либо образом без явного письменного согласия Entheos. Любое несанкционированное использование, совместное использование, воспроизведение или распространение этих материалов любыми средствами, электронными, механическими или иными, строго запрещено.

.

25 отличных уроков по веб-дизайну в Photoshop

25 Excellent Photoshop Web Design Layout Tutorials

Photoshop - популярный инструмент для веб-дизайна. С его помощью вы можете создавать макеты веб-дизайна, которые впоследствии можно преобразовать в функциональный шаблон HTML / CSS.

В этом сборнике руководств представлены первоклассные методы создания макетов веб-дизайна с помощью Photoshop.

1. Макет портфолио в чистом стиле

Пошаговое руководство по веб-дизайну в Photoshop с использованием основных техник.

Clean Style Portfolio Layout

2. Чистый макет блога в Photoshop

Узнайте, как создать макет блога на темную тему в этом уроке Photoshop.

Clean Blog Layout in Photoshop

3. Создание веб-макета портфолио в Photoshop

Узнайте, как использовать узоры в макетах веб-сайтов из этого урока Photoshop.

Create a Portfolio Web Layout in Photoshop

4. Как создать яркий веб-дизайн портфолио в Photoshop

В этом уроке Photoshop используется сетка 960 для компоновки веб-страницы.

How to Make a Vibrant Portfolio Web Design in Photoshop

5. Создайте элегантный веб-макет фотографии в Photoshop

В этом простом руководстве показано, как применять текстуры фона в веб-дизайне.

Create an Elegant Photography Web Layout in Photoshop

6. Макет веб-сайта фотогалереи в Photoshop

Научитесь создавать темную фотогалерею с помощью этого превосходного урока по Photoshop.

Photo Gallery Website Layout in Photoshop

7. Создание веб-сайта потокового видео с фильмами

В этом уроке Photoshop вы будете использовать стили слоев для создания отличных элементов веб-дизайна.

Create a Movie Video Streaming Website

8. Как создать стильное портфолио. Концепция веб-дизайна

Изучите методы создания элегантного веб-дизайна в Photoshop с помощью этого руководства.

How to Build a Stylish Portfolio Web Design Concept

9. Создание современной лабораторной темы веб-дизайна в Photoshop

Из этого туториала Вы узнаете, как создавать красивые веб-макеты.

Create a Modern Lab Theme Web Design in Photoshop

10. Создайте чрезвычайно простой темный веб-дизайн в Photoshop

В этом руководстве вы познакомитесь с множеством техник, например, как создать веб-кнопку.

11. Как создать элегантный дизайн веб-сайта на основе сетки

От бумаги до Photoshop: научитесь размещать веб-дизайн на сетке.

How to Create a Sleek Grid Based Website Design

12. Как создать винтажный макет веб-сайта Photoshop

Создайте стильный дизайн в винтажном стиле, прочитав это замечательное руководство по Photoshop.

How to Create a Vintage Photoshop Website Layout

13. Создайте простой чистый макет портфолио в Photoshop

Это руководство по макету Photoshop идеально подходит для сайтов портфолио, а также сайтов веб-приложений.

Create a Simple Clean Portfolio Layout in Photoshop

14. 3D портфолио Dark Layout в Photoshop

В этом руководстве по веб-дизайну вы будете использовать руководства Photoshop, стили слоев и многое другое.

3D Portfolio Dark Layout in Photoshop

15. Создайте чистый и красочный макет электронной коммерции в Photoshop

Из этого туториала Вы узнаете, как создать дизайн страницы продукта электронного магазина.

Design a Clean and Colorful Ecommerce Layout in Photoshop

16. Создание инновационного сайта-портфолио с использованием альтернативного пользовательского интерфейса / пользовательского интерфейса

Из этого туториала Вы узнаете, как создать веб-страницу с уникальным пользовательским интерфейсом.

Design an Innovative Portfolio Site Using Alternative UI/UX

17. Дизайн элегантного веб-сайта мобильного приложения

Создайте простой макет веб-дизайна на темную тему, используя базовые приемы Photoshop.

Design a Sleek Mobile App Website

18. Создайте теплый, веселый интерфейс веб-сайта в Adobe Photoshop

В этом превосходном руководстве по веб-макету есть продолжение преобразования PSD в HTML.

Design a Warm, Cheerful Website Interface in Adobe Photoshop

19. Впечатляющий макет портфолио видеооператора в Photoshop

В этом уроке вы будете использовать инструмент Custom Shape Tool, чтобы создать фоновый узор.

Impressive Videographer Website Portfolio Layout in Photoshop

20. Как создать тему WordPress в Photoshop

Научитесь создавать простой макет блога с помощью Photoshop.

How to Create a WordPress Theme in Photoshop

21. Создайте смелое и яркое портфолио

Это руководство по веб-макету проведет вас через создание красочного сайта-портфолио.

Design a Bold and Vibrant Portfolio

22. Создайте элегантный узорчатый веб-дизайн в Photoshop

В этом уроке вы узнаете, как создавать узоры в Photoshop.

Create an Elegant Patterned Web Design in Photoshop

23. Разработайте чистый корпоративный макет веб-сайта

Из этого руководства вы узнаете, как добавить стоковые фотографии в заголовок вашего веб-сайта.

Design a Clean Corporate Website Layout

24. Как создать красочный веб-макет для бизнеса

Этот урок Photoshop продемонстрирует, как включать значки в ваш веб-дизайн.

25. Создайте текстурированную веб-страницу «Скоро появится» в Photoshop

В этом уроке Photoshop научитесь создавать простой веб-дизайн с красивыми текстурами.

Design a Textured "Coming Soon" Web Page in Photoshop

Связанное содержимое

  • 70 Превосходные ресурсы для Photoshop
  • 10 отличных программ с открытым исходным кодом и бесплатных альтернатив Photoshop
  • 30 уроков по созданию красивых текстовых эффектов в Photoshop
.

Как вырезать объект в Photoshop | Small Business

Adobe Photoshop предлагает пользователям различные методы вырезания объектов из изображений. Метод, который вы выберете для этого, зависит от сложности объекта. Инструменты «Лассо» и «Волшебная палочка» идеально подходят для простых объектов или объектов на фоне однородного цвета. Для более точной работы лучше подходят инструменты «Быстрая маска» или «Перо». После того, как вы отделите объект от фона, вы можете добавить его к новым изображениям или макетам, чтобы создавать привлекательные рекламные объявления, презентации или другие бизнес-документы.

Инструмент «Волшебная палочка»

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

Продолжайте добавлять части объекта, пока не будет выбран весь объект. Лучше всего это работает, если объект имеет однородный цвет. В качестве альтернативы, если объект детализирован, но фон однороден, используйте Волшебную палочку на фоне вместо объекта, а затем выберите «Инверсия» в меню «Выделение».

Нажмите «Изменить» в строке меню, а затем нажмите «Копировать», когда будет выбран весь объект.

Щелкните «Файл», а затем щелкните «Создать». Выберите «Буфер обмена» в раскрывающемся меню предустановок и нажмите «ОК».

Щелкните «Изменить» в строке меню, а затем щелкните «Вставить». Это поместит объект на новый холст. Дважды щелкните «Фоновый слой» на палитре слоев, а затем нажмите «ОК». Щелкните правой кнопкой мыши фоновый слой и выберите «Удалить». Теперь вы можете сохранить свой объект в формате файла, который поддерживает прозрачность.

Инструмент быстрого выбора

Щелкните инструмент быстрого выбора на панели инструментов и затем щелкните левой кнопкой мыши объект, который хотите вырезать. Это создает выделение вокруг области, по которой вы щелкнули.

Щелкните другие области внутри объекта, чтобы добавить их к своему выбору. Удерживая нажатой кнопку «Alt», щелкните левой кнопкой мыши области, которые вы хотите удалить из выделения.

Нажмите «Изменить» в строке меню, а затем нажмите «Копировать», когда будет выбран весь объект.

Щелкните «Файл», а затем щелкните «Создать». Выберите «Буфер обмена» в раскрывающемся меню предустановок и нажмите «ОК».

Щелкните «Изменить» в строке меню, а затем щелкните «Вставить». Это поместит объект на новый холст. Дважды щелкните «Фоновый слой» на палитре слоев, а затем нажмите «ОК». Щелкните правой кнопкой мыши фоновый слой и выберите «Удалить».

Инструмент «Лассо»

Выберите кнопку «Масштаб» на панели инструментов, а затем щелкайте изображение, пока не станет виден весь объект, который вы хотите вырезать.

Выберите инструмент «Лассо» на панели инструментов, а затем щелкните и перетащите курсор мыши по краям объекта, который вы хотите вырезать. Не отпускайте кнопку мыши, пока не соедините начальную и конечную точки вашего контура. Весь процесс контура должен выполняться одним движением, не отпуская кнопки мыши. Если объект состоит из прямых линий, используйте вторичный инструмент «Многоугольное лассо». Для объектов с высокой контрастностью используйте вторичный инструмент «Магнитное лассо», поскольку он автоматически создает точки привязки при перемещении курсора мыши по объекту.

Отпустите кнопку мыши, когда закончите выбор. Для инструментов «Полигональное» и «Магнитное лассо» соедините последнюю точку привязки с первой.

Щелкните «Изменить» в строке меню, а затем щелкните «Копировать».

Щелкните «Файл», а затем щелкните «Создать». Выберите «Буфер обмена» в раскрывающемся меню предустановок и нажмите «ОК».

Щелкните «Изменить» в строке меню, а затем щелкните «Вставить». Это поместит объект на новый холст. Дважды щелкните «Фоновый слой» на палитре слоев, а затем нажмите «ОК».«Щелкните правой кнопкой мыши фоновый слой и выберите« Удалить ».

Инструмент« Перо »

Выберите инструмент« Перо »на панели инструментов, а затем нажмите« Пути »на панели действий.

Щелкните в любом месте контура объекта. который вы хотите вырезать, чтобы установить начальную точку.

Обведите контур объекта с помощью инструмента "Перо". Это делается с помощью ряда точек, называемых "узлами". Каждый раз, когда вы щелкаете по контуру объекта, появляется создается новый узел, который связан с предыдущим узлом.Щелкните и отпустите кнопку мыши, чтобы создать прямую линию между двумя узлами, или щелкните и перетащите новую точку, чтобы изогнуть линию.

Щелкните правой кнопкой мыши в любом месте изображения, затем нажмите «Сделать выбор» и нажмите «ОК».

Щелкните «Правка» в строке меню, а затем щелкните «Копировать», когда будет выбран весь объект.

Щелкните «Изменить» в строке меню, а затем щелкните «Вставить». Это поместит вырезанный вами объект на новый холст. Дважды щелкните фоновый слой на палитре слоев, а затем нажмите «ОК».«Щелкните правой кнопкой мыши фоновый слой и выберите« Удалить ».

Quick Mask

Нажмите« Выбрать »в строке меню, а затем выберите параметр« Редактировать в режиме быстрой маски ». Или выберите« Изменить в Кнопка «Режим быстрой маски» на панели инструментов.

Нажмите «Установить цвет переднего плана» на панели инструментов и выберите черный. Нажмите «Установить цвет фона» на панели инструментов и выберите белый.

Щелкните инструмент «Кисть» на панели инструментов, а затем щелкните «Параметры инструмента кисти» на панели параметров.

Щелкните и перетащите ползунок размера до значения, подходящего для объекта, который вы хотите вырезать. Нажимайте кнопки «[» и «]» для уменьшения и увеличения размера кисти «на лету», так как требования к размеру будут отличаться в зависимости от того, какую область объекта вы выбираете.

Установите ползунок твердости на средне-высокое значение, например 80 процентов, чтобы края объекта не были слишком резкими. Это позволяет вашему объекту лучше сочетаться с изображением, которое вы позже вставляете.Если вы предпочитаете, чтобы края были резкими, используйте 100-процентную твердость.

Щелкните и перетащите курсор мыши вдоль контура объекта. Увеличьте или уменьшите размер инструмента «Кисть» на панели параметров, чтобы работать с большей точностью. Увеличивайте участки с большим количеством деталей. Цель - максимально точно очертить объект. Окрашенные области на изображении отображаются прозрачным красным цветом, что указывает на то, что с ними работают в режиме быстрой маски.

Увеличьте размер инструмента «Кисть» и затем раскрасьте всю область внутри созданного контура.Когда вы закончите, объект, который вы хотите вырезать, должен быть полностью выделен красным.

Нажмите кнопку «Переключить цвета переднего плана и фона» на панели инструментов. Закрасьте области, где вы могли выйти за края объекта, который хотите вырезать. Там, где черный цвет переднего плана создал красную быструю маску, белый цвет переднего плана стирает ее.

Нажмите «Редактировать в стандартном режиме» после того, как очистите края маски. Это превратит область вокруг вашей маски в выделение.

Нажмите «Выбрать» в строке меню, а затем нажмите «Инвертировать».

Щелкните «Изменить» в строке меню, а затем щелкните «Копировать».

Щелкните «Файл», а затем щелкните «Создать». Выберите «Буфер обмена» в раскрывающемся меню предустановок и нажмите «ОК».

Щелкните «Изменить» в строке меню, а затем щелкните «Вставить». Это поместит вырезанный вами объект на новый холст. Дважды щелкните «Фоновый слой» на палитре слоев, а затем нажмите «ОК». Щелкните правой кнопкой мыши фоновый слой и выберите «Удалить».«

.

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

Поделиться в соц. сетях

Опубликовать в Facebook
Опубликовать в Одноклассники
Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий