ساخت لوگو و بنر SVG توسط Adobe Illustrator برای وب سایت و برنامه ها

svg

ما در این مقاله به ساخت لوگو و بنر SVG توسط Adobe Illustrator برای وب سایت و برنامه ها می پردازیم. لوگو SVG بسیار بهینه سازی شده است ، بر اساس وکتورهای سازگار با SEO که سرعت وب سایت را نسبت به تصاویر معمولی jpg/png افزایش می دهد.

هنگام ایجاد لوگو برای یک وب سایت مدرن ، ایده خوبی است که از Adobe Illustrator یا برنامه دیگری استفاده کنید که بتواند با گزینه یک فایل SVG ایجاد و دستکاری کند تا یک برنامه ویرایش عکس مانند Adobe Photoshop که برای ویرایش و دستکاری پیکسل ها استفاده می شود.

دلیل استفاده از SVG برای لوگو و سایر این است که SVG ها می توانند بدون از دست دادن کیفیت به اندازه های مختلف مقیاس بندی شوند و می توانند توسط JavaScript و CSS دستکاری شود. در این پست مراحل ایجاد لوگوی در Adobe Illustrator و تبدیل آن به SVG برای استفاده در وب سایت و در نهایت نحوه تغییر آن از طریق کد برای تغییر اندازه و رنگ را مرور می کنم.

مرحله 1 - Adobe Illustrator را باز کنید و پروژه جدیدی ایجاد کنید

برای ایجاد یک فایل SVG ما باید از برنامه ای استفاده کنیم که بتواند هنر بصری را ایجاد و دستکاری کند. محبوب ترین برنامه برای انجام این کار Adobe Illustrator است. Adobe Illustrator به عنوان برنامه ای از Adobe یا به عنوان بخشی از اشتراک Adobe Creative Cloud در دسترس است. Illustrator را باز کرده و یک پروژه جدید ایجاد کنید. برای سادگی ، صفحه را روی 1000px x 500px تنظیم کنید.

مرحله 2-ایجاد لوگو با ابزار متن و تغییر اندازه تابلو هنری متناسب با لوگو

در این مثال ما یک لوگوی فقط متن ایجاد می کنیم. ابزار  Type Tool را انتخاب کرده و روی لوگوی خود ناحیه ای را ترسیم کنید. اندازه فونت را افزایش دهید تا به عرض و ارتفاع دلخواه برسد و تا آنجا که ممکن است تابلو را پر کند.

tech times

در مرحله بعد باید اندازه تابلو را طوری تغییر دهیم که کمی بزرگتر از لوگو باشد. دو روش برای انجام این کار وجود دارد:

  1. Object > Artboards > Fit to Artboard Bounds
  2. Document Setup > Edit Artboards > Drag to size

من از ترکیبی از این دو استفاده می کنم. ویژگی Edit Artboard به شما امکان می دهد artboart را به اندازه آن بکشید یا آن را با ابعاد دقیق تنظیم کنید.

document setup

مرحله بعدی ایجاد یک طرح کلی از لوگوی خود است. برای انجام این کار ، با برجسته سازی آرم خود ، به Type> Create Outlines بروید.

tech times with outline

پس از اتمام کار ، هر شکل را با رفتن به Window> Pathfinder و روی دکمه combine shapes کلیک کنید.

pathfinder

بعد باید به عنوان SVG ذخیره کنیم. روی کلیک کنید Save As و SVG را انتخاب کنید. می توانید تنظیمات پیش فرض را حفظ کرده و ذخیره کنید.

مرحله 3 - بهینه سازی کد تولید شده SVG

کد تولید شده توسط Adobe illustrator باید بهینه شود. اگر SVG را در یک ویرایشگر متن باز کنید ، چیزی شبیه به این است:

generated svg code

ما می توانیم SVG ایجاد شده را با یک ابزار شخص ثالث به نام SVGO-GUI بهینه سازی و پاک کنیم ، که می توانید آن را از اینجا بارگیری کنید. پس از بارگیری و نصب ، آن را باز کنید. به سادگی SVG ذخیره شده خود را پیدا کرده و آن را روی منطقه کشیدن و رها کردن بکشید. این ابزار همه عناصر غیر ضروری کد SVG را پاک می کند که می توانند بدون تأثیر بر نتیجه ارائه SVG حذف یا تبدیل شوند. هنگامی که با یک ویرایشگر کد باز، SVG نهایی خود را باید چیزی شبیه به این:

final svg code

مرحله 4 - اضافه کردن SVG لوگو به وب سایت خود 

ایجاد یک صفحه HTML خالی و شامل یک قطعه از کد را در داخل بالای HTML تگ body و یا بر روی یک صفحه HTML موجود که ما انجام می دهیم ایجاد یک عنصر SVG است که محل اصلی لوگوی جدید ما خواهد بود .

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>index.html</title>
</head>
<body>

<!-- SVG Library -->
<svg xmlns="http://www.w3.org/2000/svg" style="display:none">

</svg>

</body>
</html>

داخل آن برچسب اجازه می دهد کد لوگوی ما را اضافه کنید. لوگوی تولید شده SVG را با ویرایشگر متن باز کنید و همه کد را کپی کرده و کد را در برچسب ما جایگذاری کنید . به جای کپی <svg با <symbol و حذف xmlns="http://www.w3.org/2000/svg" در نهایت اجازه دهید به نماد خود یک شناسه بدهیم. برای این درس ، ما آن را "لوگو" می نامیم. شما باید به چیزی شبیه این برسید:

<!doctype html>
<html>
  <head>
  <meta charset="UTF-8">
  <title>index.html</title>
  </head>
  <body>

  <!-- SVG Library -->
  <svg xmlns="http://www.w3.org/2000/svg" style="display:none">
    <!-- Logo -->
    <symbol id="logo" viewBox="0 0 879 114"><path d="M5 42h27v65h41v-65h27v-33h-95zM151 70h25v-23h-25v-5h31v-33h-71v98h72v-31h-32zM188.5 57.8c0 29.2 23.9 50.7 56.8 50.7 11.7 0 23.7-2.7 29.7-6.1v-34.6c-6 3.8-15.7 6.5-24.8 6.5-13.9 0-21.2-6.5-21.2-15.6s7.6-15.8 21.4-15.8c9.1 0 17.6 2.9 24.6 6.3v-36.4c-6-3.3-17.9-5.7-29-5.7-33.5 0-57.5 21.6-57.5 50.7zM347 39h-20v-30h-40v98h40v-36h20v36h41v-98h-41zM430 42h28v65h40v-65h28v-33h-96zM537 9h40v98h-40zM646.4 33.8l-19.6-24.8h-37.8v98h36v-48h.7l18 23.1 17.3-22.8v47.7h41v-98h-36.7zM755 70h24v-23h-24v-5h30v-33h-71v98h73v-31h-32zM865.1 55.2c-9.7-7.6-23.3-9.2-27.3-10.5-1.6-.5-3.1-1.4-3.1-3.4 0-1.5.9-3 4.8-3 5 0 17.6 2.3 29.6 8.7v-32.2c-9-4.6-22.9-7.8-34.9-7.8-24.9 0-40 13.5-40 33.2 0 9.5 3.6 15.9 8.8 20.5 10.1 8.8 23.8 10.3 28.6 11.6 1.8.4 3 1.2 3 3.1 0 1.6-1 3.3-5.1 3.3-5.8 0-19.4-3.1-32.4-11.7v33.5c10 5 24.5 8 36.9 8 25.8 0 41.1-13.2 41.1-32.1-.1-8.8-3.3-15.7-10-21.2z"/></symbol>
  </svg>

</body>
</html>

اکنون آماده ایم تا از لوگو برای نمایش آن در صفحه وب خود استفاده کنیم. برای این کار از تگ دیگری استفاده می کنیم :

<svg><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg>

اکنون لوگوی ما را در صفحه قرار می دهد. با این حال ، روی سفید است ، بنابراین نمی توانیم آن را ببینیم ، بنابراین اجازه دهید از CSS برای اعمال برخی کلاس ها در برچسب استفاده کنیم:

<style>
  .logo-dark {
    fill: #000;
  }
  
  .logo-large {
    width: 1000px;
  }
  </style>
  
  <svg class="logo-dark logo-large"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#logo"></use></svg>

اکنون ما آماده استفاده از لوگو در صفحه وب خود هستیم و با استفاده از کلاس های CSS در پیوند SVG می توانیم از لوگو در جاهای مختلف وب سایت شما استفاده کنیم و اندازه و رنگ آن متناسب با صفحه تنظیم کنیم.

دیدگاهتان را بنویسید

asakereh
Lead Engine and Php Code Expert