محبوبترینها
نمایش جنگ دینامیت شو در تهران [از بیوگرافی میلاد صالح پور تا خرید بلیط]
9 روش جرم گیری ماشین لباسشویی سامسونگ برای از بین بردن بوی بد
ساندویچ پانل: بهترین گزینه برای ساخت و ساز سریع
خرید بیمه، استعلام و مقایسه انواع بیمه درمان ✅?
پروازهای مشهد به دبی چه زمانی ارزان می‌شوند؟
تجربه غذاهای فرانسوی در قلب پاریس بهترین رستوران‌ها و کافه‌ها
دلایل زنگ زدن فلزات و روش های جلوگیری از آن
خرید بلیط چارتر هواپیمایی ماهان _ ماهان گشت
سیگنال در ترید چیست؟ بررسی انواع سیگنال در ترید
بهترین هدیه تولد برای متولدین زمستان: هدیه‌های کاربردی برای روزهای سرد
در خرید پارچه برزنتی به چه نکاتی باید توجه کنیم؟
صفحه اول
آرشیو مطالب
ورود/عضویت
هواشناسی
قیمت طلا سکه و ارز
قیمت خودرو
مطالب در سایت شما
تبادل لینک
ارتباط با ما
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
مطالب سایت سرگرمی سبک زندگی سینما و تلویزیون فرهنگ و هنر پزشکی و سلامت اجتماع و خانواده تصویری دین و اندیشه ورزش اقتصادی سیاسی حوادث علم و فناوری سایتهای دانلود گوناگون
آمار وبسایت
تعداد کل بازدیدها :
1828770811
طراحي يك صفحه وب در photoshop -
واضح آرشیو وب فارسی:سایت ریسک: t=10837">طراحي يك صفحه وب در photoshop Hamed_jon 29 ارديبهشت 1383, 03:30روش هاي مختلفي براي ايجاد صفحات وب وجود دارد . در حاليكه برخي از طراحان مايل هستند ابتدا طرح اوليه خود را تكميل كرده و سپس اقدام به كد نويسي هاي پيچيده كنند ، برخي ديگر از طراحان نيز بيشتر مايل به استفاده اوليه از نمونه هاي گرافيكي در طرح بندي و محيط سايت وب خود هستند. در اين مقاله بيشتر به بررسي روش دوم و با استفاده از يك برنامه گرافيكي اقدام به طراحي يك صفحه وب مي كنيم . در وهله اول مراحلي كه در طراحي اوليه يك سايت بايد مد نظر قرار داد را بررسي مي كنيم . شروع كار طراحي سايت وب از طريق انجام كار اوليه بر روي يك تصوير در برخي موارد آسان تر از ساير روش هاست .بدين منظور : 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 الگوي جديدتان قرار داده تا تمام محيط را بپوشاند . براي مشاهده طرح نهايي در صفحه HTML اينجا را كليك كنيد. رنگ زمينه سلول هاي تصوير gray_bar بايد بصورت #CCCCCC انتخاب شوند. بطوريكه در هنگام بزرگ كردن صفحه به همان رنگ ديده شود منبع:تبيان SherlockHolmes 29 ارديبهشت 1383, 07:43ممنون خيلي عاليه وخيلي كمك ميكنه nik_sali 29 ارديبهشت 1383, 07:59ممنون دوست عزيز mahyar_nel 29 ارديبهشت 1383, 10:08چيز جلبي بود Rabianhood 29 ارديبهشت 1383, 11:54ممنون خيلي خوب بود ali_crown 29 ارديبهشت 1383, 12:05خيلي تيميس بود saeednajafi 29 ارديبهشت 1383, 13:26بابا ته مرام اين همه رو نشستي تايپ كردي؟ Masih 29 ارديبهشت 1383, 14:52بابا ته مرام اين همه رو نشستي تايپ كردي؟ و خداوند Ctrl+C را ِ آفريد و بعدش هم Ctrl+V را! :lol: aghahamidgol2 29 ارديبهشت 1383, 16:34بابا ته مرام اين همه رو نشستي تايپ كردي؟ و خداوند Ctrl+C را ِ آفريد و بعدش هم Ctrl+V را! :lol::) عجب اختراع خوبي هست اين دكمه ها NextWorld IT 29 ارديبهشت 1383, 16:42بابا ته مرام اين همه رو نشستي تايپ كردي؟ و خداوند Ctrl+C را ِ آفريد و بعدش هم Ctrl+V را! :lol: مسيح بابا این حرف تو از مقاله بيشتر چسبيد :arrow: از اون دوستمون هم تشکر ميکنم Mohi Design 29 ارديبهشت 1383, 17:44خيلي باحال بود !!!! اول حوصلم نشد بخونمش .... بعد نگاه كردم ديدم همه نوشتن خيلي خفنه منم گرفتم خوندم .... ولي خداييش خيلي باحال بييييد !!!! :دي Hamed_jon 30 ارديبهشت 1383, 03:12چاكريم بچه ها خوب يه جورايي آقا مسيح هم راست ميگه Black_scorpion 30 ارديبهشت 1383, 14:22خلي عالي بود مرسي Last Samurai 30 ارديبهشت 1383, 23:29دستت دردنكنه.مفيد بود. Hamed_jon 31 ارديبهشت 1383, 04:28آقا اگه مبهمه ويرايش بكنم با عكس بذارم؟؟ ironmaiden 31 ارديبهشت 1383, 17:14دستت درد نكنه OmidGraph 31 ارديبهشت 1383, 18:53چيز جلبي بود اندش بيد 8) Amir531 08 خرداد 1383, 04:43لطفا برا ما مبتدي‌هاي بدبخت بيچاره از همه جا رونده اجاره نشين 70 سر عايله ........ يه كم توضيح بدين ممنون بشيم. Hamed_jon 08 خرداد 1383, 05:40خواهش ميكنم دوستان چند روز ديگه ويرايش ميكنم با عكس ميذارم toranj_1455 08 خرداد 1383, 11:47سلام ممنون از مطالب خوبي كه گفتي اگر ويرايش كني و عكس هاي مربوطه را بزاري كه ديگه عالي ميشه! f_mostafa_f 09 خرداد 1383, 08:08good luck
این صفحه را در گوگل محبوب کنید
[ارسال شده از: سایت ریسک]
[مشاهده در: www.ri3k.eu]
[تعداد بازديد از اين مطلب: 507]
-
گوناگون
پربازدیدترینها