نظرسنجی: نظر شما در مورد این مطلب جیست؟!
عالی
خوب
متوسط
ضعیف
[نمایش نتایج]
 
ارسال پاسخ 
 
امتیاز موضوع:
  • 4 رأی - میانگین امیتازات: 4.5
  • 1
  • 2
  • 3
  • 4
  • 5
استخراج عناصر یک وب سایت از قالب فتوشاپ مثل حرفه ای ها! .: آموزش :.
04-01-2012, 05:16 PM (آخرین ویرایش در این ارسال: 04-04-2012 02:52 AM، توسط Cna FP.)
ارسال: #1
Lightbulb استخراج عناصر یک وب سایت از قالب فتوشاپ مثل حرفه ای ها! .: آموزش :.
3
0
استاد

با سلام
بعد از اتمام آموزش طراحی یک قالب ساده و کامل وب سایت در فتوشاپ, تصمیم دارم آموزش برش زنی و انتخاب موارد لازم از همین قالب برای ساخت یک صفحه وب واقعی رو آموزش بدم. یعنی آموزش فتوشاپ به HTML. در واقع این مسئله یکی از رایج ترین سوالاتی است که در ذهن استفاده کنندگان از قالب فتوشاپ بوجود میاد که اکنون بعد از ساخت این قالب چطوری میشه این قالب رو تبدیل به صفحه وب کرد.
این سوال کاملا بجا و طبیعیه. چون در فتوشاپ شما اشکال یا منوهایی رو میبینید که نحوه استفاده از آنها در کدنویسی کاملا محال به نظر میرسد. در حقیقت هم همینطور است. ممکن است قسمتی از قالب فتوشاپ کاملا پیچیده و سنگین باشد. اینها از جمله مواردی است که طراح قالب سایت شما باید به آن توجه داشته و در نظر بگیرد.
اما نکته ای که وجود دارد این است که شما با اندک دانشی از فتوشاپ میتوانید نیاز خود را براورده کنید. ضمن اینکه نیاز است که شما در زمینه Html و CSS یک سری از نکات ضروری را آموخته باشید تا اینجا بتوانیم از آنها استفاده کنیم. در این آموزش قصد دارم طراحی رو با استفاده از تگ های DIV و به صورت Tableless (بدون استفاده از تگ های جدول) انجام بدم. همچنین از یکسری دستورات CSS3 (نسخه جدید CSS) نیز استفاده میکنم.
این آموزش قصد دارد شما را با همین تکنیک ها و روش ها به صورت حرفه ای آشنا کرده تا در آینده بتوانید از مزایای آن بهره بگیرید...
منتظر پست های آموزشی این مطلب باشید...

یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط admin ، asieh ، تیم پشتیبانی ، Sara.A ، afshin ، kiantamar
04-02-2012, 07:19 PM (آخرین ویرایش در این ارسال: 04-02-2012 07:26 PM، توسط admin.)
ارسال: #2
RE: آموزش تبدیل قالب فتوشاپ به HTML مثل حرفه ای ها! (PSD to HTML)
1
0
(04-02-2012 01:59 PM)tayebehkh نوشته شده توسط:  ُسلام با تشکر از مطالب مفیدتون
لطفا در صورت امکان نرم افزار جوملا را هم اموزش بدین

در این قسمت نباید پست قرار دهید.
لطفا قوانین تالار را مطالعه نمایید.
جهت تشکر بر روی دکمه "سپاس" کلیک نمایید.
جهت تقاضای آموزش مطلب علمی به این تالار http://www.ecg-pnum.com/forum/forumdisplay.php?fid=106 مراجعه نمایید.
در این قسمت تنها توسط استارتر مطلب آموزشی قرار داده می شود.

با مطالعه قوانین و رعایت آن ها از این محیط علمی لذت ببریم.... «کلیک نمایید»...
مشاهده وب‌سایت کاربر یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط تیم پشتیبانی ، Cna FP ، asieh
04-03-2012, 03:43 AM (آخرین ویرایش در این ارسال: 11-09-2012 04:14 AM، توسط Cna FP.)
ارسال: #3
آموزش تبدیل قالب فتوشاپ به HTML مثل حرفه ای ها! (PSD to HTML) - جلسه اول
2
0
استاد جلسه اول: برش قطعات مورد نیاز (برداشتن لوگو)

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

در ابتدا قالب فتوشاپی که در "آموزش طراحی قالب یک سایت در فتوشاپ به زبان ساده" با یکدیگر درست کردیم باز کنید. در این آموزش نیازی نیست که حتما از یک ورژن مخصوص فتوشاپ استفاده کنید؛ بلکه صرفا باز کردن فایل PSD و استفاده از عناصر لایه های آن مدنظر است...

در کار ما, دو روش برای برداشتن عناصر داخل فتوشاپ وجود دارد: 1- استفاده از ابزار Crop tool و بریدن المان های داخل قالب 2- استفاده از روش انتخاب لایه با ابزار Move tool
عموم استفاده کنندگان, از روش اول استفاده میکنند که روش زمانبرتر و پردردسرتری است. اما من در این آموزش قصد دارم به شما روش ساده تر دوم رو آموزش بدم که با دقت و راحتی بیشتر, در نهایت کار تمیزتری تحویل میدهد.
خب! شروع میکنیم:
ابتدا ابزار Move tool رو انتخاب کنید و مطمئن بشید که در نوار بالا, گزینه Auto-select تیک خورده و در حالت Layer باشد.

[تصویر:  415t2.jpg]

اولین عنصری که قصد داریم از این قالب جدا کنیم, لوگوی سایت است. به این منظور, ایتدا بر روی این لوگو (در اینجا جعبه قهوه ای) به اندازه کافی که بتوانید شکل را با دقت انتخاب کنید زوم کرده و سپس با استفاده از ابزار ذکر شده با دقت بر روی این شکل که در واقع همان جعبه نورانی است کلیک میکنیم. خب! حتما متوجه شده اید که فتوشاپ به صورت Auto لایه ای که شکل مورد نظر در آن قرار دارد را انتخاب میکند. البته باید دقت داشته باشید حتما پنجره Layers در سمت راست فتوشاپ انتخاب شده باشد. در غیر این صورت از منوی Window->Layers را انتخاب کنید:

[تصویر:  416f5.jpg]

در این قسمت سادگی روش دوم معنا پیدا میکند:
بر روی لایه انتخاب شده توسط فتوشاپ, کلید ctrl را فشرده و همزمان بر روی آیکون کوچک لایه کلیک کنید. متوجه شده اید که قبل از انتخاب, با فشردن کلید ctrl شکل موس تغییر میکند و بعد از انجام کارهای بالا دقیقا پیکسل های اطراف شکل مورد نظر انتخاب میشود. به همین سادگی! به همین خوشمزگی!!
در حقیقت شما با استفاده از این روش میتوانید تمام المانهای صفحه که مورد نیازتان است را جدا کنید. البته نه هر چیزی! زیرا عناصری که شما انتخاب میکنید اهمیت دارد که بعدا مفصل در مورد آن صحبت میکنم.

اولین کاری که بعد از انجام موارد ذکر شده باید بکنید این است که محدوده انتخاب شده را در یک فایل جدید کپی کنید. به این منظور, همچنان که شکل لوگو(جعبه) در حالت انتخاب قرار دارد کلید های معروف کپی, Ctrl + C, را فشرده و سپس از منوی File->New را انتخاب و یا Ctrl + N را از صفحه کلید فشار دهید, ولی ok نکنید!

[تصویر:  4183r.jpg]

مخاطب تیزبین تا کنون متوجه شده است که طول و عرضی که به طور پیش فرض در پنجره New قرار دارد, دقیقا همان طول و عرضی است که خود شکل دارد! یعنی فتوشاپ به بهترین نحو ممکن با شما همکاری میکند! حالا میتوانید ok کنید و شکل را در فایل جدید باز شده با ctrl + V بچسبانید. اما اکنون مشکلی به نام رنگ پس زمینه وجود دارد که راه حل آن نیز ساده است:
برای برداشتن رنگ پس زمینه و داشتن یک شکل عاری از هرگونه رنگ اضافه ای, کافی است لایه زیر لایه این شکل, یعنی لایه Background را از حالت انتخاب خارج کنید(Deselect). این کار را میتوانید با برداشتن چشم لایه انجام دهید. اکنون شکل فایل شما تنها در بردارنده پیکسل های خود شکل است. فایده این نیز در این است که شما فقط به این پیکسل ها نیاز دارید و نه رنگ زمینه آن. در آینده در سایتتان میتوانید این لوگو را در هر کجای سایت قرا دهید بدون اینکه نگران رنگ پشت زمینه آن باشید.

[تصویر:  418lg.jpg]


اکنون نوبت به ذخیره کردن این شکل میرسد.
از منوی File->Save for Web & Devices را انتخاب یا کلیدهای ترکیبی Ctrl + Alt + Shift + S را فشار دهید. در پنجره باز شده از منوی کشویی سمت راست PNG-24 را انتخاب کنید. در واقع چون یک شکل با پس زمینه Transparent میخواهیم ذخیره کنیم به این فرمت نیاز داریم. البته شما میتوانید فرمت های دیگر را نیز انتخاب کنید؛ اما نکته ای که باید در نظر داشته باشید این است که شما سایتتان را باید طوری طراحی کنید که کاربران با سرعت اینترنت پایین نیازی به صبر کردن طولانی برای لود شدن عکس های سایت نداشته باشند. فرمت PNG-24 یکی از فرمت هایی است که حجم عکس ذخیر شده را تا حد ممکن بدون کاهش کیفیت چشمگیر پایین میاورد و این یک مزیت بزرگ نسبت به دیگر فرمت هاست. البته فرمت JPEG نیز از جمله فرمت های معروف و کاربردی است؛ ولی در اینجا همانطور که گفته شد به علت نیاز به ذخیره سازی با پس زمینه شفاف از این فرمت استفاده میکنیم.

[تصویر:  41970.jpg]

در پروژه ای که با هم انجام میدهیم بهتر است تمام فایل ها و عناصر به صورت دسته بندی شده و مرتب در یک جا قرار داشته باشد که دسترسی به آن و آدرس گیری از آن در آینده ساده تر باشد. برای همین پوشه ای با نام MyWebsite درست کرده و در آن دو پوشه به نام های PSD و img درست کنید. در پوشه PSD فایل فتوشاپ و در پوشه img عکس های استخراجی از قالب فتوشاپ را ذخیره کنید.
به همین ترتیب بعد از انجام موارد بالا, پنجره ...Save for web را Save کرده و شکل را در پوشه ذکر شده به نام Box ذخیره کنید.

خب! تبریک میگم! شما اولین المان سایتتان را استخراج کردید. برای خروج میتوانید این فایل را بسته و نیازی به ذخیره سازی نیز نمیباشد.
اکنون به قالب فتوشاپ برمیگردیم. چون شکل هنوز در حالت انتخاب قرار دارد با کلیدهای Ctrl + D آن را از حالت انتخاب خارج میکنیم.

اکنون به سراغ متنی که در جلوی لوگو(جعبه) نوشته شده که در حقیقت نام سایت است میرویم.
مجددا با استفاده از ابزار Move tool و همچنین بزرگنمایی به میزان مناسب, به دقت بر روی یکی از حروف نام سایت(در اینجا Light box) کلیک کنید. مشاهده میکنید که لایه عبارت متنی انتخاب میشود. البته در این قالب, چون من Light و Box را در دولایه متفاوت نوشته ام, شما نیاز است که این دولایه (Light و Box) را Merge کنید. برای اینکار ابتدا این دولایه را با فشردن Ctrl انتخاب, سپس بر روی لایه راست کلیک کرده و Rasterize Type را انتخاب کنید. بعد از این مجددا دولایه را انتخاب کرده و اینبار Merge Layer را انتخاب کنید. به این ترتیب شما دو لایه متنی را در یک لایه قرار داده و میتوانید با فشردن کلید Ctrl و انتخاب این لایه, متن لوگو را به حالت اتنخاب در آورید:

[تصویر:  41brz.jpg]

مراحل بعدی دقیقا مانند آنچه گفته شد است. البته دقت کنید که چون در این پروژه, متن لوگو به صورت خاص نوشته شده بود و امکان طراحی آن در آینده به بوسیله کدهای Html وجود ندارد از این ترفند استفاده کردیم. در صورتی که نام سایت به صورتی بود که شما میتوانستید با تگ های <h> (در آینده در مورد این موضوع صحبن میکنم) آن را پیاده سازی کنید, بهتر است برای پایین آمدن حجم از این روش صرف نظر کنید.

اکنون مجددا یک کپی از این لایه در حالت انتخاب شده تهیه کرده و در یک فایل جدید Paste کنید. لایه Background را از حالت انتخاب در آورده و مراحل ذخیره سازی را عینا همانند آنچه گفته شد انجام دهید. یعنی انتخاب Save for web & Devices از منوی File یا فشردن کلیدهای ترکیبی Ctrl + Alt + Shift + S و انتخاب فرمت PNG-24 برای شکل و ذخیره آن در پوشه img با نام logo:

[تصویر:  41cjq.jpg]

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

برنامه نویس آدرس ایمیل من...

برنامه نویس


فایل‌(های) پیوست شده
.rar  MyWebsite.rar (اندازه: 892.45 KB / تعداد دفعات دریافت: 60)

یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط admin ، تیم پشتیبانی ، Sara.A ، asieh ، nili ، afshin
04-06-2012, 06:01 AM (آخرین ویرایش در این ارسال: 04-10-2012 03:54 AM، توسط Cna FP.)
ارسال: #4
RE: استخراج عناصر یک وب سایت از قالب فتوشاپ مثل حرفه ای ها! .: آموزش :.
3
0
استاد جلسه دوم: برش قطعات مورد نیاز (برداشتن دیگر آیتم های ضروری)

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

خب! شروع میکنیم:
اول فایل فتوشاپ جلسه قبل رو باز کنید. در صورتی که این فایل رو ندارید میتونید از اینجا دریافت کنید. معمولا فتوشاپ مثل نرم افزارهای دیگه فایل هایی که اخیرا استفاده شد رو نگه میداره. پس راحت تره که از طریق منوی File-> Open Recent (در صورتی که فایل رو جابجا نکرده باشید) به فایلتون دسترسی پیدا کنید...

اینبار قصد داریم در ابتدا آیکونهای سایت رو برداریم. برای اینکار, ابزار Move tool رو از نوار ابزار انتخاب کرده و روی شکل اولین آیکون منو یعنی Home کلیک کنید. مشاهده میکنید که به طور خودکار لایه شکل انتخاب میشود. البته دقت داشته باشید که از نوار بالا حالت Auto-select چک شده و در حالت Layer باشد...:

[تصویر:  415t2.jpg]

بعد از انتخاب آیکون اول نوبت به select کردن پیکسل های شکل میرسد. بنابراین با نگه داشتن کلید Ctrl روی نمای کوچک لایه کلیک کنید تا شکل مورد نظر انتخاب شود. سپس کلیدهای Ctrl + C را بزنید تا از روی شکلی که در حالت انتخاب قرار دارد یک کپی ایجاد شود. بعد از آن کلیدهای Ctrl + N را بزنید و در فایل جدید باز شده شکل را با Ctrl + V بچسبانید:

[تصویر:  439jw.jpg]

در فایل جدید باز شده لایه Background را بوسیله برداشتن چشم لایه Deselect کنید تا از شکل, یک پس زمینه Transparent بدست آید. اکنون نوبت به ذخیره سازی آن میرسد. کلیدهای Ctrl + Alt + Shift +S را از صفحه کلید فشار دهید تا پنجره Save for Web & Devices باز شود. در اینجا شما باید فرمت PNG-24 را انتخاب کرده و سپس شکل را در پوشه ای که با هم درست کردیم (img) به نام Home ذخیره کنید...:

[تصویر:  439vz.jpg]

خب! هم اکنون شما یک مرحله دیگه توی کارتون جلو رفتین. میتونید به لایه اصلی که قالب در اون قرار داره برگردین و شکل رو با Ctrl + D از حالت انتخاب خارج کنید. بعد از این کافیه مراحلی که برای اولین شکل منو گفته شد رو برای 3 آیتم دیگه (About, Work, Contact) هم انجام بدین تا چهار آیکون با نام های گفته شده بدست بیاد. خیلی راحت و پاکیزه!!
از اشکال باقی مانده, آیکون های کنار باکس های مطلب (Web develpoment, Graphics, ...) است که آنها را نیز باید به ترتیبی که گفته شد برش بزنید. البته توجه کنید که من این آیکونها را به همراه عنوان جلوی آنها انتخاب کردم. در حقیقت لایه عنوان متن و لایه شکل رو با هم Merge کردم. علت اینکارو در آینده که قصد دارم با CSS کار طراحی رو براتون انجام بدم ذکر میکنم؛ اما فقط همینقدر بگم که شما باید برای انتخاب فونتهای وب سایتتون دقت کنید؛ چون فونتهایی که شما استفاده میکنید رو ممکنه تمام کاربران روی سیستم نصب نداشته باشند و به این ترتیب تمام زحمات طراحی سایت شما با به هم خوردن نوع فونت ها در کامپیوتر کاربر به باد میره! پس باید به نحوی فونت مورد علاقه تون رو در ساتتون استفاده کنید. نحوه ای هم که اینجا استفاده شده اینه که ما از این فونت ها یک عکس با حجم بسیار پایین تهیه میکنیم و در آینده از این عکس به عنوان متن مورد نظر استفاده میکنیم. ضمن اینکه من این 3 آیکون و 3 عنوان رو در یک عکس و زیر هم قرار دادم. در آینده با CSS میشه اونها رو تنظیم کرد که فقط یک شکل رو نشون بده (بوسیله خاصیت background-position) شما میتونید هر کدوم رو جداگانه ولی به همراه عنوان جلوی متن استخراج کنید:

[تصویر:  43crr.jpg]

بعد از ادغام دولایه و انتخاب عنوان و شکل:

[تصویر:  43cul.jpg]

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

آیتم دیگه ای که باقی میمونه لوگوی کوچک واقع در فوتر سایته که شما باید به نحو ذکر شده از قالب استخراجش کنید. در این شکل من بهتون توصیه میکنم که شکل لوگو و همچنین متن اون رو با هم و به صورت یکجا جدا کنید. اینطوری نه تنها عکس جدا شده حجم زیادی نمیگیره, بلکه در آینده نیازی به استفاده از کد Html اضافه برای افزودن این شکل هم نداریم و تمام شکل به صورت یکجا همراه با متنش وارد سایت میشه. پس کاری که شما باید انجام بدین اینه که ابتدا لایه مربوط به شکل رو پیدا کنید(بوسیله ابزار Move tool) و این لایه رو به همراه لایه های متن لوگو (Light و Box) ادغام (Merge) کنید. دقت داشته باشید که اول لایه متنی و سپس لایه شکل رو انتخاب کنید تا بتونید ادغام لایه ها رو انجام بدین:

[تصویر:  43ucv.jpg]

مورد دیگه ای که باقی مونده عناوین هستند که اونها رو هم به ترتیبی که گفته شد باید انتخاب کرده و جدا کنید. علتش هم این بود که ما باید در سایتمون از فونت هایی استفاده کنیم که در تمام کامپیوتر ها نصب باشه. این چنین خاصیتی رو هم فقط فونتهای سیستمی دارن. پس ما باید با یک ترفند از فونتهایی که میخوایم استفاده کنیم و اون هم استفاده از عکس فونتهاست. پس برای این, لایه متنی عناوین Recent Work و What we do رو به طریقی که یاد گرفتید جدا کنید. (Ctrl + Click روی لایه متنی و کپی کردن لایه در یک فایل جدید, برداشتن چشم لایه پس زمینه و دخیره اون به عنوان یک فرمت PNG-24):

[تصویر:  43uy8.jpg]

در قدم بعدی و آخر به مهمترین قسمت یعنی انتخاب رنگ پس زمینه میرسیم. همین طور که قبلا گفتم, رنگ پس زمینه یکی از مهم ترین بخش های یک سایته که در صورتیکه به خوبی انتخاب نشه, هم باعث افزایش حجم سایت و در نتیجه پایین آمدن سرعت و کاهش رضایت کاربر و هم باعث کاهش جذابیت سایت از نگاه کاربر و همچنین خستگی چشم میشه. در اینجا چون ما بر روی یک قالب خاص کار میکنیم و فقط تمرین مدنظر ماست انتخاب رنگ چندان اهمیتی نداره؛ ولی در مقیاس های بزرگ و کاری این مسئله تاثیر چشم گیری در افزایش رضایت مخاطبان داره.
در این تمرین من بهتون میگم که شما کافیه فقط یک نوار باریک از پس زمینه رو به عنوان Background انتخاب کنید. چون در آینده که دستورات CSS رو بهتون بگم خواهید دید که با استفاده از همین نوار باریک میشه کل پس زمینه سایت رو بوسیله Repeat پوشش داد و خیلی راحت میشه به جای استفاده از تنها یک رنگ خاص و خسته کننده, از ترکیبی از رنگ ها و طیف ها برای رنگ پشت زمینه استفاده کرد؛ فقط در صورتی که هوشمندانه انتخاب شده باشند.

قبل از شروع برای انتخاب راحت تره محدوده ها بهتره اقدام زیر رو انجام بدید:
از منوی View گزینه Show را انتخاب و سپس دو خاصیت Smart guide و Pixel grid را علامت بزنید. تاثیر انتخاب این دو گزینه برایتان در هنگام انتخاب محدوده ها به وضوح مشخص میشود...!موفق
برای شروع شما باید با استفاده از ابزار Crop tool یک طیف پیکسلی به ابعاد Width = 5px و Height = 1405px و از گوشه سمت چپ بالای سایت تا ابتدای خط فوتر انتخاب کنید. دقت کنید که فتوشاپ با این ابزار فقط پهنا رو مشخص میکنه و شما برای طول باید تا ابتدای خط فوتر, تا زمانی که یک خط صورتی در ابتدای خط فوتر ایجاد میشه محدوده رو رسم کنید. (اینجا متوجه تاثیر اون دو آپشن میشید!) این محدوده بوسیله تکرار (در آینده بوسیله CSS) کل فضای پشت زمینه رو تشکیل میده:

(من در اینجا برای واضح تر شدن شکل پهنا رو بیشتر گرفتم, ولی شما همون 5پیکسل رو برای Width انتخاب کنید)
[تصویر:  43z88.jpg]


حالا دکمه Enter رو فشار بدین و شکل بدست آمده رو از طریق منوی File و گزینه Save as به نام bg و با فرمت Jpeg در پوشه img ذخیره کنید:

[تصویر:  43yzr.jpg]

در پنجره جدید هم مقادیر زیر رو بدید:

[تصویر:  43z19.jpg]

چون شکل به حالت جدید در آمده کلیدهای Ctrl + Alt + Z رو فشار بدین تا به حالت اولیه قالب برگردید...
هم اکنون میشه مطمئن بشیم که رنگ پشت زمینه سایتمون آماده است. اما اگر به قالب سایت نگاه دقیق تری بندازین متوجه میشین که تقریبا در وسط سایت(بین کادر قرمز) یعنی بین دو خط راهنمای عمودی سمت چپ و سمت راست تا ابتدای خط فوتر, رنگ زمینه تقریبا سفید و هدر هم به رنگ قهوه ای پررنگ تر رسم شده است:

[تصویر:  442tc.jpg]

پس بهتره یک برش جداگانه نیز برای این قسمت در نظر بگیریم.
مجددا با استفاده از ابزار Crop tool یک محدوده پیکسلی اینبار هم به همان ابعاد قبلی(1405×5 پیکسل) ولی قسمت وسط سایت, یعنی از خط راهنمای سمت چپ تا جایی که هدر با رنگ قهوه ای پر رنگ تر ادامه دارد انتخاب کنید. به شکل زیر دقت کنید:

(من در اینجا برای واضح تر شدن شکل پهنا رو بیشتر گرفتم, ولی شما همون 5پیکسل رو برای Width انتخاب کنید)
[تصویر:  44334.jpg]

حالا دکمه Enter رو فشار بدین و شکل بدست آمده رو مجددا از طریق منوی File و گزینه Save as به نام containerbg و با فرمت Jpeg در پوشه img ذخیره کنید. دوباره برای برگشت کلیدهای Ctrl + Alt + Z رو فشار بدین تا به حالت اولیه قالب برگردید...

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

برنامه نویس آدرس ایمیل من...


فایل‌(های) پیوست شده
.rar  MyWebsite.part01.rar (اندازه: 585.94 KB / تعداد دفعات دریافت: 36)
.rar  MyWebsite.part02.rar (اندازه: 551.97 KB / تعداد دفعات دریافت: 35)

یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط Sara.A ، تیم پشتیبانی ، admin ، asieh ، z-e ، شکیب آنلاین
04-10-2012, 03:57 AM
ارسال: #5
RE: استخراج عناصر یک وب سایت از قالب فتوشاپ مثل حرفه ای ها! .: آموزش :.
1
0
دوستان در صورتی که سوالی در مورد این مطلب به ذهنتون رسید یا قسمتی از متن براتون غیر قابل مفهوم بود, حتما مراتب رو در جریان بذارید! هیجان زده


برنامه نویس

یافتن تمامی ارسال‌های این کاربر
نقل قول این ارسال در یک پاسخ
 سپاس شده توسط admin ، z-e ، تیم پشتیبانی ، Sara.A ، شکیب آنلاین ، afshin
ارسال پاسخ 


موضوع‌های مرتبط با این موضوع...
موضوع: نویسنده پاسخ: بازدید: آخرین ارسال
  آموزش گام به گام ساخت سايت در ASP.NET Saeede azn 0 6,444 09-04-2013 07:08 PM
آخرین ارسال: Saeede azn
Star آموزش ساخت یک منوی پایین افتادنی چندگانه elias.f 19 19,328 12-24-2012 07:07 AM
آخرین ارسال: elias.f
  افزایش بازدیدکنندگان سایت hostjoomir 1 2,399 10-23-2012 04:15 AM
آخرین ارسال: ghanei
Question استخراج عناصر یک وب سایت از قالب فتوشاپ مثل حرفه ای ها! .: رفع اشکال :. Cna FP 7 7,376 07-17-2012 04:07 AM
آخرین ارسال: Cna FP
Star طراحی یک وب سایت ساده (آموزش) تیم پشتیبانی 6 10,198 04-20-2012 04:37 AM
آخرین ارسال: تیم پشتیبانی
  چگونه طراح سایت قابلی شویم؟! Cna FP 0 2,288 04-19-2012 12:25 AM
آخرین ارسال: Cna FP
  طراحی یک وب سایت ساده (رفع اشکال) تیم پشتیبانی 6 6,823 04-09-2012 06:25 PM
آخرین ارسال: jahani
  طراحی قالب یک سایت در فتوشاپ به زبان ساده(آموزش) Cna FP 5 10,122 04-01-2012 03:21 AM
آخرین ارسال: admin
  طراحی قالب یک سایت در فتوشاپ به زبان ساده(رفع اشکال) nasrin 3 4,980 04-01-2012 01:22 AM
آخرین ارسال: Cna FP

پرش به انجمن:


کاربرانِ درحال بازدید از این موضوع: 1 مهمان