Как рисовать UI иконки рангов для игры
В данном видео я рисую на заказ несложные иконки для UI интерфейса игры. В процессе было нарисовано 8 иконок для обозначения рангов в игре. Из них 3 иконки - бронзовый ранг, 2 - серебреный, 2 - золотой и 1 - платиновый. Подобные заказы на фрилансе - очень частые. В моей практике встречается наиболее стабильно запрос нарисовать дизайн чего-либо по уже имеющемуся образцу. Здесь я подстроился под стиль о котором меня просили. Видео ускорено чтобы вы не умерли со скуки (speed paint). Надеюсь Вы сможете получить удовольствие от просмотра процесса рисования моих скромных артов.
Подписывайтесь на мои каналы в других соц. сетях. Там Вы сможете получить некоторые PSD файлы и позадавать вопросы.
Группа ВК: https://vk.com/publiczolotist
ТГ Канал: https://t.me/mediamol
ТГ Чат: https://t.me/mediamolchat
Boosty: https://boosty.to/zolotistby
Photoshop. Знакомство с интерфейсом
С интерфейса я начинаю неспроста. Инструментов так много, что при первом запуске ощущаешь себя Гомером из популярного мема: абсолютно не ясно куда жать, что двигать, куда смотреть. В голове возникает искра, буря, безумие.
Но разобраться в интерфейсе необходимо — от того, насколько хорошо вы ориентируетесь, тем легче и быстрее будет работать.
Итак, открываем Photoshop и приступаем.
1. Панель инструментов
2. Выбранный инструмент
3. Закладка открытого изображения
4. Меню программы
5. Панель параметров
6. Линейка
7. Панель «Цвет»
8. Панель «Свойства слоя»
9. Панель «Слои»
10. Свёрнутая панель с дополнительными инструментами
11. Масштаб
12. Свойства открытого изображения
13. Рабочее окно (холст)
А теперь подробней об этих инструментах и рабочих панелях.
1. На панели инструментов представлены основные инструменты для работы с изображением: выделение, перемещение, кисти, выбор цвета и т.д. Наведите указатель мыши на кнопку и во всплывающей подсказке увидите название инструмента и какую функцию он выполняет.
2. Иконка с выбранным инструментом показывает, какой инструмент сейчас выбран. По клику на иконку, можно загрузить специальные пресеты для неё.
3. Панель закладок похожа на панель закладок браузера. На ней можно выбрать окно с изображением в котором хотите работать.
4. В меню прячется весь функционал программы. Из него можно сохранить изображение, выбрать фильтр для наложение на изображение, настроить рабочий инструмент и открыть дополнительные окна для обработки изображений.
5. В панели параметров показаны все параметры выбранного инструмента, которые можно настроить. Если вы выбрали кисть, то в этом окне можно выбрать размер кисти, её форму, прозрачность и сглаживание, чтобы нарисованные движения были более гладкими
6. Линейка показывает размеры вашего изображения. Кроме визуального ориентирования, с помощью линейки можно вызвать направляющие — невидимые линии, по которым будет легче выстраивать изображение с определёнными размерами
7. Панель «Цвет» показывает выбранный вами цвет и позволяет его быстро изменить. Кроме того, на этой панели есть вкладка «Образцы» с часто используемыми цветами. Там же можно добавить свои цвета, которые вы планируете часто использовать.
8. Панель «Свойства слоя» показывает параметры выбранного слоя: размеры, положение, используемый шрифт для текстового слоя и пр. Во вкладке коррекция расположены инструменты для корректирования изображения: изменение баланса белого, яркость, контрастность и другие.
9. Панель «Слои». Очень важная панель, к которой мы будем обращаться также часто, как и к панели инструментов. На ней отображаются слои изображения. Забегая вперёд скажу, что в Photoshop можно рисовать на разных слоях и это крайне важная функция. Вы можете рисовать на на одном слое, не меняя изображение на другом.
10. На свёрнутой панели «Истории» есть несколько вкладок. Самой часто используемой будет вкладка «История», в которой можно отменять совершённые действия с изображением.
11. Иконка масштаба показывает, какой масштаб изображения выбран в данный момент. Кликнув на неё, можно вписать желаемый масштаб.
12. Панель «Свойства открытого изображения» показывает, какой размер получится у вашего файла при сохранении
13. Холст. Рабочее пространство с вашим изображением.
Было не так уж и сложно:) Мы разобрали только основные элементы. Подробнее о каждом инструменте и функции мы будем разбираться уже на реальных уроках, чтобы не тратить время на подготовку, а сразу начать креативить. Тем более, что практика намного веселее теории. (взято из https://t.me/TimeToStart2 )
Kiki's delivery service UI
Сделал немного ui для своего персонального проекта по мультику "Ведьмина служба доставки" ) старался не мудрить сделать легко и привлекательно
Немного иконок крупным планом:
^-^
Разрешение экрана
Купила ноут 15,6 с разрешением 1920*1080 под след задачи :
Работа в фш, архикаде, 3дмакс.
В итоге в фш и 3дм элементы интерфейса стало невозможно разглядеть.
Меняла размеры текста, прил и проч элементов в станд. настройках экрана. Но там перепрыгивает со 125%(когда элементы невозможно разглядеть) до 150%(когда элементы просто не помещаются!). Выстраивала индивид. настройки(около 134%) но размеры элементов программ не прдчиняютс этому массштабу. Что делать ума не приложу!!! Работать невозможно!!! Пробовала менять разрешение на самые разные но все смотрятся убоговсе расплывается. Кстати сказать размеры элементов интерфейса архикада привычные но там все также расплывчато. Помогите пожалуйста. В компах разбираюсь плохо, брала по совету менеджера. Решить в итоге эту проблему он не смог когда обратилась после покупки.
Может кто сможет что нибудь дельное посоветовать(((
Лагают инструменты в фотошопе
Только пожалуйста не минусите, очень нужна помощь, может кто с таким сталкивался. Коммент для минусов оставлю внутри.
Доброго времени суток. Проблема с интерфейсом ФШ. Расскажу по порядку:
Был установлен Фотошоп СС2015. Во время работы поначалу выдавал такой баг: (к сожалению скриншота нет, эту проблему нет возможности заскриншотить) - при выборе инструмента на левой рабочей панели, при нажатии на него ПКМ должен разворачиваться список вариантов этого инструмента. Так вот иногда он просто мигал и не разворачивался, и подобная проблема возникала на верхней рабочей панели - при попытке вытянуть меню размера/жесткости инструмента панель мигала и исчезала. Так, как эта панель разворачивается ЛКМ, то если мышь зажать - панель висела развернутой, но стоило отпустить - сворачивалась. Проблема то возникала при каком-нибудь запуске фш, то при очередном перезапуске программы исчезала. Но в какой-то момент (спустя может пару недель работы с программой) проблема стала постоянной.
Фотошоп был удален, хвосты подчищены, и установлен заново - не помогло.
Удалила снова. Обновила драйвера видеокарты и монитора, снова подчистила все, что можно,включая реестр и документы пользователя, (даже сам ноутбук, давно было пора разгрузить его), и установила Фотошоп версии CS6 - но... Как вы уже догадались проблема снова та же самая возникла.
С чем это может быть связано? Я сильно подозреваю что проблема в ноутбуке, а не программе, но что мне еще в нем обновить/почистить/улучшить чтобы проблема исчезла?
Попытки в пиксель-арт
Ребят, мне тут пришло желание попробовать интерфейс для игр на твиче в стиле пиксель арта сделать. Опыта у меня в подобном ноль... Но попытка не пытка, приступила. И вот спустя энное кол-во минут интересуюсь мнением и может быть советом (если кому не лень помочь): Никакого стиля особого пока не придумала, начала набрасывать варианты верхней меню (прогресс бар) - получилось что-то вот такое (4 варианта).
На этом самом моменте решила сделать паузу (что бы свежим взглядом взглянуть и продумать дальнейшие действия). Как думаете, какой из вариантов более приятен глазу (сверху вниз считай 1-4)? Или может вообще всё ужасно и думать пора над другим вариантом совсем? Может есть предложения?
Примерный вид интерфейса самого - такой:
Спасибо за внимание и потраченное время =)
