Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Урок, как быстро можно нарисовать небольшой изометрический домик в Photoshop

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

Шаг 1.

Открываем Photoshop, создаем новый файл произвольного размера. Теперь нам нужно сделать направляющие для изометрической проекции. С помощью инструмента Line Tool (L) на новом слое создаем горизонтальную линю.

Как сделать крышу в фотошопе

Шаг 2.

Как сделать крышу в фотошопе

Шаг 3.

Далее делаем с помощью Line Tool еще одну, с углом наклона 23 градуса

Как сделать крышу в фотошопе

Шаг 4.

Дублируем наши линии (Alt+Click) столько, сколько нужно.

Как сделать крышу в фотошопе

Шаг 5.

Итак, мы получили несколько направляющих. Лучше их сгруппировать, и не в коем случае не склеивать, так как их нужно будет перемещать. Теперь переходим непосредственно к рисованию самого домика. Создаем новый, слой берем Polygonal Lasso (L) и по нашим линиям рисуем боковую стену.

Как сделать крышу в фотошопе

Шаг 6.

Заливаем выделение светло серым цветом (это будет освещенная сторона здания).

Как сделать крышу в фотошопе

Шаг 7.

Иногда требуется подправить нижнюю часть стены, для этого кликаем в окне Layers по слою c зажатым Ctrl, чтобы получить выделение. Смещаем его в самый низ, удерживая при этом Shift, и удаляем ненужное через Delete.

Как сделать крышу в фотошопе

Шаг 8.

Добавляем остальные стены нашего здания. Для этого просто продублируем наши первые стены и обрезаем не нужное.

Как сделать крышу в фотошопе

Шаг 9.

Аналогичным образом рисуем крышу и фундамент. Просто дублируем слои со стенами и обрезаем ненужное через выделение Ctrl+click в окне слоев.

Как сделать крышу в фотошопе

Шаг 10.

Затем с помощью все того же Line tool создаем светлые и темные грани на стенах и крыше.

Как сделать крышу в фотошопе

Шаг 11.

Для объема проходимся по крыше и стенам Burn и Dodge Tool’ом.

Как сделать крышу в фотошопе

Шаг 12.

Рисуем окна. За основу, опять же, можно взять наши стены, копируем их и удаляем лишнее:)

Как сделать крышу в фотошопе

Шаг 13.

Подбираем цвет, далее проходимся Burn Tool’ом и Dodge Tool’ом.

Как сделать крышу в фотошопе

Шаг 14.

Придаем окнам объем: Layer style->Inner Shadow Со следующими параметрами: Distance 1, Size 1, Opacity 10 %. Растрируем эффект и проходимся опять на светлых областях окон Dodge Tool’ом.

Как сделать крышу в фотошопе

Шаг 15.

Корректируем цвет, освещеность, опять же используем Dodge Tool и Burn Tool. Ложим тень, добавляем деталей.

Как сделать крышу в фотошопе

Шаг 16.

Добавляем разных красивостей, птиц, небо зелени и получаем вот такой вот симпатичный домик для карты проезда:)

Источник

Быстро нарезаем картинки в Photoshop.

Наверно каждый сталкивался с тем, что бы в Photoshop нарезать много картинок.

Сейчас я покажу как это сделать быстро и без всякого труда.

Для примера я скачал Free psd Template. Загуглил и перешел по первой ссылке.

Скачал какой то Surfing Free Theme.

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

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

Есть прекрасный инструмент Slice Tool (горячая клавиша ‘C’)

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Выделять каждую картинку таким образом долго. Скорее всего есть возможность Отслайсить сразу Слой. Да такая возможность есть.

Выделаем нужную нам картинку

Как сделать крышу в фотошопе

В данном случае картинка под маской, поэтому нам надо выделать саму маску. Это base слой.

Как сделать крышу в фотошопе

Вот он выделенный слой, я его специально выделил. Ctrl + нажать на сам слой. (Выделил чисто для наглядности)

Как сделать крышу в фотошопе

И вуаля готовый slice. Но есть несколько проблем.

1. У нас нет hot key, что бы делать это быстро.

2. Выделив данный slice мы не можем поменять его параметры (ширину, высоту. )

Как сделать крышу в фотошопе

Для того что бы открыть возможность редактирование необходимо данный slice сделать User Slice-ым.

Для это в режиме slice (горячая клавиша C). Жмем правой кнопкой мыши на slice область и нажимаем Promote to User Slice и теперь можем менять размеры slice.

Как сделать крышу в фотошопе

Это также можно реализовать.

Для этого нам понадобится окно Actions (Alt + F9)

Как сделать крышу в фотошопе

Вот уже готовые actions

Как сделать крышу в фотошопе

Выберете картинку и затем просто жмете F2 и получаете готовый User Slice. К примеру я выделил 5 картинок ну за секунд 15, а то и меньше.

Как сделать крышу в фотошопе

Как сделать эти actions. Скажу сразу я выбрал F2 и F3 потому что они рядом и ими удобно быстро пользоваться, для F4, F5, F6 и так далее. Забил другие action которыми тоже часто пользуюсь.

Итак мы решили создать новый action.

1. Для начала я создал папку, что бы группировать свои action по разным папкам.

Создадим папку Example и подготовимся к записи action

Как сделать крышу в фотошопе

Action по факту просто повторит все то что вы сделаете от исходной точки.

Поэтому выбираем нужную картинку через Move Tool

Как сделать крышу в фотошопе

Теперь начинаем записывать action

Как сделать крышу в фотошопе

Называем свой action и выберем hot key, у меня F2 выбрать не получилось, потому что я его уже занял, но нам предложили и другой вариант Shift + F2

Как сделать крышу в фотошопе

Нажимаем Record и начинается запись, активная красная кнопка говорит, что запись идет

Как сделать крышу в фотошопе

Теперь делаем то что я описывал ранее

Как сделать крышу в фотошопе

Сделав это увидим что уже записалось одно действие

Далее выберем режим Slice в левой панели или нажимаем горячую клавишу C

Жмем правой кнопкой мыши и делаем Promote to User Slice

Как сделать крышу в фотошопе

Теперь экшен готов и мы можем его использовать.

Теперь выделаем нужные нам картинки с зажатым Shift и жмем F2 и создаются сразу Slice для всех выделенных картинок или по одной картинки. Далее можем назвать их так как нам нужно.

Потом сохраняем через Ctrl + Alt + Shift + S.

Переходим во вкладку Original и выделаем нужные слайсы через зажатый Shift, выбераем нужный формат и качество и нажимаем Save.

Выберем куда сохранить и обязательно указываем Selected Slices, а то накидает вам все слайсы которые есть

Как сделать крышу в фотошопе

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

Как сделать крышу в фотошопе

P.S на практике сделать это намного проще, чем я описал. Но научившись делать экшены, можете сильно упростить работу с Photoshop.

Найдены возможные дубликаты

Как сделать крышу в фотошопе

Дизайн контактных форм: поля ввода

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Что будет, если дизайнер станет фармацевтом

Продолжаем рубрику «А что если?»

Белый белее, красный не продающий, лого за 500. Выход есть!

Что будет, если дизайнер станет фармацевтом? Какие лекарства станут полезны для продажи заказчикам. Все это в презентации.

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Пожалуй лучшее объяснение интерлиньяжа

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Шрифт Evolve.

#ЯтвойШрифт. Привет пикабушники!

Продолжаю рубрику с презентациями шрифтов) Сегодня весьма необычный БЕСПЛАТНЫЙ, кириллический шрифт, под названием Evolve.

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

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

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как сделать анимацию скрола в фотошоп. Веб-дизайн

как быстро сделать анимацию скрола в фотошопе. В случае если под рукой нет after effects, а тебе нужно сделать небольшую презентацию макета сайта.

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Как в 2 клика сделать эффект анаглиф в фотошоп. стереоскопия

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Подборка видеоуроков по дизайну соц.сетей

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

Создание Landing page с нуля. 3 видеоурока

Как сделать крышу в фотошопе

Как сделать крышу в фотошопе

7 Русскоязычных каналов YouTube по веб-дизайну

Идея данного темы появилась после просмотра поста @COSMOBATHuK

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

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

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

Идея канала в том, что они создали некий сборник полезных материалов по веб-разработке. Здесь вы найдете такие темы, как: веб-дизайн, программирование, маркетинг и все что связано с ИТ.

На своем канале Данил делает уклон именно в веб-дизайн. Он рассказывает о различных фишках в дизайне, разбирает сайты на ошибки. Так же представлено большое количество уроков по Adobe Muse

Канал так же посвящен именно веб-дизайну. Довольно приятная девушка с грамотной речью делится тонкостями в работе веб-дизайнера.

4. Школа веб-дизайна Максима Солдаткина

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

На этом канале можно найти инфу не только по веб-дизайну, но по программированию. Огромное количество уроков по bootstrap и php.

6. WebDesign Master

Канал посвящен в большое степени веб-дизайну и как обычно там есть информация и для верстальщиков т.к эти две специализации тесно связаны между собой. Я думаю уже много кто видел его видео «как стать крутым веб-дизайнеров» В целом контент довольно познавательный.

7. Блог фрилансера веб-дизайнера

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

Помимо веб-дизайна автор делится фишками по работе в интернете. Много видео по дизайну баннеров и оформлению соц.сетей.

Как сделать крышу в фотошопе

Web-технологии. Начало

С чего начать обучение верстке? На мой взгляд, в верстке главное – практика. Поэтому обучение стоит начинать с выбора макета. В сети достаточно psd макетов, которые можно использовать в не коммерческих целях. Поэтому первый шаг – выбор макета. Для первого опыта подойдет любой одностраничный сайт.

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

По мере появления времени, я выберу шаблон и поэтапно покажу работу над ним. Все желающие могут присоединиться, выбрать себе psd макеты и в процессе работы над ними мы обсудим те или иные подходы к верстке. Подробные уроки по HTML и CSS составлять не буду, этого в сети много. Например, уроки на webref:

Кроме того, при освоении основ советую избегать любых css фреймворков, стоит поделать работу руками, чтобы понимать, как и что устроено.

Список полезных ссылок:

Информация о поддержке тегов и стилей браузерами: http://caniuse.com/

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

Оставляйте предложения и замечания в комментариях.

Источник

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *