طراحی يك صفحه وب در فتوشاپ

[Bear_MV]

روشهای مختلفی برای ايجاد صفحات وب وجود دارد. در حاليكه برخی از طراحان مايل هستند ابتدا طرح اوليه خود را تكميل كرده و سپس اقدام به كدنويسی‌های پيچيده كنند ، برخی ديگر از طراحان نيز بيشتر مايل به استفاده اول از نمونه‌های گرافيكی در طرح بندی و محيط سايت وب خود هستند. در اين مقاله بيشتر به بررسی روش دوم و با استفاده از يك برنامه گرافيگی اقدام به طراحی يك صفحه وب می‌كنيم.
دوستان به دلیل اینکه من آموزش ها رو از وبلاگ خودم (تازه های رایانه و دانلود ) براتون گذاشتم به خاطر همین دیگه نتونستم اونا رو آپلود کنم و چون با درگ ان دراپ این کار عملی نیست خواهشمندم برای دیدن آموزش ها با کلیه تصاویر به وبلاگ بنده سر بزنید >>>>>> (تازه های رایانه و دانلود )




در وهله اول مراحلی كه در طراحی اوليه يك سايت بايد مد نظر قرار داد را بررسی می‌كنيم. شروع كار طراحی سايت وب از طريق انجام كار اوليه بر روی يك تصوير در برخی موارد آسانتر از ساير روشهاست.



بدين منظور

1) ابتدا برنامه فتوشاپ را اجرا كرده و سپس فايلی را كه قصد استفاده از آن به عنوان صفحه اصلی سايتتان داريد را انتخاب كنيد.

2) پس از دست‌يابی به تصوير مورد نظر و جهت استفاده در سايت بايد آن را به تكه‌های مناسبی تقسيم كنيد. در اين مرحله با استفاده از اطلاعات كلی مربوط به كدنويسی HTML نحوه كار جداول را بررسی كرده و تصوير را به شيوه‌ای تقسيم بندی خواهيم كرد كه در جداول مورد استفاده قرار گيرند.

3) مرحله بعد ايجاد سندی است كه كدهای HTML مربوطه براساس تكه‌های موجود در آن ايجاد می‌شوند و در نتيجه در وب سايت قابل استفاده خواهند بود. برای آسانتر شدن كار می‌توانيد فايل مورد نياز كه در اين قسمت بر روی آن كار خواهيم كرد را با كليك در اينجا بر روی سيستم خود دريافت و ذخيره كنيد. [ادامه ...]



1- رابط ايجاد كننده تصوير

1-1 رابط طراحی

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

2-1 برنامه ريزی اوليه

برای هر طراحی جديد و پيش از شروع كار بايد از قبل برنامه ريزی متناسب با آن را انجام دهيد. برای مثال ، پيش‌بينی اينكه در آينده قصد افزودن چه بخشهایی را در سايت خود داريد. در صورت عدم توجه به اين موضوع يا برنامه‌ريزی نامناسب مجبور به انجام تمامی كارهای مربوط به طراحی از ابتدای كار خواهيد بود. و اگر برنامه‌ريزی دقيقی انجام داده باشيد امكانات و وقت شما به هدر نخواهد رفت و كارتان نيز به آسانی پيشرفت خواهد كرد. تصور اينكه در آينده به چه مرحله‌ای خواهيد رسيد و اهداف‌تان چيست از نكات بسيار مهم و حائز اهميت برنامه ريزی طراحی در يك سايت موفق است.

3-1 طرح بندی

شروع كار ما با صفحه‌اي در ابعاد 740*460 پيكسل می‌باشد. در اين فضا سرصفحه ، محيط‌های مرور و محيط‌های مفاهيم مورد نياز را قرار خواهيم داد. در صورتی كه به فايل دقت كنيد ، نوارهای آبی تيره موجود در بالا و پائين صفحه به محل قرار گيری نوار مرور اشاره دارند. در صورتی كه مفاهيم سايت شما زياد است و مايليد تا صفحات‌تان به سرعت بارگذاری شوند استفاده از اين شيوه بسيار موثر و مناسب است. بعد از ايحاد تصوير در فتوشاپ زمان آماده كردن هر بخش جهت استفاده در يك سند HTML است.



2- تكه كردن تصوير

هر چند برای ايجاد تصاوير گرافيكی می‌توانيد از نرم‌افزارهای مختلفی استفاده كنيد ، اما توصيه من به شما استفاده از نرم‌افزار فتوشاپ می‌باشد. در كنار فتوشاپ برنامه ديگری به نام ImageReady قرار دارد كه شما می‌توانيد برای ذخيره تصاوير مناسب در وب ، ايجاد تصاوير انيميشن Gif ، و برش تصاوير موجود در فتوشاپ از آن استفاده كنيد. تكه كردن در واقع به اين مفهوم اشاره دارد كه ما تصوير مربوط به محيط اصلی را گرفته و آن را به بخشهای كوچكتر تقسيم كنيم و پس از آن به راحتی هر بخش را در يك جدول HTML وارد می‌كنيم. با اين كار امكان استفاده از طرحی همانند تصوير بزرگ و اوليه در كد HTML وجود خواهد داشت بدون اينكه مجبور به استفاده از تصوير بزرگ باشيد. و می‌توانيد محيط تصوير را به بخشهایی تقسيم كنيد كه بتوانيد هر كدام از آنها را به يك بخش لينك كنيد. همانطور كه در اين مثال مشاهده می‌كنيد ، هنگام تقسيم و برش يك تصوير بزرگ امكان بهينه سازی جداگانه هر بخش برای كم كردن حجم نهایی فايل وجود دارد. همچنين برخی از تكه‌ها در بخشهای مختلف تكرار شده‌اند و به همين دليل می‌توانيد از يك تصوير به جای همه آنها استفاده كنيد. نمونه تصويری كه من با اين فايل ايجاد كرده‌ام تنها 26.1k حجم داشته است. در واقع كاربری كه از مودم 28.8k استفاده می‌كند تنها نياز به 9 ثانيه زمان برای بارگذاری صفحه دارد. تصويری كه آماده تقسيم شدن در فتوشاپ است را در طرح زير مشاهده می‌كنيد.





همانطور كه ملاحظه می‌كنيد خطوط آبی رنگ بصورت متقاطع در تصوير وجود دارند. اين خطوط در واقع همان خطوط راهنمای موجود در برنامه فتوشاپ هستند كه به سادگی و از طريق كشيدن محيط خط كش به روی صفحه قرار می‌گيرند. سپس می‌توانيد آنها را در محل‌هایی كه قصد برش تصوير را داريد قرار دهيد. در مرحله بعد تصويرتان را به داخل برنامه ImageReady منتقل كرده و در منوی Slices گزينه Create Slices from Guides را انتخاب كنيد. طرح شما بايد مطابق شكل زير باشد.





توجه داشته باشيد كه تمامی خطوط راهنمای ايجاد شده دارای شماره منحصری هستند. اين نام‌گذاری بر مبنای پيش فرضی است كه در برنامه ImageReady وجود دارد. حال كه تكه‌های تصوير خود را ايجاد كرديد در كادر محاوره‌ای گزينه Show Slices را انتخاب كنيد. من چيزی شبيه به طرح زير را مشاهده كردم





در اين مرحله سه تكه را با هم تركيب كرده و آنها را با يك عنوان نام‌گذاری می‌كنيم. بدين منظورگزينه Slice Selection Tool را انتخاب كنيد. دو خط راهنمای عمودی قسمت سر صفحه را به سه قسمت تقسيم می‌كنند. و ما قصد داريم تا سر صفحه را به يك تكه تصوير تبديل كنيم. پس از انتخاب گزينه Slice Selection Tool در بالای گوشه سمت چپ تكه شماره 01 كليك كنيد. سپس كليد Shift را پائين نگه داريد و در تكه‌های 02 و 03 نيز كليك كنيد. سپس در تكه وسطی راست كليك كرده و از كادر محاوره‌ای نمايان شده گزينه Combine Slices را انتخاب كنيد. اكنون طرح شما بايد به شكل زير تبديل شده باشد





سه تكه بالایی در اين مرحله به يك بخش تقسيم شده‌اند و با يك حاشيه زرد رنگ مشخص شده‌اند. برای نام‌گذاری تكه به كادر محاوره‌ای Show Slices برويد. در فيلد name كلمه header را وارد كنيد. و اين كار را برای محيط پاصفحه نيز تكرار كنيد و آن را footer نام‌گذاری كنيد. هنوز تكه‌هایی وجود دارند كه به نام‌گذاری نياز دارند. در پائين سر صفحه و در سمت چپ آن بايد تكه شماره 02 را مشاهده كنيد - يك مربع كوچك آبی رنگ. از آنجا كه ابعاد اين تكه با ابعاد بخشهای شماره 04، 08 و 10 مساوی هستند تنها يكی از آنها را ذخيره می‌كنيم. در حاليكه ابزار تصوير Slice Selection Tool فعال است در تكه شماره 02 كليك كرده و نام blue_square را به آن بدهيد. سپس در تكه شماره 05 كليك كرده و نام gray_bar را به آن بدهيد. اگر دقت كنيد متوجه متناسب بودن ابعاد اين قسمت با تكه شماره 07 خواهيد شد. از اين رو تنها نياز به ذخيره همين قسمت خواهيد داشت.



بهينه سازی و ايجاد فايل خروجی

در اين قسمت اقدام به بهينه‌سازی و سپس ايجاد فايل خروجی مناسب برای وب خواهيم كرد. برای انتخاب تكه gray_bar از ابزار Slice Selection Tool استفاده كنيد. كليد Shift را پائين نگه داشته و در تكه blue_square كليك كنيد. از آنجا كه از لحاظ رنگ‌بندی هر دو اين قسمت‌ها يكسان هستند می‌توان در يك مرحله هر دو قسمت را بهينه‌سازی كرد. از تنظيمات برای بهينه‌سازی هر دو تكه بصورت يك فايل Gif استفاده كنيد





سپس از ابزار Slice Selection Tool برای انتخاب سرصفحه استفاده كنيد و در حاليكه كليد Shift را پائين نگه داشته‌ايد قسمت پاصفحه را نيز انتخاب كنيد. از آنجا كه رنگ‌بندی اين قسمت‌ها دارای ويژگی پيچيده‌تری است بهتر است اين قسمت‌ها را در حالت jpeg ذخيره كنيد.





برای ايجاد فايل خروجی ابزار Slice Selection Tool را انتخاب كرده و سپس تكه‌های header, footer, blue_square و gray_bar را انتخاب كنيد





در منوی فايل گزينه Save Optimized As را انتخاب نمائيد.





گزينه‌هایی كه در اين قسمت وجود دارند عبارتند از :

1- انتخاب مقصد و محل ذخيره فايلها و پوشه‌ها

2- در قسمت‌های مربوطه می‌توانيد تعيين كنيد كه فايل تنها بصورت HTML ذخيره شود و صفحه html ای ايجاد كند كه كاملاً با طرح‌بندی شما متناسب باشد.

3- گزينه سوم – ذخيره تصاير انتخاب شده - را نيز انتخاب كنيد. در كادر محاوره‌ای Save as type گزينه Images Only را انتخاب كرده و سپس در زير آن گزينه Selected Slices را انتخاب كنيد. بصورت پيش فرض برنامه ImageReady تمامی تصاوير انتخاب شده را در يك پوشه ذخيره می‌كند. در صورتی كه قصد چنين كاری را نداريد می‌توانيد در كادر Output Settings كليك كرده و در بخش پائينی كادر محاوره‌ای گزينه Put images in folder را غير انتخاب كنيد. البته بهتر است قبل از ايجاد تكه‌های مربوطه پوشه‌ای برای فايلهای اصلی و در آن پوشه نيز زير پوشه‌های مورد نيازتان را ايجاد كنيد. در اين حالت به راحتی می‌توانيد هر تصوير را در پوشه مورد نظرتان ذخيره كنيد. پس از انتخاب موقعيت ذخيره فايلها گزينه Save را كليك كنيد.





مرحله بعد ايجاد صفحه HTML ای است كه از آن به عنوان الگویی در وب سايت خود استفاده می‌كنيم. نگران بخشهای ذخيره نشده در فايل نباشيد و بخش مركزی تصوير دربردارنده مفاهيم و محتوای سايت است.



3-قرار دادن تصاوير تكه شده در فايل HTML

برای ايجاد الگوی مورد نظر در اين مرحله تصاويرمان را در داخل سند HTML قرار می‌دهيم :

1- جدولی با پنج رديف و 3 ستون ايجاد كنيد. دقت كنيد تا كد <center> قبل از جدول و كد <center/> نيز بعد از آن قرار گيرد. اين امر سبب قرار گرفتن جدول شما در مركز صفحه می‌شود.

2- در رديف بالا ، مقدار col span مربوط به سلول چپ اول را 3 قرار دهيد. در اين قسمت بايد تصوير header.jpg را وارد كنيد.

3- در رديف زير سر صفحه ، مقدار ارتفاع هر سلول را 18 پيكسل قرار دهيد. تا متناظر با تصوير blue_square.gif شود. و عرض سلول را 16 پيكسل در نظر بگيريد.

4- برای رديف چهارم نيز همين كار را تكرار كنيد.

5- در اين مرحله تصوير blue_square.gif را در سلولهای بيرونی رديف‌های دوم و چهارم وارد كنيد. تصوير gray_bar.gif را در داخل سلول اول رديف سوم قرار دهيد (سمت چپ) و اين مراحل را برای ستون سوم تكرار كنيد.

6- رنگ‌های زمينه هر دو سلول را CCCCCC# قرار دهيد. رنگ‌های زمينه ستون دوم رديف دوم و چهارم را برابر 374256# قرار دهيد. در ستون مركزی رديف سوم (جائيكه مفاهيم قرار می‌گيرند) رنگ زمينه CCCCCC# را انتخاب كنيد.

7- در رديف پنجم ، اولين سلول را انتخاب كرده و مقدار col span آن را برابر 3 قرار دهيد. سپس می‌توانيد فايل footer.jpg را در آن قرار دهيد.

8- سرانجام ارتفاع رديف اول، دوم ، چهارم و پنجم را تعيين كنيد و رديف سوم را تعيين نشده رها كنيد تا بر مبنای مفاهيم وارد شده اندازه آن تغيير كند. در اين مرحله صفحه شما بايد شبيه طرح زير باشد





از آنجا كه رنگ زمينه سفيد به خوبی با طرح كار نمی‌كند ، من يك تصوير كاشی برای پشت سر رابط ايجاد كرده‌ام.

بدين منظور می‌توانيد يك تصوير در فتوشاپ ايجاد به عرض1 پيكسل و ارتفاع2 پيكسل ايجاد كنيد. مربعی با عرض و ارتفاع 1 پيكسل انتخاب كنيد و رنگ آن را متناسب با رنگ طرحتان انتخاب كنيد. سپس آن قسمت را به پائين جابجا كنيد. تصوير را با استاندارد gif و تعداد رنگ 2-color ذخيره كنيد .

به سادگي تصوير را در كد background مربوط به tag الگوی جديدتان قرار داده تا تمام محيط را بپوشاند.

رنگ زمينه سلولهای تصوير gray_bar بايد بصورت #CCCCCC انتخاب شوند. بطوريكه در هنگام بزرگ كردن صفحه به همان رنگ ديده شود.

از آنجا كه رنگ زمينه سفيد به خوبی با طرح كار نمی‌كند ، من يك تصوير كاشی برای پشت سر رابط ايجاد كرده‌ام.

[Bear_MV]

با انجام مراحل زیر شما می توانید با فتوشاپ امواج آب را بوجود آورید.

1) در ابتدا برای ایجاد یک سند جدید، از منوی File گزینه New را انتخاب کنید اندازه دلخواه را وارد کرده سپس Ok کنید.

2) با اعمال چند فیلتر موج آب ساخته می شود از منوی Filter گزینه Render و بعد گزینه Clouds را انتخاب کنید.

3) از منوی Filter گزینه Blur و بعد گزینه Radial blur را انتخاب کنید.

4) از منوی Filter گزینه Blur و بعد گزینه Gaussian blur را انتخاب کنید.

5) از منوی Filter گزینه Sketch و بعد گزینه Bas relief را انتخاب کنید.

6) از منوی Filter گزینه Sketch و بعد گزینه Chrome را انتخاب کنید.

7) حالا با فشردن کلیدهای CTRL+U وارد قسمت HUE/SATURATION شوید و تنظیمات زیر را انجام دهید

Hue:212 , Saturation:34 , Lightness:0

حال تصویر آماده است.

[Arshia]

ممنون از آمورش های زیباست...

[parsgozar]

آموزش خيلي خوبي بود
من كه استفاده كردم

[honarmand]

ممنون
مطلب کاربردی خوبیه

[Mehryar]

مطلبت خوب بازم بزار