Sun in Illustrator
Adobe Illustrator is a vector drawing software, and it is the most preferred graphic designing package for vector art by professionals. In this article, we are going to create a graphic design of the sun in adobe illustrator 2020, which will emphasize the use of shapes and fills with gradients. We will also use layers, masking and pencil tools and a host of other useful tools, and to set the scene, we also make mountains and water effect.
How to Create Sun in Illustrator?
Below are the steps to create a Sun in Illustrator:
3D animation, modelling, simulation, game development & others
Step 1: We will create a new document with all the standard settings and set the width to 800px and height of 600px. Set the orientation to landscape and set the artboard to 1 also, the bleed is 0 px with color mode of RGB Color, and there is another option of CMYK, which is useful if we are using it to print. But since we are not printing, we leave it in RGB mode. Also, set the raster effect to screen as we are not using any raster effects like a drop shadow.
Step 2: We will make use of the following reference image as a base for the art.
Step 3: Drag the reference image on the artboard, resize it according to the artboard, put it on the sketch layer in the layer panel, and lock it by clicking on space after the eye icon. Create another layer for the artwork and name “Artwork”.
Step 4: Open the Appearance panel from the Window menu, set the blend mode for multiply for “Artboard”, as we can see the sketch beneath when we create our artwork.
Step 5: Using a rectangle tool, create a rectangle, open the Gradient panel from the Windows menu, and apply a radial gradient.
Step 6: Create a color palette according to the scene as I have created my palette in the swatches panel so we can use those colors as shown. We have changed the white and black color to yellow and red as shown.
Step 7: Change the gradient color by dragging the handle on top.
Step 8: Use the ellipse tool to create a circle. Hold the shift key to get a circle and fill it with the color in the palette.
Step 9: Now, use the offset path tool while selecting the circle to create an offset from the quick actions in the properties panel. Set the offset to 20px and set the opacity to 80%.
Step 10: Then repeat the above steps 5 more times, gradually changing the opacity to 65%, 50%, 35%, 20%, 5%. Group the circles with CTRL + G or go to the object menu and group. Give the name “Sun” to the group in the layer panel. Lock the sketch layer.
Step 11: To make the cloud or reflecting sunlight, we use the pen tool and create the shape as shown.
Step 12: Now fill it with a gradient of white to black, then change the black to white and the opacity to 0 and angle to 90 degrees and reverse the gradient so that white is at the top. Adjust the slider as shown and also reduce the opacity of white color to 20%
Step 13: Repeat the same steps one more time, as shown below, to create another cloud reflection. Adjust the angle of the gradient for variation. Now hide the sketch layer to view the preview.
Step 14: As we can see, that reflection is out of the artboard. I have created a dummy shape of the green and shown it. Now we will create a mask to show only the artboard. For this open transparency panel from the windows menu. Select all objects in the Artwork layer and create a Make mask
Step 15: Create a rectangle with the same width and height as the artboard
Step 16: Change the color to white. So now the area outside the mask will be clipped, and you can see the layer name is underlined with a dashed line to indicate that it is masked.
Step 17: Delete the dummy green object, and now we can start working on the mountains; for that, we use the pencil tool, and the following are the options. We will set to fill new pencil strokes as we want a fill after we create a mountain. Also, set the fidelity on the accurate side as we want our mountains to be jaggy edged. You can create it with a mouse, but I have used a graphic tablet for more control of the shape.
Step 18: As shown, we have created few mountains and pick random fills so that we can differentiate between mountains.
Step 19: All mountains are made, and the sketch layer is hidden to get a better view.
Step 20: Now, we adjust the shapes of mountains so that there are no gaps in between, as shown. Also, we have changed the stacking order of the mountains to set which are in front and which should be in the back. You can arrange by bringing forward (CTRL + ]) and send backward (CTRL + [).
Step 21: Now, we have started adding actual colors from our color palette. The mountain in the front is dark, and as we move backward, it actually lightens in the shade.
Step 22: Now, we have complete the mountains with all the shades from our swatches.
Step 23: To create a simple water effect, we first create a rectangle with no stroke and any fill.
Step 24: Now set a radial gradient and add 3 more stops at 25%, 50%, 75%, and select appropriate color from the swatches as shown.
Step 25: Then send the layer backward behind the mountains but in front of the sun.
Step 26: Now it is time for the export; as we can see below, we have the option to select the artboard and the location. Also, we can select which format we have to export. We have selected png and jpg 100 and the scale of 1x and 2x, which will be double the size and click export.
Conclusion
In this article, we have learned how to create a sun in Adobe illustrator but also learned the techniques of using various tools like layers, masking, gradient, pencil tools, and pen tool to create an amazing artwork that will enrich your knowledge as well as your portfolio.
Recommended Articles
This is a guide to Sun in Illustrator. Here we discuss the introduction, how to create Sun in Illustrator in a step by step manner. You can also go through our other related articles to learn more –
Как нарисовать солнце в иллюстраторе
Как создать векторные солнечные лучи в Adobe Illustrator
В сегодняшнем уроке мы научимся создавать оригинальные солнечные лучи в ретро стиле, используя эффект трансформации и пути с обводкой. Описанные здесь техники позволят вам быстро переделывать созданные нами векторные лучи, получая бесконечное число вариаций.
Шаг 1
Запускаем Adobe Illustrator и открываем новый документ (Cmd/Ctrl + N). Рабочая область может быть любого размера. При создании солнечных лучей можно работать как в режиме RGB, так и CMYK.
Шаг 2
Берем Pen Tool (P) или Line Tool (\) и рисуем горизонтальный путь, удерживая Shift. Этот путь имеет обводку произвольного цвета и не имеет заливки. Установим ширину – 4px в панели Stroke (Window > Stroke).
Выберем Arrowhead и уменьшим масштаб стрелки в панели Stroke.
Шаг 3
Группируем созданный путь (Cmd/Ctrl + G). Выделяем всю созданную группу, затем переходим Effect > Distort & Transform > Transform…. В диалоговом окне Transform Effect устанавливаем угол, равный 360/20, где 20 это число лучей, из которых будет состоять наше солнце. Устанавливаем количество копий – 19. Число копий равно количеству лучей минус один луч. Выбираем левый центральный квадрат в манипуляторе контрольной точки, затем нажимаем кнопку OK.
Шаг 4
Нарисуем маленькую окружность при помощи Ellipse Tool (L). Центр этой окружности находится на горизонтальном пути, который был создан в шаге 2.
Перетащим окружность в группу, к которой был применен эффект Transform. Это действие необходимо совершить в панели Layers.
Как вы можете видеть, эффект Transform был мгновенно применен к новому объекту. Применение эффекта к группе дает нам возможность быстро вносить новые объекты в лучи нашего векторного солнца, не настраивая каждый раз параметры трансформации для этих объектов.
Шаг 5
Изменим локально ширину пути при помощи Width Tool (Shift + W), так как это показано на рисунке ниже.
Как и следовало ожидать, это изменит внешний вид нашего лучистого светила.
Шаг 6
Создадим еще один пучок лучей. Рисуем горизонтальный путь из центра созданного солнца. Для наглядности я использовал красный цвет для обводки. Применим к пути переменную Width Profile 1 в панели Stroke.
Шаг 7
Выделяем весь красный путь, затем переходим Effect > Distort & Transform > Transform… и устанавливаем параметры, указанные на рисунке ниже.
Теперь красный путь можно перекрасить в цвет уже существующих лучей, то есть в черный.
Лучистое солнцу в ретро стиле готово.
Шаг 8
Техники, которые были использованы в этом уроке, позволяют нам быстро создать новые разновидности лучей из уже существующих. Например, мы можем заменить стиль Arrowhead и Width Profile в панели Stroke.
Или изменить параметры эффекта Transform, что приведет к изменению числа лучей. Доступ к параметрам трансформации вы можете получить в панели Appearance (Window > Appearance).
На рисунке ниже показан набор лучей, который я получил за несколько минут.
Шаг 9
Приступим к финальному оформлению нашего векторного лучистого солнца в ретро стиле. Создаем прямоугольник при помощи Rectangle Tool (M) с заливкой коричневым цветом, который будет играть роль фона. Для цвета обводки луча и заливки окружности выбираем светло-коричневый цвет.
Выделяем все элементы солнца, затем переходим Effect > Stylize > Outer Glow… и устанавливаем параметры, указанные на рисунке ниже.
Шаг 10
Создадим два прямоугольника одинаковой высоты, но разной ширины и разместим их так, как показано на рисунке ниже. Нижний прямоугольник залит более темным оттенком синего цвета.
При помощи Pen Tool (P) создадим треугольник, соответствующий изогнутой части ленты. Заливка этого объекта имеет самый темный оттенок синего цвета.
Добавим точку на левой стороне нижнего прямоугольника при помощи Pen Tool (P), затем сместим ее вправо.
Шаг 11
Выделяем нижний прямоугольник и треугольник, берем Reflect Tool (O) и кликаем в центре большего прямоугольника, удерживая Opt/Alt. В открывшемся диалоговом окне выбираем ось Vertical, и наживаем кнопку Copy.
При помощи Type Tool (T) создайте необходимую надпись на ленте.
Шаг 12
Выделяем и группируем все элементы ленты, затем переходим Effect > Warp > Arc… и устанавливаем параметры, указанные ниже.
Шаг 13
Создадим текстуру. Нарисуем прямоугольник с заливкой серого цвета и расположим его выше всех созданных объектов. Размер прямоугольника соответствует размеру фона.
Не снимая выделения с прямоугольника, переходим Effect > Sketch > Conte Crayon… и устанавливаем параметры, показанные на рисунке ниже.
Установим для прямоугольника режим смешивания Overlay и понизим прозрачность до 20% в панели Transparency.
Вот как это должно выглядеть. Я надеюсь, вам понравился этот урок по работе в Adobe Illustrator и Вы с легкостью сможете применять эти методы в своих будущих векторных проектах.
Как создать текстурированную иллюстрацию нежного летнего заката в Adobe Illustrator
Andrei Stefan Aug 1, 2017 
What You’ll Be Creating
В сегодняшнем обучающем уроке мы собираемся исследовать процесс создания маленькой милой иллюстрации, используя все геометрические формы и инструменты, какие только может предложить Иллюстратор.
Перед тем как начать, не забывайте что вы всегда можете обратиться к GraphicRiver, где вы можете найти отличную выборку летних векторных иллюстраций.
Как говорится, давайте погрузимся прямо в работу!
1. Как настроить новый файл проекта
Надеюсь Иллюстратор у вас уже запущен и работает, так что давайте настроим Новый документ ( Файл > новый или Control-N), используя следующие настройки:
- Количество рабочих областей: 1
- Ширина: 1200 пикс
- Высота: 600 пикс
- Единицы: Пиксели
И во вкладке Дополнительно:
- Цветовая схема: RGB
- Растровые эффекты: Экран (72ppi)
- Режим предпросмотра: По умолчанию
2. Как выставить направляющие
Хоть сегодня мы и не работаем над иконками, мы все равно хотим создать иллюстрацию с идеальной пиксельной обработкой, так что использование направляющих сетки даст нам полный контроль над объектами.
Шаг 1
Пройдите Редактирование > Предпочтения > Сетка и направляющие, и примените следующие настройки:
- Направляющие сетки каждые: 1пикс
- Подразделения: 1
Быстрый совет: вы можете узнать больше о сетках, прочитав этот исчерпывающий материал «О том, как система направляющих сеток работает в Иллюстраторе».
Шаг 2
Когда мы выставили наши направляющие, все что нам нужно сделать, чтобы наши формы выглядели четкими — это включить опцию привязка к направляющим в меню Просмотр (если вы используете устаревшую версию Иллюстратора).
Теперь, если вы новичок в целой концепции идеального пиксельного рабочего процесса, настоятельно советую пройти мой урок » Как создать идеальную пиксельную Иллюстрацию», который моментально расширит ваши технические навыки.
3. Как настроить слои
Когда мы закончим настройку нашего файла, будет отличной идеей структурировать наш документ, используя несколько слоев, и тогда мы сможем поддерживать устойчивый рабочий процесс, фокусируясь на одной секции иллюстрации единовременно.
Вызовите панель Слои, создайте шесть слоев и переименуйте как показано ниже:
- Слой 1: Фон
- Слой 2: Вода
- Слой 3: Детали горизонта
- Слой 4: Облака
- Слой 5: круговая подсветка
- Слой 6: текстура
Быстрый совет: я задал цвет всех моих слоев одним и тем же зеленым, так как это самый простой способ просмотреть выделение нужной формы (не важно, закрытый или открытый путь).
4. Как создать фон
Начнем наш проект, создав фон заката, так что убедитесь что вы стоите на нужной слое (который должен быть первым), и затем заблокируйте остальные слои чтобы мы могли начать.
Шаг 1
Создайте круг 480 х 480 пикселей, к которому мы применим нежный линейный градиент, используя #EFFF56 для левого цвета и #EF6B43 для правого. Выставьте угол на 90º, центр выровняйте по центру рабочей области.
Шаг 2
Начните работать над свечением солнца, создав меньший круг 384 x 384 пикселей ( #ED7743 ), который мы настроим, уменьшив прозрачность до 40%, и выровняем по центру фона.
Шаг 3
Добавьте второе свечение, создав еще меньший круг 288 x 288 пикселей (#ED7743 ) и с 48% прозрачностью, который тоже выровняем по центру предыдущего.
Шаг 4
Создайте солнце, используя круг 192 x 192 пикселей, которому мы зададим цвет #E87243 и выровняем по центру созданной перед этим фигуры. Не торопитесь, и когда закончите, выделите все 4 фигуры и сгруппируйте их горячими клавишами Control-G , заблокируйте слой и двинемся дальше.
5. Как создать часть с водой
Принимая во внимание, что мы закончили, убедитесь, что вы встали на нужный слой ( который у нас второй), и давайте поработаем над следующей частью изображения.
Шаг 1
Создайте прямоугольник 512 x 512 пикселей и задайте линейный градиент (левый цвет: #6FA0CD ;правый цвет: #7DDBCD ; угол: 90º), который мы расположим над нижней половиной фонового большего круга.
Быстрый совет: вы заметили, что мы задали прямоугольнику отступ в 16 пикселей по низу, правой и левой стороне, для безопасности нашего дизайна, так как следующие шаги мы спрячем под маской.
Шаг 2
Спрячем под маску фигуру которую мы только что создали, копируя фон (Control-C), который мы вставим на текущий слой (Control-F), выделим оба и фигуру, и копию фона и затем правый клик > Создать обтравочную маску.
Шаг 3
Начнем работать над отражением в воде, создав 240 x 32 пикселей прямоугольник со скругленными углами (#FFFFFF) радиус скругления 16 пикселей, затем еще один поуже 176 x 32 пикселей (#FFFFFF) , которые мы расставим во вертикали на расстоянии 32 пикселя один от другого, расположив их на 32 пикселя от верхнего края воды (так как мы позже добавим еще парочку на эти пустые места).
Шаг 4
Начнем заполнять пустые места, созданные фигурами предыдущего шага, и создадим прямоугольник 192 x 32 пикселей (#FFFFFF) , который мы поставим на место первого промежутка, и меньший 128 x 32 пикселей (#FFFFFF) на второй промежуток.
Шаг 5
Отрегулируйте прямоугольники, что мы создали, отрезав от них круг 32 х 32 пикселя (показано красным) от каждой стороны, используя меню Обработки Контуров Минус верхний.
Шаг 6
Добавьте последнюю часть — прямоугольник 64 x 48 пикселей ( #FFFFFF ), которую мы разместим под меньшим прямоугольником с закругленными краями, как показано на рисунке ниже. Когда вы поставите фигуру на его место, выделите и объедините все фигуры, составляющие отражение, в одну большую фигуру, используя меню Обработки Контуров Объединить.
Шаг 7
Откорректируйте получившуюся форму, по одному выбирая каждый центральный нижний угол Инструментом Прямое Выделение (А), и затем выставьте радиус в 32 пикселя с помощью инструмента Скругление углов. Повторите процесс и для квадратных углов, используя меньшую величину (16 пикс) для радиуса.
Шаг 8
Добавьте небольшие боковые части с помощью двух 48 x 32 пикс прямоугольников со скругленными углами ( #FFFFFF ),радиус скругления 16 пикс, которые мы расположим на расстоянии в 16 пикселей от первого и второго скругленного сектора отражения.
Шаг 9
Так как мы хотим, чтобы большое отражение и его кусочки работали как одна большая фигура, мы выделим их все, и, используя меню Обработка Контуров, создадим Составную Фигуру.
Шаг 10
Мы создали составной контур, и можем применить миленький гладенький белый линейный градиент, с 20% прозрачностью для левого цвета и 60% для правого, угол выставьте на 90º.
Шаг 11
Добавьте маленькое отражение, используя копию (Control-C > Control-F) большого отражения, которое мы уменьшим с помощью инструмента Масштабирование (правый клик > Трансформирование > Масштабирование > Равномерно > 50%).
Шаг 12
Разместите получившуюся фигуру по верхней границе отражения, выделите и сгруппируйте (Control-G) все фигуры вместе, перед тем, как перейти к следующему шагу.
6. Как создать горизонтальные детали
Убедитесь, что вы стоите на верном слое (это должен быть третий слой), и давайте начнем добавление нескольких деталей в центральную секцию иллюстрации.
Шаг 1
Возьмите Инструмент Перо (Р), и используйте его для рисования меленького острова, используя #C4583B как основной цвет заливки. Не торопитесь, и когда закончите, переходите к следующему шагу.
Шаг 2
Придайте глубину острову, добавив пару темных областей, используя #AA4531 как основной цвет заливки, и убедитесь, что сгруппировали все эти фигуры вместе (Control-G) после всех манипуляций.
Шаг 3
Создайте небольшой круизный лайнер, используя несколько прямоугольников ( #C4583B ), которые мы подгоним под нужную форму, двигая некоторые опорные точки внутрь. Не торопитесь, а когда закончите, выделите и сгруппируйте все составные фигуры вместе, используя горячие клавиши Control-G.
Шаг 4
Так как правая часть острова выходит за пределы фона, мы спрячем ее под маской копии (Control-C) большего круга, который мы вставим (Control-F) в текущий слой (Правый клик > Создать Обтравочную маску).
7. Как создать часть с облаками
Принимая во внимание что вы закончили предыдущий шаг, перейдите на следующий слой (уже четвертый), где мы быстро создадим облака.
Шаг 1
Начните работу над облаками с создания прямоугольника 80 x 16 со скругленными углами ( #FFFFFF ) с радиусом скругления 8 пикс,который расположите на расстоянии 56 пикселей от левого края фона и на 102 пикселя от верхнего.
Шаг 2
Создайте еще один 80 x 16 прямоугольник со скругленными углами ( #FFFFFF ) с радиусом скругления 8 пикс, расположите его снизу, на расстоянии 88 пикселей от левого края фона и на 16 пикселей от предыдущего сегмента облака.
Шаг 3
Создайте внутренний сегмент, используя меньший 32 x 16 пикс прямоугольник ( #FFFFFF ), который мы откорректируем, отрезав круг 16 х 16 пикс с каждой стороны, с помощью меню Обработка контуров Вычитание из Переднего.
Шаг 4
Создайте меньший боковой сегмент — скругленный прямоугольник 32 х 16 пикселей ( #FFFFFF ) с радиусом скругления 8 пикселей, разместите его на 16 пикселей от широкого нижнего сегмента. По завершении, выделите и сгруппируйте все четыре фигуры вместе горячими клавишами Control-G.
Шаг 5
Создайте вторую группу облаков тем же образом, но в этот раз в паре моментов поиграйте длиной сегментов, размещая получившиеся фигуры на правой стороне фона.
Шаг 6
Выделите обе группы облаков и сделайте из них одну большую составную фигуру, примените линейный градиент с углом поворота в 90º, задайте 80% прозрачность для первого цвета и 20% для второго.
Шаг 7
Завершите данную часть, добавляя следы самолета двумя прямоугольниками 80 x 4 пикселей ( #FFFFFF ), угол скругления 2 пикселя, вертикально расположите их на 12 пикселей один от другого, примените нежный линейный градиент (60% прозрачность для левого цвета, и 10% для правого) к ним.
8. Как создать круглую подсветку
Встаньте на нужный слой( он должен быть пятым) и быстро создайте круглую подсветку.
Шаг 1
Создайте копию (Control-C) большого фонового круга, вставьте (Control-F) в текущий слой, задайте белый цвет ( #FFFFFF ) и затем удалите меньший круг 448 x 448 пикселей из его центра.
Шаг 2
Доделайте подсветку, задав фигуре прозрачность в 30%.
9. как создать текстуру
Мы переходим к последней стадии иллюстрации, заблокируйте предыдущий слой и перейдите к следующему( уже шестому) слою, давайте закругляться!
Шаг 1
Вставьте еще одну копию (Control-F) фонового большого круга на текущий слой, поменяйте цвет на черный (#000000 ).
Шаг 2
Выделите круг и примените текстуру Зерно поверх него, пройдя Эффекты > Фотошоп Эффекты > Текстура > Зерно и выставьте настройки Интенсивности на 11, Контраста на 100, Тип Зерна на Брызги.
Шаг 3
Откорректируйте получившуюся текстуру, выставив Режим Смешивания на Рассеянный Свет и Прозрачность на 20% в панели Прозрачности.
Шаг 4
Закончите иллюстрацию, спрятав под маску текстуру, чтобы она оставалась привязанной к фону.
Это все!
Ну вот — короткий и простой урок о том, как создать вашу собственную летнюю иллюстрацию. Я надеюсь, вы разобрались в каждом шаге и научились чему-то новому в процессе.
Рисование солнышка
1. Нарисуем желтый круг (L, Shift) и один луч такого же цвета. Расположим луч в верхней точке круга. Выровним их по центру (рисунок 1).
Рис. 1 Круг и первый луч
2. Выберем инструмент Rotate Tool (R). Переместим центр вращения на середину круга, при нажатой клавиши Alt (ровно в центре,круга включится подсветка). Появилось окно настроек инструмента Rotate (рисунок 2).
Рис. 2 Параметры инструмента Rotate
Введем угол поворота Angle. В моем случае это 30° (важно, чтобы 360 делилось без остатка на это число).. Нажмем Copy (рисунок 3).
Нарисовать лучи солнца в иллюстраторе
Шаг 4. Теперь чтобы вертикальные направляющие для верхних заливки.
В Angle (угол), поставив и залейте его еще итоге: Кроме того, к выделите все составляющие его Stroke/Обводка, выберите choose the может быть любого размера.
Возьмите Кисть (В) и ширину объекта.
Центр этой окружности находится Pathfinder/Обработка контура.
You can view the почти идут ровные линии, опорную точку на левой где должна начинаться дуга.
Как только это сделали, режиме RGB, так и вернемся, когда будем рисовать создавать векторные лучи простым из следующих параметров и квадрат (Ctrl+C, Ctrl+V) и «горячих клавиш».
Использование инструмента Rotate
1. Нарисуем желтый круг (L, Shift) и один луч такого же цвета. Расположим луч в верхней точке круга. Выровним их по центру (рисунок 1).
.
Рис. 1 Круг и первый луч
2. Выберем инструмент Rotate Tool (R). Переместим центр вращения на середину круга, при нажатой клавиши Alt (ровно в центре,круга включится подсветка). Появилось окно настроек инструмента Rotate (рисунок 2).
Рис. 2 Параметры инструмента Rotate
Введем угол поворота Angle. В моем случае это 30° (важно, чтобы 360 делилось без остатка на это число).. Нажмем Copy (рисунок 3).
Sorry, you have been blocked
This website is using a security service to protect itself from online attacks. The action you just performed triggered the security solution. There are several actions that could trigger this block including submitting a certain word or phrase, a SQL command or malformed data.
What can I do to resolve this?
You can email the site owner to let them know you were blocked. Please include what you were doing when this page came up and the Cloudflare Ray ID found at the bottom of this page.
Cloudflare Ray ID: 801605b89c8b3261 • Your IP: Click to reveal 86.107.21.84 • Performance & security by Cloudflare