آموزش ایجاد تصاویر SVG با نرم افزار فتوشاپ
ما به کمک نرم افزار فتوشاپ میتوانیم تصاویری با پسوند و ساختار svg ایجاد کنیم، برای اینکار از منوی File گزینه New و یا کلید ترکیبی Cntrl+N و یا دکمه آبی رنگ New File در نسخه 2022 فتوشاپ را انتخاب میکنیم و مشابه تصویر زیر عکسی با پس زمینه Transparent و مود رنگی RGB با اسم Chegoonegi.com در ابعاد 1000 در 1000 پیکسل ایجاد میکنیم.
SVG مخفف کلمه Scalable Vector Graphics است که اگر بخواهیم این واژه انگلیسی را به صورت فارسی ترجمه کنیم میتوان گفت نگاره سازی برداری مقیاس پذیر شاید هنوز مفهوم این عبارت برای شما گنگ و نا اشنا باشد پس تا اخر این مطلب با ما همراه باشید. در دنیای وب و کامپیوتر ترسیمات می توانند به دو نوع تقسیم شوند Raster یا Vector در اکثر فایل های رایج تصویری که دست کم همه با آن اشنا هستیم مثل ( jpg، gif، و bmp ) بر پایه مبنای گرافیک شطرنجی یا Raster هستند در Raster Graphics که به آن گرافیک شطرنجی هم گفته می شود ، حال بیاییم با هم یک تصویر SVG ایجاد کنیم.
ما به کمک نرم افزار فتوشاپ میتوانیم تصاویری با پسوند و ساختار svg ایجاد کنیم، برای اینکار از منوی File گزینه New و یا کلید ترکیبی Cntrl+N و یا دکمه آبی رنگ New File در نسخه 2022 فتوشاپ را انتخاب میکنیم و مشابه تصویر زیر عکسی با پس زمینه Transparent و مود رنگی RGB با اسم Chegoonegi.com در ابعاد 1000 در 1000 پیکسل ایجاد میکنیم.
حال که تصویر جدید را ایجاد کردیم با کمک ابزار Type و ابزار Shape یه تصویر تستی ایجاد میکنیم اگر با فتوشاپ آشنایی ندارید میتوانید با کمک "پکیج کاملترین آموزش ویدئویی فتوشاپ" آن را فراگیرید.555
تصاویر SVG به طور پیش فرض با مرورگر باز میشود، و اگر cntrl را از روی کیبورد نگه داشته و دکمه + و با اسکرول ماوس را بچرخانید متوجه خواهید شد که تصویر ذره ای افت کیفیت نداشته و شما اولین تصویر SVG خود را با فتوشاپ خلق کردید.
جزئیات بیشتری و ارور هایی برای ایجاد تصویر SVG وجود دارد که پیشنهاد میشود در دوره آموزش کامل فتوشاپ سایت چگونگی شرکت کنید، چون تمامی این موارد قابل بیاد در یک مقاله نمیباشد. برای آموزش های بیشتر به صفحه اصلی سایت " وب سایت چگونگی " بازدید نمایید.
SVG چیست و استفاده از آن چه مزایایی دارد؟
در دوره و عصری که ما یعنی طراحان و توسعه دهندگان وب در حال زندگی کردن هستیم پیکسل ها نقش مهم و حیاتی دارند که می توانند برای ما هم نقش یک دوست را داشته باشند و هم یک دشمن، در بخش های زیرین بیشتر درباره این مبحث صحبت خواهیم کرد، قطعا همه ما در طراحی سایتمان و یا عکس هایی که طراحی و ترسیم میکنیم این انتظار را داریم که تمامی تصاویر در دید بیننده ها در بهترین و با کیفیت ترین حالت ممکنشان قابل مشاهده باشند، حتما برای شما کاربران سایت چگونگی هم پیش امده که وارد سایتی شده باشید و بی کیفیتی و بهم ریختگی تصاویرش حسابی حالتان را گرفته باشد طراحان برای خلاص شدن از دست این نوع مشکلات از فرمت های SVG استفاده میکنند. به لطف SVG شما میتوانید تصاویری داشته باشید که به اندازه دلخواهتان ان ها را کوچک یا بزرگ کنید بدون اینکه نگران از بین رفتن کیفیتشان باشید، یکی از بزرگترین مزایا فایل های SVG این است که سرعت لود سایت را کاهش نمیدهند و همچنین فایل های svg به دلیل حجم پایینی که دارند برای طراحی صفحات وب بسیار مناسب هستند پس امکان ندارد شما یک طراح سایت باشید و فرمت SVG را نادیده بگیرید این بدین معنی نیست که تصاویری با فرمت های png و jpg برای شما کاربردی نخواهند داشت بلکه تصاویری با این فرمت ها کاربرد خودشان رو حفظ نموده و در کنارش svg ها هم به زندگی خودشان در دنیای وب ادامه میدهند. معمولا ترسیمات و لبه های تصاویر svg دارای هر رزولوشنی و هر کیفیتی که باشند خیلی تیز و برنده اند اما با این حال میتوان گفت حجم بسیار کمتری نسبت به تصاویر پیکسلی دارند و خیلی راحت قابل تغییر و هرگونه ویرایشی هستند پس بی دلیل نیست در دنیای وب SVG ها از محبوبیت زیادی برخوردارند. در ابتدا بهتر است به مفهوم دقیق SVG بپردازیم.
در Raster Graphics ذخیره شدن تصاویر به صورت مجموعه ای از پیکسل ها اتفاق می افتد یعنی به این صورت که رنگ هر پیکسل به صورت جداگانه ذخیره میشود، با اعمال تغییرات در ابعاد تصاویر کیفیت این تصاویر نیز تحت تاثیر قرار گرفته و کیفیت اصلی خودشان را از دست میدهند، دسته دوم Vector Graphics یا گرافیک برداری هستند که روشی هستند برای ذخیره و یا تولید فایل های تصویری کامپیوتری، در Vector Graphics تصاویر به صورت مجموعه ای از مشخصات هندسی از جمله نقاط، خط ها و منحنی ها و یا چند ضلعی ها ذخیره میشوند، واژه بردار در اینجا فقط یک خط راست نیست بلکه کاربرد معنایی گسترده تر و وسیع تری دارد. معمولا تصاویری که به روش گرافیک برداری تعریف می شوند از منحنی و خطوطی به اسم بردار شکل میگیرند و به صورت ریاضی تعریف می شوند، نکته جالب در این نوع تصاویر این است که اجزای این تصاویر را بدون از بین رفتن کیفیت می توانید به راحتی تغییر اندازه داده و یا جا به جا کنید با بزرگ و یا کوچک کردن این تصاویر هیچ تغییری در رزولوشن ان ها ایجاد نشده و بدون از دست دادن وضوح و جزئیات تصاویر می توانید تصاویرتان را به چاپ برسانید یکی از مهم ترین و معرف ترین فرمت های ذخیره فایل های گرافیک برداری فرمت های SVG هستند. لازم به ذکر است که فایل هایSVG بر اساس XML هستند این بدین معنی است که سینتکس آن خیلی هم نا اشنا نخواهند بود و به HTML شباهت زیادی دارد. برای مثال برای ترسیم شکل مربع از تگ استفاده میشود و در اخر تمامی اشکال درون یک تگ قرار می گیرند.
ویرایش ساده
زمانی که بخواهیم یک تصویر Raster را تغییر دهیم باید از نرم افزارهایی همچون فتوشاپ و یا مشابه ان ها استفاده کنیم اما برای تغییر فایل های SVG در محیط کدنویسی می توانیم ویرایش های مورد نظرمان را انجام دهیم
حجم فایل کمتر
کم کردن حجم عکس بدون افت کیفیت یکی از دغدغه های طراحان وب هست که با فرمت های SVG این مشکل کاملا رفع خواهد شد به طور معمول ترسیم وکتورها حجم کمتری میگیرند خصوصا اگر این وکتورها از طرح و شکل ساده ای تشکیل شده باشند و فشرده سازی روی فرمت های SVG بهتر اعمال می شود.
طراحی واکنشگرا
تصاویرSVG خودشان responsive هستند و نگرانی از بابت این موضع برای طراحان و توسعه دهندگان وب وجود ندارد یعنی اندازه تصویر به طور خودکار متناسب با اندازه ی صفحه نمایش تنظیم میشود. اما اگر از تصاویری با فرمت PNG یا JPG استفاده کنید شاید مجبور شوید در صفحه نمایش های مختلف نسخه های مختلفی از تصاویر را قرار دهید.
چه زمانی از SVG استفاده کنیم:
* آیکون ها
* بنرهای تبلیغاتی
* ترسیمات متحرک
* ترسیمات ساده مثل شکل های مختلف
* اینفوگرافیک ها و مصور سازی داده
برای طراحی هایی که نیاز به پردازش و ترسیمات پیشرفته و زیاد به وسیله مرورگر ها را دارد بهتر هست از Canvas استفاده کنیم و در مقابل اگر به دنبال راهی برای ترسیم یک گرافیک ساده بر روی صفحات وب هستیم باید از Svg استفاده کنیم. امیدواریم که این مطلب برای شما مفید واقع شده باشد.