Как сделать крышу в фотошопе
Как сделать крышу в фотошопе
Урок, как быстро можно нарисовать небольшой изометрический домик в 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/
Это то, что касается новичков. Для опытных разработчиков постараюсь периодически делать выборку полезных статей и материалов.
Оставляйте предложения и замечания в комментариях.