آموزش طراحی وب

مدرسه مجازی ایرانیان

دسته بندی موضوعات
سفارش تبلیغات

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

سلام دوستان عزیز ،

اول میخوام از همه شما دانشجویان عزیز تشکر کنم که همچنان با ما هستید و نوشته های ما رو مطالعه میکنید . در این نوشته قصد داریم در مورد استاندارد هایی ( استاندارد های گرافیک برای وب ) صحبت کنیم که طراحان گرافیک باید در طراحی های خودشون لحاظ کنن تا فایل استاندارد و کاملی به کدنویس تحویل دهند .
استاندارد های زیادی برای این مسئله وجود داره ولی من سعی میکنم در این نوشته به مهم ترین موارد اشاره کنم :

 

ابعاد عرض و ارتفاع

ابتدا باید واسه خوتون مشخص کنین که طرحی که دارید کار میکنید قرار هست به چه صورتی کدنویسی بشه ! منظورم این هست که شما دارید طرح واکنشگرا ( Responsive ) کار میکنید یا طرح معمولی که اگر طراحی ریسپانسیو کار میکنین باید اول این موضوع رو مشخص کنین که برای چه Device هایی قرار هست طراحی کنید . به عنوان مثال اگر بزرگترین دیوایسی که ما قرار هست براش طراحی کنیم ، مانیتور ۲۲ اینج با رزولوشن ۱۰۸۰×۱۹۲۰ پیکسل هست میتونید به صورت Full Width و یا در عرض مناسب مثل ۱۸۶۰ پیکسل کارتونو طراحی کنین . به همین ترتیب طبق عرض Device هایی که داریم باید عرض طرح رو تغییر بدیم و محتوا رو داخل اون طرح قرار بدیم .

البته در Device های کوچکتر مثل تبلت و موبایل حتی در حالت های Normal و یا Landscape هم شما باید عرض طرح رو تغییر بدید و طبق اون اندازه طراحیتون رو انجام بدید . اصولا در طراحی های ریسپانسیو ، طراحان گرافیک باید طرح رو در اندازه های مختلف تهیه کنند به دلیل اینکه کدنویس بدونه طرحی که قرار هست کدنویسی کنه در حالت های مختلف به چه شکلی خواهد بود .

حالا اگر دارید طراحیتون رو به صورت عرض ثابت مثل طرح های عادی و عمومی کار میکنید ، باید دقت داشته باشید که مبنای عرضی شما باید مانیتور های CRT 17 اینج باشه که نهایت عرضی که پشتیبانی میکنند ۷۶۸×۱۰۲۴ پیکسل هست .
پس اگر عرض کلی مانیتور ما ۱۰۲۴ باشه ما عرض استانداردی که میتونیم برای عرض طرحمون استفاده کنیم باید ۹۸۰ یا ۹۶۰ پیکسل باشه ، چون باید عرض نوار اسکرول ویندوز رو هم در نظر گرفته باشیم . البته این بدین معنی نیست که اگر شما عرض کمتری انتخاب کنید کار اشتباهی کردید ولی خب استاندارد ها مفاهیمی هستند که باید از اونها پیروی کنیم .

 

رزولوشن فایل

رزولوشن فایلی که شما برای طراحی وب استفاده میکنین باید روی ۷۲ DPI باشه . این مقدار به این دلیل به عنوان استاندارد انتخاب شده که تعداد پیکسل های موجود به تعداد مناسب در صفحه نمایش تقسیم میشه و با خاموش و روشن شدن و تغییر رنگ هر کدام از پیکسل ها ، تصاویر رنگی رو به شما نمایش میده ، همچنین اگر رزولوشن های بالاتری رو انتخاب کنیم با اندازه های واقعی تفاوت پیدا میکنه و در حقیقت طرح شما بزرگتر از اندازه واقعی خودش که باید در مانیتور ها نمایش داده بشه بوجود میاد که این اصلا صحیح نیست .

 

واحد اندازه گیری

واحد اندازه گیری در کلیه بخش های نرم افزار فتوشاپ ما باید بر حسب پیکسل ( Pixel ) یا PX باشه . پس زمانی که دارید فایل خودتون رو در فتوشاپ ایجاد میکنید باید واحد اندازه گیری ابعاد طرح رو روی Pixels قرار بدید . همچنین برای سایر بخش ها مثل اندازه فونت ها و … هم از همین واحد اندازه گیری استفاده کنید .

 

کانال رنگی

در نوشته بعدی من به صورت کامل کانال های رنگی رو برای شما توضیح میدم ولی فعلا در همین حد اطلاع داشته باشید که در هنگام ایجاد فایل گرافیکی در فتوشاپ شما می بایست از کانال رنگی یا به عبارتی Color Mode ، RGB استفاده کنید . منظور از RGB به ترتیب : R رنگ قرمز ، G رنگ سبز و B رنگ آبی رو مشخص میکنه . ترکیب های رنگی موجود در وب طبق کانال رنگی RGB به وجود میارن ما هم باطبع از همین کانال رنگی استفاده میکنیم . در حقیقت کلیه رنگ های موجود در وب توسط این سه رنگ اصلی به وجود خواهند اومد ولی خب با ترکیب های مختلف !

خب ! میشه گفت به موارد اصلی و مهمی که باید رعایت کنین اشاره کردیم . اگر سوالی یا مشکلی داشتید میتونید در کامنت های همین نوشته مطرح کنید و یا از بخش پرسش و پاسخ استفاده کنین . درضمن ، اگر این نوشته رو مفید دیدی ، با دیگر دوستاتون به اشتراک بگذارید 😉

 

تهیه شده در مدرسه مجازی ایرانیان

<<

>>

اگر این آموزش برای شما مفید بود با دوستان خود به اشتراک بگذارید



سفارش تبلیغات

گردآوری و تالیف : حسین همت یار

بنیانگذار و نوسنده در مدرسه مجازی ایرانیان و سردبیر ماهنامه طراحی وب همچنین مشاور گرافیک وب ، طراح UI و تحلیلگر UX، مسلط به نرم افزارهای گرافیکی پیکسلی و برداری و کدنویس HTML , CSS

خوراک خوشمزه و علمی روزانه
با وارد کردن ایمیلتون در فیلد روبرو آموزش های جذاب و vip دریافت نمایید

آموزش های مرتبط با این مطلب

دیدگاه های مخاطبین

لطفا تنها دیدگاه خود را در رابطه با این مطلب ارسال نمایید، سوالات را از طریق سامانه پرسش و پاسخ مطرح نمایید. سوالات در دیدگاه ها تایید نخواهد شد.

  • یونس علامند

    سلام و عرض ادب و خسته نباشید خدمت شما و همه همکاران زحمت کش…
    تشکر می کنم که این مطالب پر محتوا را در اختیار ما قرار می دهید، امیدوارم که در همه کارها موفق و پیروز باشید.
    سپاس بنده و چند دوست و همکارم را پذیرا باشید، متشکرم.

  • محمد

    سلام و تشکر از زحماتتون
    در مورد طراحی ریسپانسیو صحبت نمیکنین؟؟؟

    • میترا رحیمی

      سلام دوست عزیز
      به زودی انشالله…

وبلاگ مدرسه

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

مدرسین مدرسه

  • حسین همت یار

    حسین همت یار

    مدرس ، طراح رابط کاربری وب و موبایل با 8 سال سابقه ی فعالیت حرفه ای

سوابق کامل

آخرین پرسش و پاسخ ها

آخرین پرسش و پاسخ ها
شما هم سوالی دارید ؟