وقتی می خواهیم تصویر را Save for Web کنیم، همیشه در نظر گرفتن کیفیت و اندازه تصویر برای بالا بردن وض

وقتی می خواهیم تصویر را Save for Web کنیم، همیشه در نظر گرفتن کیفیت و اندازه تصویر برای بالا بردن وضوح هنگام دیده شدن آن اهمیت زیادی دارد. در این آموزش به شما نشان داده خواهد شد، چه چیزی برای ذخیره کردن تصویر برای وب نیاز دارید.

امروزه احتمالا اینترنت یکی ازبزرگترین رسانه برای نمایش کارهای هنری، گرافیکی و عکس ها است که این امر باعث شده تا داشتن اطلاعات کافی برای ذخیره کردن تصاویر برای وب، به امری مهم و لازم تبدیل شود.
اساسا، ذخیره کردن برای وب یک متعادل سازی است- شما باید کیفیت و اندازه یک رسانه را به حد تعادل برسانید تا قابلیت لازم برای ذخیره سازی را داشته باشد و نیز با نیاز های شما نیز مطابقت داشته باشد.

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


داده های صرفه جو در برابر داده های پر اتلاف

اگر چه فرمت های متعددی برای تصاویر وجود دارد (JPEG, GIF, PNG ،...)، تصاویر را می توان به دو دسته داده های صرفه جو و پراتلاف طبقه بندی کرد. داده های صرفه جو به رسانه این امکان را می دهد تا بدون از دست دادن و یا تلف کردن اطلاعات و یا کیفیتشان نمایش داده شوند. اما داده های پرتلاف ممکن است کیفیت و اطلاعاتشان را از دست بدهند.

متداول ترین رسانه صرفه جو در گرافیک و طراحی شامل: GIF و PNG و TIFF می شود در حالیکه JPEG از معروفترین رسانه های گرافیکی پر اتلاف به شمار می رود.


چگونه در فتوشاپ Save for Web کنیم

Adobe Photoshop یک راه مناسب برای بهینه سازی تصاویر برای ذخیره کردن برای وب را داراست. در فتوشاپ، به مسیر File > Save For Web بروید و یا از کلیدهای میانبر Ctrl + Alt + Shift + S استفاده نمایید.
یک پنجره جدید باز خواهد شد که شامل همه تنظیمات برای ذخیره سازی و بهینه سازی یک تصویر برای وب می شود:

تصاویر GIF

گاهی اوقات، لازم است برای بهینه سازی بهترتصویردر قالب کاری که می خواهید انجام دهید، تصویر را در یک قالب صرفه جو ذخیره کنید. درطراحی وب سایت ها اغلب دیده شده که، در مقایسه با عکس های معمولی، در صفحه آرایی ها و طرح بندی وب سایت ها اغلب رنگ های کمتری به کار برده شده است.

GIF یا Graphics Interchange Format، یک قالب عکس است که از یک پالت که شامل بیش از 256 رنگ است استفاده می کند، که آن را به یک گزینه مهم برای گرافیک های وب تبدیل کرده است که از یک میدان رنگ گسترده استفاده نمی کند همچنین GIF می تواند پیکسل های تکی را طوری تنظیم کند تا به transparent تبدیل شوند که ما در این آموزش قصد آموزش و بحث در مورد آن را نداریم. تصویر زیر مقایسه بین یک تصویر با قالب GIF (با استفاده از 250 رنگ) و تصویر دیگر با قالب jpeg است، اندازه فایل هر دو دقیقا مشابه است. همین طور که می بینید قالب گرافیکی صرفه جوی GIF، از لحاظ کیفیت، شباهت بیشتری به تصویر اصلی دارد.

به دلیل اینکه تصاویر GIF یک پالت محدود با 256 رنگ دارد، تقریبا هیچ وقت از آنها در عکس ها استفاده نمی شود، اما برای گرافیک هایی که از یک رنگ در آنها استفاده می شود یا رنگ های محدودی در ساختارشان بکار رفته، بسیار مناسب هستند. برای عکس ها،قالب JPEG و یا PNG را می توان استفاده کرد.

تصاویر با کیفیت و PNG صرفه جو

PNG یا Portable Network Graphics، مانند GIF ، قالب هایی با داده های صرفه جو هستند، جز اینکه آنها تعداد بیشتری رنگ را پشتیبانی می کنند ( که باعث می شود آنها در بسیاری موارد دیگر نیز بزرگتر باشند ).....و نیز می توانند به جای single transparent pixels یا تک پیکسل های شفاف، کانال های شفاف آلفا یا alpha transparency channels را پشتیبانی کنند.

تصاویر PNG در حال جایگزین شدن با تصاویر GIF هستند، بیشتر به خاطر اینکه آنها اساسا بهتر از تصاویر GIF قادر به فشرده سازی تصاویر هستند و از دامنه رنگ بیشتری نیز برخوردارند. آنها هنوز مانند GIF از گسره پشتیبانی وسیعی برخوردار نیستند، اما در این جهت در حال بهبود وضعیت خود هستند.

برای گرافیک هایی که باید روی وب قرار بگیرند در حالیکه کاملا کیفیت خود را حفظ کرده اند، PNG اولین انتخاب است در این موارد شما به یک تصویر با سایز بزرگتر از JPEG دست می یابید، اما در این زمان، اصولا PNG بهترین انتخاب برای زمانی است که یک گرافیک شامل خطوط تیز و یا متنی است که باید خیلی واضح و روشن نمایش داده شود، اما این کار سرانجام بستگی به تصمیم طراح دارد که کدام یک از قالب ها را انتخاب می کند.

آشنایی با نحوه کار با ابزار Pen در فتوشاپ

در این آموزش، قصد داریم به شما نشان دهیم چگونه از ابزار Pen Tool برای خلق اشکال استفاده کنید. در اینجا تجربیاتی را در اختیار شما قرار خواهیم داد که می تواند شما را در استفاده کابردی تر این ابزار یاری دهد.

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


شروع آموزش
برای کمک به آشنایی بیشتر شما با این ابزار، می خواهیم مثال های مختلفی به شما نمایش دهیم و نشان دهیم چگونه اشکال را رسم کنیم.
برای شروع، یک فایل جدید ایجاد کنید. (284×284)
سپس با رفتن به مسیر View > Show > Grid پارامتر Grid را فعال کنید و با رفتن به مسیر View > Snap گزینه Snap را نیز فعال نمایید.

ما grid + snapping را فعال کردیم، حالا می توانیم از ابزار pen استفاده کنیم و با کمی دقت اشکال و منحنی های خود را رسم کنید.
حالا ابزار Pen را انتخاب کرده و در قسمت نوار تنظیمات، آیکن Shape Layers را فعال نمایید.



حالا به سلیقه خود یک رنگ به عنوان رنگ foreground انتخاب کنید.

رسم کردن اشکال با ابزار pen بسیار آسان است. مکان نما را در جایی که می خواهید کشیدن را از آنجا آغاز کنید، قرار دهید و کلیک کنید تا اولین نقطه (anchor point) ظاهر شود. نقاط ثقل پی در پی به یکدیگر متصل می شوند تا اینکه به نقطه پایانی برسند، این کار به شما امکان کشیدن شکل را می دهد.برای کامل کردن یا بسته شدن شکل، روی نقطه آغاز کلیک کنید.
این کار را ادامه دهید. ببینید با استفاده از نقاط چه شکلی می توانید ایجاد کنید. من پیشنهاد می کنم یک ستاره ایجاد کنید.

تا اینجا کشیدن اشکال ساده کافی است!


کشیدن منحنی با استفاده از Pen Tool
ممکن است قبلا در هنگام رسم کردن منحنی ها و کلیک و کشیدن (drag) نقاط ثقل (anchor point) متوجه نکته جالبی شده باشید و آن اینکه خطوط شروع به منحنی شدن می کنند!
می خواهیم این ادعا را آزمایش کنیم. بعد ازاینکه یک نقطه ثقل ایجاد کردید ، کلید ماوس را نگه دارید و آن نقطه را در هر جهتی که دوست دارید خط شما انحنا داشته باشد drag کنید.

اگر شما مطالب و دستورالعمل های زیر را دنبال کنید، باید قادر باشید یک دایره بکشید.

اگر در کشیدن شکل مورد نظر دچار مشکل شدید، در این قسمت یک آموزش ویدئویی وجود دارد که به شما نشان می دهد چگونه دایره را رسم کنید. هنگامی که آیکن به یک اشاره گر سیاه تبدیل شد، به این معناست من در حال Drag کردن هستم وقتی که یک نقطه ایجاد کرده ام.

> مشاهده فیلم اول در صفحه فوق

مشخصات منحنی ها بر اساس طول، جهت نقاط و زاویه ای (angle) است در آن قرار دارند. بعد از کمی که با آنها تمرین کردید، باید بیشتر با رسم کردن منحنی های پیچیده تر آشنا شده باشید. به این نکته هم توجه کنید که، برای تغییر دادن جهت هر نقطه بوسیله ابزار pen، کلید Ctrl یا Ctrl + Alt را نگه دارید.
مثال:

چند مثال از اشکال مختلف
می خواهیم آنچه را که تا کنون آموخته ایم اجرا کنیم و از آنها در رسم کردن چند طرح اصلی استفاده کنیم. اگر از همان سایزو ابعادی که در بالا به آن اشاره شد برای فایل خود استفاده می کنید، می توانید این الگو ها را در آن Copy + Paste کنید.

ابتدا یک مربع با گوشه های گرد (Rounded Rectangle) رسم کنید. یک مربع از قبل طراحی شده در لیست اشکال وجود دارد که می توان از آن استفاده نمود، اما گاهی اوقات باید آن را طوری طراحی کنیم و گردی گوشه های آن را به دلخواه تنظیم کنیم.

مربع مورد نظر از منحنی های اولیه تشکیل شده و ایجاد آن کار بسیار ساده ای می باشد. با اعمال کمی تغییرات، می توانیم مربعی با 1 یا 2 و یا 3 گوشه گرد خلق کنیم، در حالیکه بقیه گوشه ها تیز باقی بمانند.

اینجا نیز یک الگوی دیگر وجود دارد که همین طور که می بینید روی منحنی "S" متمرکز است و شامل موجهای متوالی و پی در پی است.

همیشه در اشکال پیچیده از منحنی های "S" شکل استفاده می شود. آنها با drag کردن نقاط راهنمای (Directional Points) دو نقطه ثقل در یک جهت ایجاد می شوند.

برای آخرین مثال می خواهیم با استفاده از ابزار "Pen " یک custom shape یا شکل جدید دست ساز ایجاد کنیم.