Рисуем индикаторы статусов сервера.

Nerom

Я забил на форум.....фу таким быть.

Nerom

Я забил на форум.....фу таким быть.
Сообщения
301
Реакции
289
Баллы
0
В этом уроке я покажу, как сделать красивый индикатор загрузки серверов - статус серверов.
Для кого-то этот урок может покажется и сложным, но могу Вас успокоить, всё довольно легко и просто.



Итак, пожалуй начнем!

Шаг 1. Рисуем основу колбы.

Как обычно создаем новый документ нужного нам разрешения.

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

Освещение я создал мягкой кистью, диаметром 185px и цветом 1c1e41:



После этого я просто выбрал цвет 090a0f и провел кистью сверху вниз.
Поскольку я выделил место для двух статусов я сделал сразу 2 заготовки.
После чего я сразу поправил их резинкой до нужной формы:



Далее создаем новый слой, выбираем инструмент Прямоугольник со скругленными углами и радиусом 4px.
Выводим форму будущей колбы:



Ставим непрозрачность на 6%:



Шаг 2. Резиновый элемент.

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



Кликаем правой мышкой по слою, выбираем параметры наложения и выставляем следующие цвета и пропорции для градиента:





В итоге у нас получается вот такой резиновый заполнитель кол-ва игроков:



Далее мы рисуем рамку.

Выделяем слой с основной фигурой, т.е. с нашей колбой (не с полоской!), создаем новый слой и нажимаем клавишу M (англ) наводим на выделение и нажимаем Выполнить обводку.

Цвет для обводки ставим a1aebe
Расположение Снаружи
Размер 1px.

Сделали рамочку, теперь ставим для нее непрозрачность 15-17%:



Далее берем инструмент перо и делаем такую фигуру в верхней части нашей колбы:



Создаем выделение затем новый слой, который заливаем цветом 261e25:



Затем делаем выделение слоя, создаем новый слой и заливаем его цветом 4c374f:



Далее есть 2 варианта продолжения действий:

1. Это инструмент лассо которым легко отрезать не нужные нам участки
2. Это кисть размером 3-5 пикс.

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



Далее для сновы делаем выделение нашей фигуры, которую мы делали пером.
Создаем новый слой, залив его цветом 3c3841. Также, для удобства отключите временно слой с цветом4c374f.

И также вытираем мягкой кистью лишние участки, чтобы вышло как-то примерно так:



Включаем обратно наш отключенный слой, создаем новый слой и делаем вот такое выделение с размером в 1px:



Заливаем выделение цветом 615859:



Берем мягкую резинку диаметром 5px.
И начинаем затирать края, чтобы получилось вот так:



Далее мы просто дублируем слой, залив его при этом черным цветом.
Смещаем его на 1px вниз:



Чтобы сделать, как бы сказать, небольшой блик, который бы смотрелся.
Нам нужно опять сделать выделенную область размером 1px.
Создать новый слой и залить его цветом b8afb0,поместить его поверх слоя с цветом 615859.
И убрать мягкой резинкой края, чтобы получилось так, как изображено на картинке ниже.
Это в будущем нам даст своеобразную пробочку.

Для того, чтобы сделать пробку для нижней части, просто продублируйте все слои (пробки), затем трансформируйте их вертикально, смещайте вниз и вуаля, всё готово!



Далее мы будем создавать полоску, которая соединит наш резиновый заполнитель.
Для этого выделяем область размером 3-4px:



Создаем новый слой и заливаем её цветом 38404c.
Далее сразу заходим в фильр > размытие > размытие по гаусу и выставляем параметр примерно 1,3.

Должно получится так:



После чего создаем точно такую же полоску, но в 1px, с цветом e4e4e4 с непрозрачностью 85%.
И помещаем ее так, чтобы она была на уровне с резиновым заполнителем, где есть такая же полоска:



Теперь создаем еще одну выделенную область в этом же месте размером 1px:



Создаем новый слой и заливаем его цветом 8893a3.
И опять же берем мягкую кисточку около 3-5px и затираем края, чтобы вышло так, как изображено на картинке ниже.
Это придаст нам более чёткую грань:



Шаг 3. Детализация.

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

Начнем с самой формы.
Берем перо и начинаем "колдовать"...
Рисуем что-то наподобие рог:



Создаем новый слой, делаем выделение области и заливаем его цветом 706780:



И как, спросите Вы, вот из такого сделать красивый рожок?
Все довольно просто!
Выделяем наш, только что созданный рожок, создаем новый слой и заливаем его черным цветом:



Берем мягкую резинку диаметром где то в 3px.
И начинаем затирать, чтобы оставалось сверху примерно 1px и был немного виден задний слой:



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

Далее можно приблизить масштаб примерно до 800% и добавить кое-куда линии светлых пикселей.
(Данный прием я использую очень редко т.к. это относится только к очень мелким деталям)

В итоге у вас должно получится где-то примерно вот так:



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



Возвращаем 100% масштаб изображения и смотрим.
Получились такие вот симпатичные рожки:



Шаг 4. Электричество.

На самом деле здесь все довольно просто.

Первым делом создаем под каждым рогом будущий блик, так сказать "внутренность"

Кстати, данные блики очень любит использовать Дима в рамках своих работ, примерно вот такие:



Давайте начнем!

Делаем область выделения в 1px:



Создаем новый слой и заливаем его цветом 182179, дополнительно я выбрал режим наложения Осветление основы.
Далее переходим в фильтр > размытие > размытие в движении угол градуса 90,смещение примерно 18.

Берем мягкую кисточку и затираем края:



После чего дублируем слой с наложением дабы увеличить насыщенность.
После чего создаем еще 1 такую линию (можно просто дублировать слой и наложить цвет, как это сделал я ), затираем края до нужного нам размера (это и будет своеобразный блик).
Помещаем его туда, где считаем нужным:



Всё это делаем в один слой и дублируем под каждый рожок:



Дальше делаем что-то похожее на электричество.

Ищем текстуру, которая напоминает нам электричество, которое бежит прямо по проводам.
Я выбрал такую текстуру:



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



Ставим режим наложения Осветление основы.
Дублируем её перетаскиваем её вниз и делаем дублирование для каждого рожка:



Чтобы, было видно откуда идет начало.
Берем кисточку белого цвета радиусом 2px и наносим на кончики рожек яркие части.

Шаг 5. Объем и отражение.

Начну, пожалуй, с объема.
Выбираем инструмент Лассо и выводим эту данную область:



Создаем новый слой и заливаем его черным цветом.
Смещаем выделенную область на несколько пикселей вниз, примерно на 3-4px и нажимаем кнопку DEL.
Выполняем в фильтр > Размытие > размытие по гаусу.

Размываем по своему усмотрению (но, чтобы не потерять полностью цвет и форму)
Таким образом мы создаём объём:



Дублируем слой, трансформируем его по-вертикали и перемещаем вниз:



Объем готов.

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



Статус "офлайн", я сделал очень просто.
Дублировал все слои и переместил изменив при этом только цвета резинового наполнителя.
Всегда можно украсить элементы еще и бликами:



Спасибо за внимание!
 

Сверху