استفاده از ابزار گرافیکی

بهترین 10 ابزار طراحی صفحات وب سایت‎ بهترین 10 ابزار طراحی صفحات وب سایت‎

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

هر طراح وبی به ابزارهای خود جهت طراحی وب سایت نیازمند است. برای طراحی سایت ها از پایه شما به این ابزارها نیازمنددید. برنامه های بسیاری برای انجام این کار موجود است, اما برخی از آنها کاربردهای بیشتری دارند و توسط اکثر طراحان مورد استفاده قرار می گیرد. در اینجا 10 مورد از بهترین ابزارهای طراحی وب سایت را برای شما آورده ام:

1. Dreamweaver

Adobe Dreamweaver ابزار طراحی و برنامه نویسی وب سایت می باشد که توسط شرکت Adobe ارائه می شود و با سیستم عامل های Mac و Windows سازگاری کامل دارد. این نرم افزار دارای ابزارهای بسیاری جهت توسعه وب می باشد شامل: نمایش دهنده کد انتخاب شده در حالت نمایش کدی و نمایش عادی, ابزار مدیریت و کار با ftp, ابزار مدیریت پروژه و کار گروهی که انجام پروژه های بزرگ را توسط آن ساده می سازد, و نمایش به صورت زنده – که به صورت زنده قابلیت رویت نتیجه کد را به شما می دهد. Dreamweaver با ابزارهای دیگر Adobe نظیر Photoshop سازگاری کامل دارد, که به شما امکان ویرایش تصاویر و سایر المان ها را از طریق آن ابزار می دهد.

2. Firebug

Firebug ابزار رایگانی است که بر روی مرورگر firefox نصب می گردد و توسط آن می توانید خطاهای وب سایت را یافته و توسعه وب سایت را انجام دهید. توسط این ابزار می توانید به راحتی کد html و css را در صفحات وب سایت بررسی نموده و تغییر نمایید و همچنین صفحه وب سایت خود را عیب یابی نمایید, و همچنین بخشی برای عیب یابی JavaScript دارد که یکی از مهترین ابزارهای آن می باشد, برای عیب یابی صفحه وب سایت Firebug یکی از بهترین ابزارهایی می باشد که می توانید داشته باشید.

3. Adobe Photoshop

Adobe Photoshop نرم افزار بسیار قدرتمندی برای ساخت و ویرایش تصاویر می باشد که نرم افزار بسیار پر کاربردی می باشد و طراحان وب از طریق این نرم افزار می توانند گرافیک های و طرح های مورد نیاز خود را آماده سازی نمایند.

4. Adobe Fireworks

Adobe Fireworks نرم افزار ایجاد گرافیک به صورت وکتور می باشد. این نرم افزار به طراحان سایت قابلیت ایجاد گرافیک های بسیار سبک را می دهد. این ابزار در حقیقت نسخه بهینه سازی شده photoshop برای طراحان سایت می باشد که به طراح امکان ایجاد گرافیک های بسیار کم حجم را می دهد.

5. W3C Validator

این ابزار رایگان می باشد و به طراحان امکان تست صفحه را از نظر استانداردهای html و xhtml می دهد که توسط World Wide Web Consortium (W3C) پیاده سازی شده. این ابزار برای استاندارد سازی صفحه وب سایت می باشد. همچنین این اعتبار سنج صفحات را در سایر فرمت ها نظیر SGML یا XML استفاده از ابزار گرافیکی DTD بررسی می نماید, که همه این موارد را با نوع صفحه چک می نماید. همچنین این سایت ابزارهای دیگری برای بهینه سازی سایت نظیر HTML tidy دارد – که به صورت خودکار کد نویسی سایت را استاندارد سازی می نماید, Validome – به شما امکان اعتبار سنجی صفحه HTML, XHTML و WML را می دهد, WDG HTML – یک ابزار اعتبارسنجی دیگر است, Real Validator – shareware ابزار چک کننده کدهای html می باشد Valet – مجموعه ای از ابزارهای بررسی کیفیت سایت می باشد

6. Adobe Brackets

Adobe Brackets ویرایشگر رایگان طراحی صفحات وب سایت می باشد که برای مدیریت کدهای HTML, CSS, and JavaScript طراحی گردیده. Adobe Brackets به شما امکان کد زنی داخل کد را می دهد که به این ترتیب تمرکز شما را بر روی کد زنی قرار می دهد. این نرم افزار توسط Adobe پیاده سازی گردید و تحت مجوز MTI به اشتراک گذاشته شده.

7. Code Anywhere

CodeAnywhere به شما امکان کد زنی از هر جایی را ی دهد, بدون نیاز به آنکه مورد دیگری را آماده نمایید. کافی است وارد برنامه شوید تا بتوانید صفحات سایت خود را ویرایش نمایید. حتی زمانی که مجددا وارد برنامه می شوید فایل هایی که باز گذارده بودید مجددا باز می شوند. Codeanywhere از زیان های کد نویسی تحت وب نظیر HTML, PHP, JavaScript, CSS, و XML پشتیبانی کامل می نماید.

8. HTML5 boilerplate

HTML5 boilerplate به شما فریم ورک برای ایجاد صفحات html5 و همچنین المان های مختلف را می دهد. این سیستم با مرورگرهای مختلف سازگاری کامل دارد, به طور مثال با نسخه های قدیمی تر اینترنت اکسپلورر, که به شما امکان استفاده از تگ های html5 نظیر , and را می دهد. سیستم همچنین ابزاری برای بهینه سازی سایت برای موبایل دارد, که به شما امکان ایجاد صفحه سازگار با انواع مرورگرها و ابزارها را به گونه ای ساده می دهد. این ابزار همچنین ابزارهای بسیاری نظیر ابزار .htacess برای استفاده از gzip جهت بهینه سازی سایت و سرعت آن دارد.

9. Google Drawing

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

10. jQuery UI

jQuery یک کتابخانه بسیار قدرتمند و مفید جاوا اسکریپت می باشد که به شما امکان ایجاد آنچه که توسط html و css نمی توانید می دهد. این کتابخانه بسیار مفید بوده ولی کار با آن بسیار استفاده از ابزار گرافیکی سخت می باشد و نیاز به تجربه فراوانی دارد. jQuery UI به شما امکان ایجاد jQuery را توسط نرم فزار می دهد. بنابراین احتیاجی نیست کد نویسی jquery بدانید

15 مورد از اصطلاحات گرافیکی که هر گرافیست باید بداند !

اصطلاحات گرافیکی

مهم‌ترین شاخصه ارتباط با فرهنگ دیگر، آشنایی و شناخت آداب و رسوم مربوط به آن‌ها است. در پست مربوط به موکاپ گفتیم که گرافیست‌ها هم مثل تمام صنف‌های دیگر، اصطلاحات گرافیکی و فنی مختص به خود را دارند.

برای ورود به فرهنگ گرافیست‌ها و آشنایی با آداب و رسوم‌شان، باز هم ما اینجاییم که به شما کمک کنیم.

در ادامه 15 مورد از این اصطلاحات گرافیکی را به شما معرفی می‌کنیم.

سواد بصری

به توانایی درک پیام و مقصود یک تصویر سواد بصری می‌گویند.

شاخصه اصلی برای یک گرافیست در سواد بصری چشم‌هایش است.

گرافیستی که سواد بصری دارد همزمان با خواندن تصاویر، آن‌ها را می‌فهمد و تفسیر می‌کند.

اصطلاح گرافیکی سواد بصری

لوگو نشانی گرافیکی است که می‌تواند انواع مختلفی مثل نوشتار، سمبل، علامت و یا حتی ترکیبی از همه این‌ها باشد.

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

موکاپ

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

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

همانطور که از اسم این لایه پیداست، ماسک مثل یک پوشش روی قسمتی از عکس ظاهر می‌شود و اجازه تغییر روی آن را نمی‌دهد.

پالت رنگ

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

اصطلاح گرافیکی پالت

موشن گرافیک

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

موشن گرافیک (به انگلیسی Motion Graphic ) در واقع ترکیب حرکت و صدا در رسانه‌های امروزی است.

تکنیک طراحی موشن معمولا برای معرفی و تبلیغ استفاده می‌شود.

موشن گرافیک در واقع استفاده از ابزارهای گرافیکی برای توضیح و تفسیر هرچه بهتر یک هدف خاص است.

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

فایل لایه باز

فایل لایه باز، با آغوشی باز تغییرات شما را پذیراست.

معمولا فایل لایه باز با نرم افزار فتوشاپ شناخته می‌شود و فرمت ذخیره سازی‌شان PSD است.

بعد از ذخیره سازی فایل لایه باز، هر زمان که فایل را باز کنید امکان تغییرات دوباره برای شما فراهم خواهد بود.

برعکس این نوع فایل‌ها، عکس‌های عادی ذخیره شده با فرمت JPG است که روزانه با آنها سروکار دارید.

تصویر پیکسل

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

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

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

تصویر وکتور

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

برای مثال نرم‌افزار ایلستریتور

در وکتور دیگر خبری از پیکسل نیست و بافت تصاویر بُرداری می باشد.

تصویر رستر یا بیت مپ

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

این تصاویر همانند تصاویر وکتور با بزرگنمایی بیشتر، وضوح و کیفیت آن کم می‌شود.

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

در رستر پیکسل‌ها وجود دارند اما هوش گرافیکی، پیکسل‌های هم رنگ را کنار هم قرار می‌دهد.

وکتور و رستر

رزولیشون

رزولوشن یا وضوح تصویر، ارتباط مستقیمی با عداد پیکسل‌های موجود در یک تصویر دارد.

هر چه تعداد پیکسل‌های یک تصویر بیشتر باشد، رزولوشن و وضوح آن نیز بالاتر می‌رود.

یونیک

اصطلاح گرافیکی یونیک (Unique) به مواردی که کم نظیر و منحصر به فرد است اطلاق می‌شود.

مثل نمایش یک ایده یا خلق یک سوژه

تگ لاین

به عبارت ساده تگ لاین شعار یک برند است که با آن در مسیر تبلیغات جذاب خود گام بر می‌دارد.

این شعار معمولا همراه با لوگو نمایش داده شده و کمتر پیش می‌آید که دستخوش تغییر شود.

به نمونه‌های زیر توجه کنید :

سن ایچ و دیگر هیچ

هیچکس تنها نیست، همراه اول

Have a break، Have a Kit Kat

(All the News That’s Fit to Print (New York Times

اسلوگان

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

به نمونه‌های زیر توجه کنید :

پشتم گرمه (ایران رادیاتور)

یه گاز خوشمزه (چی توز موتوری)

(Think different (Apple

(Don’t be Evil (Google

حرف آخر

این بود 15 مورد از رایج‌ترین و کاربردی‌ترین اصطلاحات گرافیکی.

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

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

استفاده از ابزار گرافیکی

زیر نظر سازمان آموزش فنی و حرفه ای کشور

نمونه سوالات گرافیک رایانه ای – فتوشاپ

نمونه سوالات آزمونی گرافیک رایانه ای (فتوشاپ)

سوال – یک تصویر بازکرده، با استفاده از ابزار کمند مغناطیسی، که دقت انتخاب ابزار ۱۵۰ پیکسل، حساسیت آن ۶۰درصد و سرعت نقطه گذاری ۷۰ ، قسمتی از تصویر را انتخاب کنید، با دستور مناسب رنگ های قسمت انتخاب شده را با یک طیف جایگزین کرده و تصویر خود را معکوس کنید فایل خود را در پوشه ای با نام و فامیل خود روی میزکار به صورت عکس با نام Picture ذخیره نمایید.