تبیان، دستیار زندگی
ندوز XP (قسمت دوم) تکنیک های ویندوز XP 21/9/1382 موسسه فرهنگی اطلاع رسانی تبیان مرحله 2: طراحی برای طراحی آیکون هایی با سبک ویندوزXP به شما توصیه می کنیم تا از ابزار های برداری همانند فری هند یاIllustrator استفاده کن...
بازدید :
زمان تقریبی مطالعه :

عنوان : طراحی آیکون هایی با سبک ویندوز XP(قسمت دوم)
تکنیک های ویندوز XP
21/9/1382
موسسه فرهنگی اطلاع رسانی تبیان
مرحله 2:
طراحی
برای طراحی آیکون هایی با سبک ویندوزXP به شما توصیه می کنیم تا از ابزار های برداری همانند فری هند یاIllustrator استفاده کنید. در این برنامه ها می توانید از نکاتی  که در قسمت مروری بر طراحی آیکون ها ذکر شد همانند استفاده از پالت ها و سبک ها استفاده کنید.

1- طرح مورد نظر تان را در یکی از برنامه های فری هند یاIllustrator پیاده سازی کنید.

2- تصویر را در سه اندازه ایجاد کنید. با توجه به اینکه علاوه بر طرح مزبور سایه ای در پشت سر آیکون ها ایجاد می شود که 2 پیکسل از فضای ازراف آیکون را به خود اختصاص می دهد باسد ابعاد  46 × 46, 30 × 30,و 14 × 14پیکسل را در طراحی آیکون ها مورد استفاده قرار دهید .

3- تصویر برداری ایجاد شده را در حافظه موقت سیستم copy کرده و سپس در برنامه فتوشاپ از حافظه خارج کنید (Paste)

طرح14- نمایی از انجام عملPaste در برنامه فتوشاپ

مرحله 3: ایجاد تصاویر 24-Bit
بعد از انجام عملPaste فایل برداری در برنامه  فتوشاپ مرحله بعد ایجاد تصویر24 بیتی است :

1-    هر بار که تصویر را با اندازه های مختلف در فتوشاپ از حافظه خارج می کنید ، خوانایی و دقت تصویر را بررسی کنید. خصوصا در تصویر 16 × 16پیکسل. در صورتی که تصویر مزبور وضوح کافی ندارد به برنامه فری هند برگشته و تغییرات مورد نظرتان را در تصویر ایجاد کنید.

2-    سایه پشت نصویر را به شیوه توضیح داده شده در قسمت استفاده از سایه پشت سر آبجکت  ایجاد کنید .

طرح 15- نمایی از تنظیمات مربوطه به سایه پشت تصویر در برنامه فتوشاپ

3- برای یکی کردن سایه با تصاویر 24 بیتی یک لایه جدید ایجاد کنید. در منویLayers گزینه Merge Visible را انتخاب کرده و هر سه لایه را با یکدیگر یکی وmergeکنید.



طرح 16- نمایی از انجام عمل یکی کردن برای حفظ هر سه لایه

4- سه فایل جدید در برنامه فتوشاپ ایجاد کنید . یکی برای تصویر 48 × 48یکی برای 32 × 32ویک فایل نیز برای تصویر 16 × 16 پیکسلی .تصاویر مزبور را مجددا در حافظه موقت ویندوز  کپی کرده  و سپس از حافظه خارج کنید.

5- فایل را در قالب بندی psd. ذخیره  کنید. لایه پس زمینه را با تصویر یکی نکنید.

مرحله 4: ایجاد تصاویر 8-Bit و 4-Bit
  - ایجاد تصاویر 8 بیتی

پس از ایجاد تصاویر 24 بیتی می توانید در این مرحله آیکون های 32 بیتی را ایجاد کنیدو برای این کارنیاز به نسخه 8 بیتی از آیکون دارید.

نسخه های 8 بیتی فاقد کانال آلفا 8 بیتی هستند:

1-در فتوشاپ لایه تصویری 24 بیتی را انتخاب کرده و سپس کپی از آن ایجاد کنید(duplicate )و آن را تحت عنوان8-bit images  نام گذاری کنید.

2-یک لایه خالی ایجاد کرده و آن را با رنگی تیره همانند رنگ آبی پر رنگ رنگ آمیزی کنید.

3-لایه تصویر 8بیتی را با این لایه یکی کنید (merger).

4-لبه های آن را با رنگ هموار و نرم کنید. و هر پیکسل دندانه داری را حذف کنید.


طرح 17- نمایی از تغییرات لبه های تصویر با عمق رنگ 8 بیت

5-     سه فایل جدید با ابعاد 48 × 48, 32 × 32و 16 × 16پیکسل ایجاد کرده و آنها راcopy وpaste کنید.

6-     در این مرحله باید تصاویر را به حالت رنگ بندی 256 رنگ قرار دهید . آیکون های 8 بیتی می توانند پالت های سفارشی داشته باشند .
1-6- در تصویر48 × 48 ، زمینه را با یک رنگ منحصر به فرد رنگ آمیزی کنید ( رنگی در تصویر شما به کار نرفته باشد ) می توانید از رنگ ارغوانی(R255 G0 B255) برای این کار استفاده کنید.
2-6- گزینه Image->Mode->Indexed Color را انتخاب کرده و سپس گزینهFlatten Layers را انتخاب کنید.
3-6- در منوی پائین افتادنیPalette گزینهCustome را انتخاب کنید. در کادر محاوره ایCustomeگزینهOkرا انتخاب کرده و سپس در کادر محاوره ایIndexed Color نیز گزینهOk را انتخاب کنید.
4-6- فایل را در قالب.psd ذخیره کنید.
5-6- با استفاده از همان رنگ زمینه دو تصویر دیگر را نیز ذخیره کرده و پالت سفارشی را به آن اعمال کنید.

7-     هر فایل را در قالب.psd ذخیره کنید.

- ایجاد تصویر 4 بیتی

برای ایجاد نسخه های 16 رنگی از آیکون ها :

1-     تصویر 8 بیتی تان را با پالت رنگ 16 تایی ویندوز مشاهده کنید.

2-     تصویر را با استفاده از رنگ های 16 تایی پالت پاکسازی کنید.

3-     در گوشه سمت راست پائین تصویر از یک خط سیاه استفاده کنید.

4-     ازیک رنگ خاکستری تیره یا دیگر رنگ های تیره برای گوشه های چپ و لبه های بالای تصویر استفاده کنید.

5-     تصویر مربوطه را با سه اندازه و با همان رنگ زمینه ذخیره کنید. دقت کنید که رنگ زمینه انتخابی تان در خود تصویر استفاده نشده باشد .


طرح 18- نمایی از آیکون های 4 بیت

5- ایجاد فایلهای.ico
پس از ایجاد فایل ها زمان تهیه فایل های.icoاست . برای ایجاد آیکون های 32 بیتی ما از ابزار و برنامه ای به نامGif Movie Gear (GMG) استفاده می کنیم. برای تهیه این برنامه می توانید اینجا را کلیک کنید.

مراحل زیر شما را در ایجاد یک فایل.ico راهنمایی می کند :

1- شما باید مجموعا 9 فایل داشته باشید . 3 اندازه برای هر عمق رنگ :

48 × 48 at 24-bit

32 × 32 at 24-bit

16 × 16 at 24-bit


48 × 48 at 8-bit

32 × 32 at 8-bit

16 × 16 at 8-bit


48 × 48 at 4-bit

32 × 32 at 4-bit

16 × 16 at 4-bit

2- برنامهGif Movie Gear را باز کرده و به سادگی هر تصویر را به داخل پنجره بکشید و یا از گزینهFile->Insert Frames استفاده کنید. هر تصویر به عنوان یک فریم در نظر گرفته می شود .

3- هنگام کشیدن تصویر 24 بیتی به داخل برنامه ( یا هر فایل.psd با لایه هایش )کادر محاوره ای نمایان می شود :


طرح 19- نمایی از تنظیمات تصاویر 24 بیتی در برنامهGif Movie Gear

توجه داشته باشید تا تنظیمات به شکل زیر باشند :

Layers as multiple frames in animation

No blending: each Layer is a frame

Keep background transparency

4- لایه پس زمینه تصویر 24 بیتی به عنوان یک فریم نمایان می شود . این فریمهای خالی را با استفاده با انتخاب شان و فشار دادن کلید Delete حذف کنید.

5- در این حالت باید مجموعا 9 فریم داشته باشید . آیکون ها باید حالت بزرگ به کوچک قرار گرفته بگیرند . سه آیکون اول تصاویر 4 بیتی ( 16 رنگی) هستند . سه آیکون بعد تصاویر 8 بیتی (256 رنگ) هستند و3 تصویر آخر نیزآیکون های 24 بیتی با 8 بیت کانال آلفا(32 بیتی ) هستند.


طرح 20-ترتیب فریم ها در برنامهGif Movie Gear

برای بررسی ویژگی های تصاویر ماوس را بر روی تصاویر جابجا کنید . ابزار راهنمایی (tooltip) نمایان می شود که resolution   هر تصویر را به شما نشان می دهد . در حالت پیش فرض اطلاعاتی همچون ابعاد ، شفافیت و مقدار بیت موجود در تصاویر نشان داده می شود . این آیتمها را می توانید با انتخاب گزینه Edit->Preferences->Frame Tips حذف کرده یا اضافه کنید .

6-     برای تصاویر 4 و 8 بیتی نیاز به اعمال شفافیت در پس زمینه هستید . برنامهGMG از رنگ سبز برای ایجاد شفافیت استفاده می کند.شما می توانید در صورت تمایل با استفاده از منوی View->Transparency As رنگ مورد نظرتان را تعیین کرده یا رنگ پیش فرض را حفظ کنید. رنگ مزبور در تصویر نهایی موثر نیست و تنها برای تعیین محدوده شفافیت مورد استفاده قرار می گیرد .

7-     برای اعمال ضافیت در نسخه های 4 و 8 بیتی :
1-7 – یک فریم را انتخاب کرده و سپس آیکونTransparency Color را از نوار ابزار انتخاب کنید.


طرح 21- نمایی از ابزار مورد استفاده برای اعمال شفافیت درآیکون

2-7- کادر محاوره ای نمایان می شود که آیکون را به شما نشان می دهد . با قطره چکان در رنگ پس زمینه آیکون کلیک کنید . این رنگ به سبز روشن تغییر می یابد . ( یا هر رنگی که شما برای رنگ محدوده شفاف شونده در برنامهGMG انتخاب کرده اید )
3-7- این مراحل را برای تمامی فریم های 4 و 8 بیتی در اندازه های مختلف تکرار کنید.

8- برای ذخیره آیکون ها گزینهFile->Save Icon As…. را انتخاب کنید.

3- ایجاد نوار ابزار

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

نوار ابزار در ویندوز دو اندازه24 × 24و 16 × 16پیکسل را نشان می دهند . دو وضعیت برای آنها وجود دارد . حالت پیش فرض و حالت قرار گیری ماوس بر روی آیکون . برای وضعیتmouseover بهتر است تا وضعیت اشباع تصویر را افزایش دهید .

البته این آیکون ها در نواری با قالب.BMP قرار می گیرند:

1-    هر بار که شما آیکون ها را در برنامه فری هند و در هر اندازه ای ایجاد می کنید ، آنها را در برنامه فتوشاپcopy وpaste کنید . سپس24 × 24 ها را در یک لایه و16 × 16 ها را در لایه دیگری قرار دهید .

2-    یک ردیف کادر را برای هر اندازه در لایه دیگری ایجاد کنید. یک ردیف از کادر های16 × 16 و یک ردیف از کادر های 24 × 24.



طرح 22- نمایی از آیکون های کادر های هر ردیف

3- هر تصویر را در یک مربع و به ترتیبی که مایلید قرار دهید . دقت کنید تا هیچ تصویری  بر روی تصویردیگر قرار نگیرد.



طرح 23- نمایی از طرز قرار گیری آیون ها ی مختلف در یک نوار ابزار

4- فایل را در فتوشاپ ذخیره کنید.

5- سپس باید حالتmouseover را برای فایل ایجاد کنید.

1-5- کپی از لایه های24 × 24 و 16 × 16 را مجددا تکرار کنید(Duplicate)

2-5 – برای هر حالتmouseover لایه را انتخاب کنید و سپس گزینهImage->Adjust->Levels… را انتخاب کنید. و فلش میانی را تا مقدار0.75 جابجا کنید. سپس گزینه OK را انتخاب کنید .


طرح 24- نحوه تغییر تنظیمات مربوط به حالتmouseover

6- هر بار که نسخهmouseover را ایجاد می کنید ، باید یک لایه برای هر نوار داشته باشید : یک24 × 24 پیش فرض با یک نوار24 × 24mouseover و یک16 × 16 پیش فرض با یک نوار16 × 16mouseover

7- سپس باید برای هر نوار باریک فایل های جداگانه ای را ایجاد کنید:
1-7 – یکی از روش های انجام چنین کاری استفاده از بزارcrop و سپس جدا کردن آن بخش از فایل و ذخیره فایل در  ابعاد نوار است. هر نوار باید از ابتدای کادر اول تا انتهای کادر آخر را شامل شود .
2-7 – هر نوار را به عنوان یک فایل.psd و در حالت 24 بیتی ذخیره کنید.



طرح 25- نمایی از یک نوار ابزار باریک 24 بیتی در فتوشاپ

8- برای ذخیره یک نوار در حالت تصویر 32 بیت ، نوار را به داخل برنامهGMG بکشید . فریم های خالی را حذف کنید .سپس گزینهFile->Export as->Filmstrip را انتخاب کنید.  در کادر محاوره ایFilm Export توجه داشته باشید تا گزینه هایBMP/DIB و 24-bit with Alpha انتخاب شده باشند .


4- ایجادAVI
ها
 ویندوزXp از فایل هایAVI با حالت 8 بیت استفاده می کند .فرایند ایجاد این فایل ها نیز همانند ایجاد فایل های آیکون است. شما تکه ها ی فایلها را در برنامه فتوشاپ آماده کرده و سپس به داخل برنامهGMG می کشید. از مطالب عنوان شده در ایجاد فایل های 8 بیتی استفاده کنید.

برای ذخیره فایلهایAvi با استفاده از برنامه GMG گزینهFile->Export As->AVI file…. را انتخاب کنید.

هنگام ایجاد این فایل ها توجه داشته باشید تا :

از رنگ ارغوانی(R255 G0 B255) به عنوان رنگ شفاف پس زمینه استفاده کنید .

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

قسمت قبل ...