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

۱ – طراحان گرافيست

۲ – عكاسان

۳ –  طراحان وب و چندرسانه‌اي

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

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

اولين كار براي ايجاد قالب سايت، تعريف يك پروژه جديد با اندازه مورد نظر سايت است. براي اين كار ابتدا از قسمت File گزينه New را انتخاب و پروژه جديد را تعريف مي‌كنيم. فقط بايد دقت كرد كه در محيط وب واحد اندازه‌گيري بر مبناي پيكسل بوده و از استاندارد معيني تبعيت مي‌كند. براي سهولت كار مي‌توانيم در پنجره New با كليك در قسمت Preset و انتخاب گزينهWeb از اندازه‌هاي استانداردي كه در قسمت Size ظاهر مي‌شود استفاده كنيم. رزولوشن محيط وب نيز برخلاف چاپ كه تاكيد كرديم ‌۳۰۰ انتخاب شود، بايد ۷۲ يا حداكثر ۹۶ باشد، زيرا بيشتر از اين مقدار تغيير چنداني در كيفيت تصوير ايجاد نمي‌شود، فقط حجم فايل خروجي را بيهوده افزايش داده‌ايم.

در نهايت با تاييد ابعاد پروژه وارد محيط كاري فتوشاپ مي‌شويم. استفاده از خطوط راهنمايي كه در شماره گذشته درباره آن صحبت كرديم در طراحي قالب، وب يكي از كاربردي‌ترين بخش‌هاست و به كمك آن مي‌توانيم نسبت به مشخص كردن موقعيت و محل قسمت‌هاي مختلف سايت خود اقدام كنيم. پس در ابتداي كار با مشخص كردن Header و Footer و محل چيدمان ستون‌هاي سايت خود، خطوط راهنمايي را در موقعيت مناسب آنها قرار مي‌دهيم.

در ادامه به كمك ابزارهاي موجود مثل ابزارهاي برداري، شيب رنگ، Layer Style و… به طراحي قالب مورد نظرمان اقدام مي‌كنيم. يكي از مهم‌ترين نكاتي كه يك طراح سايت بايد در نظر داشته باشد، كم حجم كردن سايت براي سهولت بارگذاري آن در اينترنت‌هاي كم‌سرعت است و با توجه به اين كه بيشتر حجم يك سايت نيز مربوط به تصاوير استفاده شده در آن است، بنابراين به كمك فتوشاپ و ترفندهاي طراحي سايت مي‌توانيم سايتي با كمترين حجم ممكن بدون صرف‌نظر كردن از جلوه‌هاي گرافيك توليد كنيم.

يكي از ترفندهاي طراحي سايت استفاده از دستور تكرار ( Repeat ) در كدنويسي سايت است كه در آن با تكرار يك تصوير به صورت پشت سر هم، اندازه وسيعي از فضاي مورد نظر بدون افزايش حجم پوشانده مي‌شود. مثلا براي پوشش پس‌زمينه سايت يا قسمت سرصفحه يا پاصفحه سايت مي‌توانيم از اين ترفند استفاده كنيم و حجم سايت خود را تا حد بسيار زيادي كاهش دهيم.

براي توليد تصويري كه با تكرار آن، شكل مورد نظر ايجاد مي‌شود مي‌توانيم از قسمت جعبه ابزار فتوشاپ و مجموعه ماركي ابزار Single Row يا Single Column را براي انتخاب يك پيكسل از تصوير به صورت افقي يا عمودي از محيط كاري استفاده كنيم. درمرحله بعد با قرار دادن خطوط راهنما در ابتدا و انتهاي قسمت انتخاب‌شده، به كمك ابزار Crop آن بخش را برش داده و از آن براي تكرار و ايجاد حالت مورد نظر استفاده كنيم.

يكي ديگر از قسمت‌هاي كاربردي فتوشاپ براي طراحان وب، ابزار Slice در زير مجموعه ابزار Crop است كه به كمك آن طراح مي‌تواند تصوير خود را به قسمت‌هاي كوچك‌تري تقسيم كرده و باعث افزايش سرعت بارگذاري سايت شود. حتي مي‌تواند براي هر بخش انتخاب شده آدرس URL دلخواهي را تعريف كند تا كاربر با كليك روي آن بخش، به صفحه مورد نظر طراح هدايت شود. براي اين كار كافي است پس از تعريف Slice در گوشه سمت چپ و بالاي آن دوبار كليك كنيد و در پنجره باز شده آدرس مورد نظر و ساير مشخصات دلخواه را بنويسيد. يكي ديگر از قابليت‌هاي مهم فتوشاپ براي طراحان وب توليد خروجي مناسب وب از صفحه طراحي شده بدون استفاده از برنامه‌هاي طراحي وب است. براي اين كار پس از اتمام طراحي، از قسمت File گزينه save for web را انتخاب كرده و با تعريف فرمت دلخواه از قسمت Preset گزينه save را انتخاب مي‌كنيم.

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

از فرمت‌هاي كم حجم رايج عكس براي استفاده در صفحات وب مي‌توان به JPEG، Gif و PNG اشاره كرد كه از بين آنها فرمت Gif و PNG جهت ذخيره‌سازي لايه‌هاي شفاف نيز كاربرد دارد كه البته حجم بيشتري نيز نسبت به فرمت JPEG دارد. در صورت استفاده از تصاوير شفاف روي ديگر تصاوير در وب، كادري اطراف تصوير مورد نظر ظاهر نمي‌شود و از اين بابت حرفه‌اي‌تر خواهد بود.

با انتخاب گزينه Save for Web‌ از قسمت File‌ پنجره‌اي مطابق شكل ظاهر مي‌شود كه از آن مي‌توانيم براي ايجاد تناسب دلخواه بين كيفيت و حجم تصوير از بين حالت‌هاي فراواني كه وجود دارد، استفاده كنيم.

۱ –  فعال‌كردن حالت مقايسه‌اي تصوير بين حالت اصلي و حالت انتخاب شده براي ايجاد خروجي كم حجم.

۲ –  پيش‌نمايش تصوير قبل و بعد از اعمال تغييرات.

۳ –  توضيحات مربوط به اندازه تصوير نهايي و سرعت بارگذاري آن در اينترنت.

۴ – گزينه‌هاي قابل انتخاب براي تنظيم حالت دلخواه تصوير نهايي از بين ۳ فرمت JPEG، Gif و PNG ( از حالت‌هاي پيشفرض موجود در قسمت Preset نيز مي‌توان استفاده كرد ).

۵ –  نمايش يا عدم نمايش متا ديتا مخفي شده در عكس.

۶ –  جدول رنگ‌هاي استفاده شده در صورتي كه حالت Gif انتخاب شده باشد.

۷ –  تنظيم سايز تصوير نهايي.

۸ – تنظيم انيميشن موجود در تصوير در صورت تعريف انيميشن و ايجاد خروجيGif.

در نهايت با كليك روي دكمه save و انتخاب حالت دلخواه Image Only يا html Only يا هر دو، فايل خود را با كمترين حجم ممكن ذخيره مي‌كنيم.

تهيه و تنظيم: هيئت تحريريه آرياسان

منبع:

www.beytoote.com


براي خريد اينترنتي و آنلاين محصولات آریاسان اینجا کلیک کنید.

https://t.me/ariasuntour عکس-تلگرام

https://www.instagram.com/ariasuntour/ Insta-iCon-450x450

وب سایت آریاسانیوب نت آریاسانیپورتال آریاسانیمجله سلامتپزشک خانواده پزشكی بهداشت دارو آریاسان الکامپ نمایشگاه الکامپ الکامپ آنلاین درمان سلامت الکترونیکگردشگری آریاسان سیتی نت پاك سمن سوكام آریاسان سوپاك آریاسان مدی فارما تبلیغات پیشخوان نیازمندی ها کاریابیصرافیارزسکهطلاماشینملکزمینساختمانبورسبانکدولتملترهبرمجلسقرآنکتابکنکوردانشجودانشگاهدانش بنیانورزشصدا سیمادینزندگیمردمامیدکاربیمهبیکاریجوانورزشاطلاعات فناوری کامپیوترسخت افزارنرم افزاررایانهسرورمجازیتبلتموبایلزنجانتهرانایرانآلمانیونانگرجستانگرجستاندبیجهانهوافضاکشور كالا یابفروشگاه اینترنتی گروه بین المللی آریاسان WikiPharmaAriaSunساختتولیدعملیاتی صنعتیتاسیس تجهیز نصب و راه اندازی و سرمایه گذاری هوا فضا بازرگانی بین المللی پژوهشی صنعتیبازرگانی پزشكی دامپزشكی بهداشت دارو درمانسلامت فناوری اطلاعات و رایانه هواپیماییگردشگری طراحی لوگو طراحی استیکر کمپین تبلیغاتی اخبار علمی و پژوهشی اخبار سیاسی اقتصادی تجارت بین المللی بورس و بازار سرمایه اخبار پزشکیگردشگری و میراث فرهنگی هوانوردی و گردشگری ورزشی و المپیک حوزه و دانشگاه قرآنی فرهنگ و هنر صنعت و تکنولوژی حوادث بانوان نرخ ارز و طلا و سکه صرافی ها وب سایت آرپی وب سایت کاراندیشه اهواز وب سایت پانا بیوتی پاک سمنسینره طبیعت زنده کیابهداشت پانابیوتی کلینیک صدف رادآریاسان مان آریاسان پادآریاسانسوکام آریاسان رزرواسیون توریستی بیکاریجوانورزشCityNetPakSaman SooComAriaSun SooPakAriaSun MediPharma آریاسان AriaSunكالایاب KalayabآریاسانبازارAriaSunBazarمدیكالاMediKalaگروه_آریاسانAriaSunGroup طراحی وب سایت تورهای تفریحی RP وب سایت تورهای زیارتی وب سایت تورهای تاریخی وب سایت تورهای اقامتی وب سایت تورهای فرهنگی پانا وب سایت تورهای طبیعی کاراندیشه اهواز وب سایت تورهای علمی نفت و پالایشگاه وب سایت تورهای ورزشی گاز وب سایت تورهای متبركه آب وب سایت تورهای نمایشگاهی سایت تورهای نمایشگاهی وب سایت تورهای سیاحتی سایت تورهای سیاحتی وب سایت تورهای لحظه آخر سایت تورهای لحظه آخر وب_سایت تورهای داخلی سایت تورهای تفریحی سایت تورهای داخلی سایت تورهای زیارتی اماكن تفریحی طراحی طراحی وب سایت سیتی نت طراحی سایت اماكن تفریحی زیارتی اماكن زیارتی طراحی وب سایت اماكن زیارتی سیتی نت طراحی سایت اماكن زیارتی اماكن سیاحتیسوپاك آریاسان طراحی وب سایت اماكن سیاحتی طراحی سایت اماكن سیاحتی اماكن تاریخی طراحی وب سایت اماكن تاریخی طراحی سایت اماكن تاریخی اماكن اقامتی طراحی وب سایت اماكن اقامتی طراحی سایت اماكن اقامتی اماكن فرهنگی طراحی وب سایت اماكن فرهنگی طراحی سایت اماكن فرهنگی اماكن طبیعی طبیعی اماكن طراحی سایت اماكن طبیعی طراحی وب سایت اماكن طبیعی علمی طراحی سایت اماكن علمی طراحی وب سایت اماكن علمی ورزشی اماكن ورزشی طراحی وب سایت اماكن ورزشی طراحی سایت اماكن ورزشی اماكن ورزشی ورزشیورزش طراحی سایت اماكن ورزشی سیما طراحی وب سایت اماكن ورزشیمتبركه اماكن متبركه طراحی سایت اماكن متبركه نمایشگاهی اماكن نمایشگاهی طراحی سایت اماكن نمایشگاهی طراحی وب سایت اماكن نمایشگاهی تفریحی تورهای تفریحی طراحی وب سایت تورهای تفریحی طراحی سایت تورهای تفریحی زیارتی سایت تورهای زیارتی طراحی سایت تورهای زیارتی طراحی وب سایت تورهای زیارتی تاریخی تورهای تور طراحی سایت تورهای تاریخی طراحی وب سایت تورهای تاریخی تورهای اقامتی طراحی سایت تورهای اقامتی طراحی وب سایت تورهای اقامتی فرهنگی طراحی سایت تورهای فرهنگی طراحی وب سایت تورهای فرهنگی طبیعی طراحی سایت تورهای طبیعی طراحی وب سایت تورهای طبیعی علمی طراحی سایت تورهای علمی طراحی وب سایت تورهای علمی طراحی سایت تورهای ورزشی طراحی وب سایت تورهای ورزشی طراحی سایت تورهای متبركه طراحی وب سایت تورهای متبركه نمایشگاهی تورهای نمایشگاهی سیاحتی طراحی سایت تورهای سیاحتی لحظه آخر تورهای لحظه آخر طراحی سایت تورهای لحظه آخر تورهای داخلی طراحی سایت تورهای داخلی طراحی وب سایت تورهای داخلی تورهای خارجی طراحی سایت تورهای خارجی طراحی وب سایت تورهای خارجی ساحلی کار طراحی سایت تورهای ساحلی شهری طراحی سایت تورهای شهری طراحی وب سایت تورهای شهری صحرانوردی طراحی سایت تورهای صحرانوردی طراحی وب سایت تورهای صحرانوردی كوهنوردی دریانوری طراحی سایت تورهای دریانوردی طراحی وب سایت تورهای دریانوردی هوانوردی طراحی سایت تورهای هوانوردی كروز كشتیهای كروز طراحی سایت تورهای كشتیهای كروز طراحی وب سایت تورهای كشتیهای كروز پروازهای داخلی طراحی سایت پروازهای داخلی پروازهای خارجی طراحی وب سایت پروازهای خارجی پروازهای لحظه آخر طراحی وب سایت پروازهای لحظه آخر ارزان طراحی وب سایت پروازهای ارزان خرید آنلاین طراحی وب سایت خرید آنلاین فروش آنلاین طراحی وب سایت فروش آنلاین خرید و فروش آنلاین فروشگاهی آنلاین طراحی سایت فروشگاهی آنلاین بلیط آنلاین طراحی سایت بلیط آنلاین اینترنتی طراحی سایت فروشگاه اینترنتی بلیط اینترنتی طراحی سایت بلیط اینترنتی parscoders پارس کودرز