Как нарисовать иконки для сайта в CorelDraw

Миниатюра

Добрый день, уважаемые читатели нашего блога!
В прошлой статье, я произвел короткое изменение Англоязычной иконки кнопки в программе Photoshop. Теперь мы сделаем то-же самое, используя возможности векторной графики в программе Corel Draw.

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

ИТАК, начнем!

1.У нас есть оригинал Англоязычной кнопки, по которому необходимо

1.У нас есть оригинал Англоязычной кнопки, по которому необходимо создать русскоязычный аналог

 

2. Узнаем размеры изображения кнопки, открыва панель свойств

2. Узнаем размеры изображения кнопки, открываем панель свойств файла (кликнув на файле правой клавишей мыши — свойства)

 

3.Создаем новый рисунок в окне программы Corel Draw

3.Создаем новый рисунок в окне программы Corel Draw

4. Указываем размеры Англоязычной кнопки (211 на 40 пикселей)

4. Указываем размеры Англоязычной кнопки (211 на 40 пикселей)

 

5. Настроем отображение свойств объектов в окне программы

5. Настроем отображение свойств объектов в окне программы (слева появится окно свойств)

6. Переключим отображение рисунка в обычный вид (чтобы

6. Переключим отображение рисунка в обычный вид (чтобы не мешали пикселы)

 

7. На панели инструментов выберем прямоугольник (жмем

7. На панели инструментов выберем прямоугольник (жмем долго левой кнопкой мыши, появляется всплывающее окно, выбираем Прямоугольник)

8. Рисуем контуры прямоугольника (в нашем случае рисуется

8. Рисуем контуры прямоугольника (в нашем случае рисуется прямоугольник со скругленными краями)

9. Убираем скругление углов прямоугольника и контуры

9. Убираем скругление углов прямоугольника и контуры

 

10. На панели свойств Выберем свойство Заливка, при этом

10. На панели свойств Выберем свойство Заливка, при этом панель свойств отобразит новые данные. Выберем Фонтанную заливку.

11. Выберем дополнительный цвет в кнопке От.

11. Выберем дополнительный цвет в кнопке От.

 

12. Выберем цвет морской волны.

12. Выберем цвет морской волны.

13. Для второго цвета в Заливке выберем зеленый цвет.

13. Для второго цвета в Заливке выберем зеленый цвет.

 

14. Выберем инструмент прозрачность на панели инструментов

14. Выберем инструмент прозрачность на панели инструментов (наводим мышь, жмем ДОЛГО левую кнопку мыши).

15. Рисуем направление прозрачности на прямоугольнике.

15. Рисуем направление прозрачности на прямоугольнике.

 

16. Копируем прямоугольник.

16. Копируем прямоугольник.

 

17. Вставляем Прямоугольник.

17. Вставляем Прямоугольник.

 

18. Выберем скопированный прямоугольник.

18. Выберем скопированный прямоугольник.

19. У нас 2 одинаковых прямоугольника с эффектами прозрачности.

19. У нас 2 одинаковых прямоугольника с эффектами прозрачности.

20. Подрегулируем прозрачность.

20. Подрегулируем прозрачность.

 

21 Подрегулируем прозрачности чтобы получить объемный эффект.

21 Подрегулируем прозрачности чтобы получить объемный эффект.

22. создаем новый Прямоугольник и задаем градиент.

22. создаем новый Прямоугольник и задаем градиент.

23. Задаем однородную заливку с эффектом прозрачности.

23. Задаем однородную заливку с эффектом прозрачности.

24. Копируем прямоугольник вниз.

24. Копируем прямоугольник вниз.

 

25. Выберем все прямоугольники.

25. Выберем все прямоугольники.

 

26. Блокируем от изменений все прямоугольники.

26. Блокируем от изменений все прямоугольники.

27. Нарисуем скругленный контур.

27. Нарисуем скругленный контур.

28. Зададим цвет контура скругленного прямоугольника.

28. Зададим цвет контура скругленного прямоугольника.

29. Нарисуем контур стрелки.

29. Нарисуем контур стрелки.

 

30. Корректируем контуры фигуры.

30. Корректируем контуры фигуры.

 31. Подбираем контуры в режиме Пикселы.

31. Подбираем контуры в режиме Пикселы.

 

32. Двигаем контуры фигуры по центрам пикселей.

32. Двигаем контуры фигуры по центрам пикселей.

 

33. Фигура стала отображатся точно.

33. Фигура стала отображатся точно (была кривоватая).

34. Перейдем в обычный режим.

34. Перейдем в обычный режим.

 

35. Сдвинем нарисованную стрелку внутрь рисунка.

35. Сдвинем нарисованную стрелку внутрь рисунка.

 

36. Закрасим стрелку градиентом.

36. Закрасим стрелку градиентом.

 

37. Создадим Текст.

37. Создадим Текст.

 

38. Создадим Градиент Текста.

38. Создадим Градиент Текста.

 

39. Экспортируем рисунок.

39. Экспортируем рисунок, задаем битность цветов.

 

41. Сохраним на диск.

41. Сохраним на диск.

 

42. Смотрим результат

42. Смотрим результат

 

Вот и все, товарищи!

Русскоязычная кнопка готова. Кто хочет посмотреть готовый результат, может скачать файл:

Кнопка русскоязычная (5.8 KiB, 79 скачиваний)

Образец англоязычной кнопки:

Кнопка Англоязычная (1.4 KiB, 82 скачиваний)

В следующих статьях я покажу вам, как создать аналогичную кнопку в простом бесплатном редакторе IcoFx.

Кнопка русскоязычная

Кнопка русскоязычная
Кнопка русскоязычная

Кнопка русскоязычная.bmp
Кнопка русскоязычная
5.8 KiB
79 Скачиваний
Детали
10.11.2014

Теги: ,

>