பயிற்சி: அடோப் ஃபோட்டோஷாப் மூலம் வலைப்பக்கத்தை எவ்வாறு அமைப்பது

குறியீட்டை உள்ளிடவோ அல்லது தொடவோ இல்லாமல் வலைப்பக்கங்களை வடிவமைக்கவும், முற்றிலும் எளிமையான மற்றும் செயல்பாட்டு வழியில் செயல்படவும் பல்வேறு வகையான கருவிகள் உள்ளன. அவை எண்ணற்றவை, பயன்பாடுகளால் முன்மொழியப்பட்டுள்ளன (அடோப் ட்ரீம்வீவர் ஒரு எடுத்துக்காட்டு) அல்லது நேரடியாக விக்ஸ் போன்ற ஆன்லைன் தளங்களால். இருப்பினும், ஒரு வலை வடிவமைப்பாளருக்கு, கையேடு நடைமுறைகளை அறிந்து கொள்வது அவசியம். வலைத்தளங்கள் மற்றும் இறங்கும் பக்கங்களின் தளவமைப்புக்கான அடிப்படை தூண்கள் HTML5 மற்றும் CSS ஆகும்.

இருப்பினும், நீங்கள் எதிர்பார்ப்பதை விட அடிக்கடி, நீங்கள் இன்டெசைன் அல்லது போன்ற பயன்பாடுகளுக்கு திரும்ப வேண்டும் அடோ போட்டோஷாப் உங்கள் தளவமைப்பு வேலைகளை நிறைவுசெய்து அவர்களுக்கு சரியான பூச்சு கொடுக்க. அடோப் ஃபோட்டோஷாப்பைப் பயன்படுத்தி ஒரு வலைப்பக்கத்தை எவ்வாறு அமைப்பது என்பதை இந்த விரிவான டுடோரியலில் இன்று பார்ப்போம். இந்த முதல் பகுதியில் ஃபோட்டோஷாப்பிலிருந்து உருவாக்கப்பட வேண்டிய வேலையில் நாங்கள் தங்கியிருப்போம், இருப்பினும் எதிர்காலத் தவணைகளில் இந்த வேலையை ஏற்கனவே HTML குறியீட்டில் நேரடியாக எவ்வாறு செயல்படுத்தலாம் என்பதைப் பார்ப்போம்.

எங்கள் வயர்ஃப்ரேமின் வடிவமைப்பிலிருந்து தொடங்குகிறது

ஒரு வலைப்பக்கத்தின் தளவமைப்பு மற்றும் வடிவமைப்பிலிருந்து தொடங்க, அடிப்படை கூறுகள் என்னவாக இருக்கும் என்பதை வரையறுப்பதன் மூலம் நாம் தொடங்குவது மிகவும் முக்கியமானது, இது எலும்புக்கூடு. இந்த அமைப்பு அனைத்து உள்ளடக்கத்தையும் (உரை அல்லது மல்டிமீடியாவாக இருந்தாலும்) வைத்திருக்க ஒரு ஆதரவாக செயல்படும். எங்கள் பக்கத்தை உருவாக்கும் ஒவ்வொரு பிரிவுகளையும் வரையறுப்பதன் மூலம், அவற்றில் முழுமையான துல்லியத்துடன் செயல்படலாம் மற்றும் முடிந்தவரை துல்லியமான காட்சி வடிவமைப்பை வழங்க முடியும்.

எங்கள் வலைத்தளத்திற்கு இருக்கும் பரிமாணங்களை கணக்கில் எடுத்துக்கொள்வது மிகவும் முக்கியம் பெட்டி அல்லது முழு அகலம். ஒரு பெட்டி வலைப்பக்கம் ஒரு சிறிய கொள்கலனுக்குள் இருக்கும், எனவே அதைச் சுற்றி ஒரு இடம் தோன்றும். மாறாக, பக்கத்தை மீண்டும் உருவாக்கும் சாதனத்தின் முழு திரையையும் ஒரு முழு அறிவு வலை ஆக்கிரமிக்கும். ஒரு முறை அல்லது மற்றொன்றுக்கு இடையே தேர்வு செய்வது வெறும் ஸ்டைலிஸ்டிக் கேள்விகளுக்கு பதிலளிக்கிறது, மேலும் நாங்கள் பணிபுரியும் திட்டத்தின் தேவைகளையும் பொறுத்தது. இந்த எடுத்துக்காட்டில் பெட்டி பயன்முறையில் செயல்படுவோம், எனவே உலாவி வழங்கிய எல்லா இடங்களையும் இது ஆக்கிரமிக்காது.

எங்கள் வயர்ஃப்ரேமை உருவாக்க, முதலில் நாம் செய்ய வேண்டியது அடோப் ஃபோட்டோஷாப் பயன்பாட்டை உள்ளிட்டு, எங்கள் பக்கத்தில் இருக்க விரும்பும் பரிமாணங்களை உள்ளடக்குதல். இந்த எடுத்துக்காட்டில் எங்கள் பக்கம் 1280 பிக்சல்கள் அகலமாக இருக்கும். எவ்வாறாயினும், இறுதி இலக்கு அல்லது எங்கள் பக்கத்தை மீண்டும் உருவாக்க விரும்பும் சாதனத்தைப் பொறுத்து அளவு பிரச்சினை மாறுபடலாம். ஒரு வலை வடிவமைப்பு செயல்பாட்டு ரீதியாகவும் திறமையாகவும் இருக்க வேண்டுமென்றால், அது இருக்க வேண்டும் என்பதில் சந்தேகமில்லை பதிலளிக்க அது சந்தையில் உள்ள எல்லா சாதனங்களுக்கும் பொருந்த வேண்டும். இருப்பினும், இந்த விஷயத்தில் நாம் ஒரு டெஸ்க்டாப் கணினியில் இனப்பெருக்கம் செய்யப் போகும் ஒரு முன்மாதிரி ஒன்றை உருவாக்க வேலை செய்யப் போகிறோம். அப்படியிருந்தும், பதிலளிக்கக்கூடிய பிரச்சினை பின்னர் விவாதிக்கப்படும், இப்போதைக்கு, இந்த எடுத்துக்காட்டில் பணியாற்றுவதற்கான திரை பரிமாணங்களின் வரிசைமுறை இங்கே. இந்த விஷயத்தில் அடோப் ஃபோட்டோஷாப்பில் தரையிறங்கும் பக்கத்தின் தளவமைப்பை உருவாக்குவோம், பின்னர் அதை HTML5 மற்றும் CSS3 க்கு மாற்றுவோம். இந்த சிறிய நடைமுறையின் நோக்கம், ஃபோட்டோஷாப்பில் உருவாக்கப்பட்ட வடிவமைப்பை பயனரின் இயக்கங்களுக்கு பதிலளிக்கும் பொருந்தக்கூடிய மற்றும் ஊடாடும் வலை வடிவமைப்பாக மாற்றுவதாகும்.

மொபைல் போன்களுக்கான அளவீடுகள்

ஐபோன் 4 மற்றும் 4 எஸ்: 320 x 480

ஐபோன் 5 மற்றும் 5 எஸ்: 320 x 568

ஐபோன் 6: 375 x 667

ஐபோன் 6+: 414 x 736

நெக்ஸஸ் 4: 384 x 598

நெக்ஸஸ் 5: 360 x 598

கேலக்ஸி எஸ் 3, எஸ் 4, எஸ் 5: 360 எக்ஸ் 640

HTC One: 360 x 640

மாத்திரைகள் அளவீடுகள்

ஐபாட் அனைத்து மாடல்களும் ஐபாட் மினி: 1024 x 768

கேலக்ஸி தாவல் 2 மற்றும் 3 (7.0 அங்குலங்கள்): 600 x 1024

கேலக்ஸி தாவல் 2 மற்றும் 3 (10.1 அங்குலங்கள்): 800 x 1280

நெக்ஸஸ் 7: 603 x 966

நெக்ஸஸ் 10: 800 x 1280

மைக்ரோசாஃப்ட் மேற்பரப்பு W8 RT: 768 x 1366

மைக்ரோசாஃப்ட் மேற்பரப்பு W8 புரோ: 720 x 1280

டெஸ்க்டாப் கணினிகளுக்கான அளவீடுகள்

சிறிய திரைகள் (நெட்புக்குகளில் எடுத்துக்காட்டாகப் பயன்படுத்தப்படுகின்றன): 1024 x 600

நடுத்தர திரைகள்: 1280 x 720/1280 x 800

பெரிய திரைகள்: அகலம் 1400 பிக்சல்களை விட அதிகமாக, எடுத்துக்காட்டு 1400 x 900 அல்லது 1600 x 1200.

எங்கள் வலை மொக்கப்பில் உள்ள கூறுகளை விநியோகிப்பதற்கும் பிரிவுகளை ஒதுக்குவதற்கும் தொடங்க, படிக்கக்கூடிய மற்றும் மெல்லிசை பூச்சு உறுதி செய்ய விகிதாச்சாரத்தை கணக்கில் எடுத்துக்கொள்வது மிகவும் முக்கியம். மேல் மெனுவில் நீங்கள் காணக்கூடிய விதிகள் மற்றும் வழிகாட்டிகளின் விருப்பங்களைப் பயன்படுத்துவது அவசியம். விகிதாசார மற்றும் சரியான வழியில் பணியாற்ற, நாம் சதவீதத்திலிருந்து வேலை செய்வது நல்லது. பிரிவின் முறையைத் தேர்வுசெய்ய காட்சி மெனுவில் கிளிக் செய்து «புதிய வழிகாட்டி option என்ற விருப்பத்தில் கிளிக் செய்வோம். இந்த வழக்கில் நாங்கள் நான்கு செங்குத்து பிளவுகளை 25% ஆக மாற்றுவோம், மேலும் அவற்றை எங்கள் படங்களை அடிக்குறிப்பிலும், எங்கள் லோகோவின் படத்தையும் தலைப்பில் வைக்க ஒரு குறிப்பாக எடுத்துக்கொள்வோம்.

எங்களை ஆக்கிரமிக்கும் ஒவ்வொரு பகுதியையும் நியமிக்க ஒரு குறியீடு உள்ளது மாதிரி அவை ஒவ்வொன்றிலும் இருக்கும் செயல்பாடு. எடுத்துக்காட்டாக, ஒரு படம் ஆக்கிரமிக்கும் பகுதியைக் குறிக்க, ஒரு வகையான குறுக்குவெட்டுடன் செவ்வகங்களை உருவாக்குவோம். ஒரு குறிப்பிட்ட பகுதியில் வீடியோக்களைச் சேர்க்க விரும்புகிறோம் என்பதைக் குறிக்க, எங்கள் கொள்கலனுக்குள் நாடக சின்னத்தை சேர்ப்போம். இந்த முதல் எடுத்துக்காட்டில் நாங்கள் படங்களுடன் மட்டுமே வேலை செய்யப் போகிறோம், மேல் பிடிப்பில் நீங்கள் அந்த பகுதியைக் காணலாம் லோகோ எங்கள் வலைத்தளத்திலிருந்து.

இது நம்முடைய இறுதி முடிவாக இருக்கும் wireframe. நாம் பார்க்க முடியும் என, இது லோகோவைக் கண்டுபிடிக்கும் படத்தைக் கொண்ட ஒரு தலைப்பாகப் பிரிக்கப்பட்டுள்ளது, மேலும் இது இரண்டு தாவல்கள், ஒரு தேடுபொறி மற்றும் தேடல் பெட்டியில் நான்கு பொத்தான்களுடன் முகப்பு பக்கத்திற்கான இணைப்பாக செயல்படும். கூடுதலாக, ஏற்கனவே உடலுக்குள், எங்கள் வலைத்தளத்தில் இருக்கும் உள்ளடக்க வகையை வகைப்படுத்தும் ஒரு பிரிக்கும் பட்டையும், தொடர்ச்சியான வகைகளையும் உள்ளடக்கிய ஒரு பக்க பட்டியை நாங்கள் சேர்த்துள்ளோம். எங்கள் தளத்தில் இருக்கும் உள்ளீடுகளை உள்ளடக்கிய எண்ணைக் கொண்ட மற்றொரு பிரிவு, இறுதியாக எங்கள் தளத்தில் மிகவும் பிரதிநிதித்துவ மெட்டா குறிச்சொற்கள் அல்லது லேபிள்களைக் கொண்ட பட்டியல்.

உள்ளடக்க பகுதியில், இதில் ஒரு பகுதியால் வரையறுக்கப்படும் சுய நிர்வகிக்கக்கூடிய உள்ளடக்கம், எங்கள் கட்டுரைகளின் உள்ளடக்கத்தைக் காண்போம். இந்த வழக்கில், பிரட்தூள்களில் நனைக்கப்பட்டு அல்லது பிரட்தூள்களில் நனைக்கப்பட்டு (இது எங்கள் வலைத்தளத்தின் கரிம அமைப்பு, கட்டுரையின் தலைப்பு, மெட்டாடேட்டா, உரையின் ஒரு அமைப்பாக ஒரு பத்தி, அதில் ஒரு படம் சேர்க்கப்பட்டுள்ளது.

ஒரு அடிக்குறிப்பாக எங்கள் பக்கத்தின் பிற பகுதிகளுக்கான இணைப்பாக நான்கு படங்களை சேர்த்துள்ளோம். இங்கே நாம் லோகோக்கள் அல்லது பிற சுவாரஸ்யமான பிரிவுகளை சேர்க்கலாம். உண்மையில், இந்த பகுதி இன்னும் அதிகமாக செயல்படும் முன்கூட்டியே, பயன்பாட்டுக் கொள்கை, சட்ட அறிவிப்பு மற்றும் பதிப்புரிமை ஆகியவற்றுடன் அடிக்குறிப்பு இன்னும் கொஞ்சம் கீழே செல்லும்.

எங்கள் பக்கத்தின் அடிப்படை கட்டமைப்பு அல்லது எலும்புக்கூட்டை நாங்கள் வரையறுத்தவுடன், அடுத்த நிலைக்கு செல்ல வேண்டும். இது எங்கள் வலைத்தளத்தின் ஒவ்வொரு பகுதிகளின் உண்மையான வடிவமைப்பைக் கொண்டிருக்கும். வேறு வார்த்தைகளில் கூறுவதானால், எங்கள் வலைத்தளத்தில் இறுதியாக செருகப்படும் உள்ளடக்கத்துடன் இந்த ஒவ்வொரு பகுதியையும் "நிரப்ப" தொடங்குவோம். வயர்ஃப்ரேமில் வேலை செய்வதற்கு முன்பு இந்த கூறுகளை வடிவமைக்கத் தொடங்க வேண்டாம் என்று பரிந்துரைக்கப்படுகிறது, ஏனெனில் இந்த வரிசையில் இதைச் செய்தால், பின்னர் அவற்றின் விகிதாச்சாரத்தை மாற்றியமைக்க வேண்டியிருக்கும். எங்கள் படங்களை சிதைக்கும் அபாயத்தை நாங்கள் இயக்குகிறோம் ஒவ்வொரு உறுப்புகளின் வடிவமைப்பையும் மீண்டும் செய்ய வேண்டியது, இது நேரத்தை வீணடிப்பதாகவோ அல்லது குறைந்த தரமான முடிவாகவோ மாறும்.

இந்த வழக்கில், எங்கள் வலைத்தளத்தின் வடிவமைப்பு மிகவும் எளிமையானதாக இருக்கும். நாங்கள் பயன்படுத்துவோம் பொருள் வடிவமைப்பு கட்டளைகள், இந்த நடைமுறையை எடுத்துக்காட்டுவதற்கு நாங்கள் Google லோகோவைப் பயன்படுத்தப் போகிறோம். இந்த டுடோரியலின் நோக்கம் தொழில்நுட்ப அறிவை விளக்குவது என்பதை நான் தெளிவுபடுத்த வேண்டும், எனவே இந்த விஷயத்தில் அழகியல் முடிவு பொருத்தமற்றது. நீங்கள் பார்க்கிறபடி, எங்கள் திட்டத்தில் நாங்கள் முன்னர் தீர்மானித்த அனைத்து பகுதிகளிலும் சிறிது சிறிதாக இடத்தை நிரப்புகிறோம். இருப்பினும், கடைசி நிமிடத்தில் ஒரு சிறிய மாற்றத்தை நாங்கள் செய்தோம். நீங்கள் கவனித்திருப்பதைப் போல, எங்கள் லோகோவின் அளவை நாங்கள் கணிசமாகக் குறைத்துள்ளோம், மேலும் மேல் மெனுவுடன் சரியாக இணைக்கும் கீழ் தலைப்பு பகுதியில் ஒரு பிளவு கோட்டை சேர்த்துள்ளோம். இந்த வழக்கில் நாங்கள் ஒரு வள வங்கியிலிருந்து பொத்தான்கள் மற்றும் பொருட்களைப் பயன்படுத்தினோம். வடிவமைப்பாளர்களாகிய நாம் அவற்றை நாமே வடிவமைக்க முடியும், (குறிப்பாக பிராண்ட் படம் அல்லது லோகோ வழங்கியதைப் போன்ற ஒரு ஒத்த டானிக்கை வழங்க விரும்பினால் இந்த விருப்பம் பரிந்துரைக்கப்படுகிறது).

இந்த உதாரணத்தை முன்வைக்க நாம் இரண்டு வெவ்வேறு நிலைகளில் வேலை செய்யப் போகிறோம் என்பதை நாம் மனதில் கொள்ள வேண்டியது அவசியம். ஒருபுறம், நாங்கள் பொருள்களிலும், மறுபுறம் வலைத்தளத்தின் தோற்றத்திலும் செயல்படுவோம். அதாவது, ஒருபுறம் எங்கள் வலைத்தளத்தின் எலும்புக்கூட்டில், மறுபுறம் எல்லாவற்றிலும் இந்த எலும்புக்கூடு ஆதரிக்கும் மிதக்கும் கூறுகள். எங்கள் பக்கப்பட்டி ஆக்கிரமிக்கும் பகுதி, ப்ரீபூட்டர் அல்லது உடலில் இருந்து தலைப்பைப் பிரிக்கும் பிளவு பட்டி போன்றவற்றில் மிதக்காத பகுதிகள் இருப்பதை நீங்கள் கவனிப்பீர்கள்.

1, 2, 3 மற்றும் 4 கட்டமைப்புகள் ஒரு பகுதியாக இருக்கும் பின்னணி எங்கள் வலைப்பக்கத்தின், எனவே உண்மையில் அடோப் ஃபோட்டோஷாப்பிலிருந்து ஏற்றுமதி செய்ய வேண்டிய அவசியமில்லை, நாங்கள் அதைச் செய்ய முடியும் என்றாலும், அது தேவையில்லை. அது வரும்போது தட்டையான வண்ணங்கள் (தட்டையான வடிவமைப்பு மற்றும் பொருள் வடிவமைப்பின் அத்தியாவசிய அம்சங்களில் ஒன்று, அவை ஒரு CSS நடைதாள் பயன்படுத்தி குறியீடு மூலம் செய்தபின் பயன்படுத்தப்படலாம்). எவ்வாறாயினும், எங்கள் HTML குறியீட்டில் பின்னர் செருகுவதற்காக மீதமுள்ள கூறுகள் சேமிக்கப்பட வேண்டும். இந்த சிறிய வரைபடத்தில், பக்கத்தின் பின்னணியைச் சேர்ந்த பகுதிகளையும் நாங்கள் மீண்டும் உருவாக்கியுள்ளோம், இதன்மூலம் எங்கள் தளத்தின் இறுதி தோற்றம் என்ன என்பது பற்றிய தெளிவான யோசனை எங்களுக்கு உள்ளது.

அடோப் ஃபோட்டோஷாப்பில் இந்த திட்டத்தை உருவாக்குவதன் அர்த்தம் ஒவ்வொரு உறுப்பின் உண்மையான பரிமாணத்தைப் பெறுவதும், ஒவ்வொரு தனிமத்தின் ஏற்பாட்டையும் கட்டமைப்பையும் தெளிவுபடுத்துவதே என்பதை நீங்கள் உணர முடியும். நிச்சயமாக, உரை உள்ளடக்கத்திற்கு இந்த கட்டத்தில் எந்த இடமும் இல்லை, ஏனெனில் அது இருக்க வேண்டும் எங்கள் குறியீடு எடிட்டரிலிருந்து வழங்கப்பட்டது. இந்த நடைமுறையில், நாங்கள் பொத்தான்கள் மற்றும் நிலையான கூறுகளுடன் வேலை செய்யப் போகிறோம் என்பதையும் சுட்டிக்காட்ட வேண்டும், இருப்பினும் பொதுவாக இவை பொதுவாக பூட்ஸ்டார்ப் போன்ற கட்டமைப்பிலிருந்து அல்லது நேரடியாக jquery இலிருந்து பயன்படுத்தப்படுகின்றன.

எங்கள் வலைப்பக்கத்தை உருவாக்கும் ஒவ்வொரு கூறுகளையும் நாங்கள் உருவாக்கியதும், அவற்றை ஏற்றுமதி செய்து HTML திட்ட கோப்புறையில் அமைந்துள்ள படங்கள் கோப்புறையில் சேமிக்கத் தொடங்க வேண்டிய நேரம் இது. உங்கள் வயர்ஃப்ரேமில் இருந்து ஏற்றுமதி செய்ய நீங்கள் பழகுவது முக்கியம், ஏனென்றால் எலும்புக்கூடு உள்ளமைவின் அடிப்படையில் சில அசல் கூறுகளை நீங்கள் மாற்ற வேண்டியிருக்கும். (எடுத்துக்காட்டாக, இந்த விஷயத்தில், அசல் பொத்தான்கள், லோகோ மற்றும் கலவையின் ஒரு பகுதியாக இருக்கும் பெரும்பாலான கூறுகளின் அளவு, குறைந்த பகுதியில் உள்ள படங்கள் உட்பட மாற்றியுள்ளோம்).

எந்தவொரு பொருளையும் அவற்றின் பரிமாணங்களாலும் துல்லியமான வழியிலும் சேமிக்க சுயாதீனமாக சேமிக்க கற்றுக்கொள்வது முக்கியம். எந்தவொரு பிழையும், மிகக் குறைவாக இருந்தாலும், உங்கள் வலைப்பக்கத்தின் ஒரு பகுதியாக இருக்கும் அனைத்து கூறுகளையும் பாதிக்கலாம். அவை ஒருவருக்கொருவர் தொடர்புடையதாக இருக்கும் என்பதையும், சரியான பரிமாணங்களைக் கொண்டிருக்க வேண்டும் என்பதையும் நினைவில் கொள்ளுங்கள், இதனால் அவை இறுதி வலையில் உள்ள HTML இலிருந்து நுழைய முடியும். இந்த வழக்கில், பின்வரும் கூறுகளை நாம் சுயாதீனமாக வெட்டி சேமிக்க வேண்டும்:

• எங்கள் லோகோ.
• எல்லா பொத்தான்களும் (பிரதான மெனுவின் பகுதியும் மீதமுள்ளவை).
• அனைத்து படங்களும்.

நாங்கள் அதை பல வழிகளில் செய்ய முடியும், மேலும் உங்களுக்கு மிகவும் பயனுள்ள ஒரு மாற்றீட்டை நீங்கள் காணலாம். நீங்கள் இந்த வகை தளவமைப்பை உருவாக்கப் போவது இதுவே முதல் முறை என்றால், பின்வரும் உதவிக்குறிப்புகளைப் பின்பற்றுமாறு நான் பரிந்துரைக்கிறேன்.

• முதலில், எங்கள் வயர்ஃப்ரேமைக் கொண்ட PSD கோப்பு அமைந்துள்ள கோப்புறைக்குச் சென்று, நீங்கள் ஏற்றுமதி செய்யப் போகும் உறுப்புகளை விட பல மடங்கு நகலெடுக்க வேண்டும். இந்த வழக்கில் நாங்கள் அசலில் இருந்து 12 நகல்களை உருவாக்கி அவற்றை ஒரே கோப்புறையில் சேமித்துள்ளோம். அடுத்து, நீங்கள் ஒவ்வொரு பிரதியையும் மறுபெயரிடுவீர்கள், அவற்றில் ஒவ்வொன்றும் அதில் உள்ள தனிமத்தின் பெயரை ஒதுக்குவீர்கள். எங்கள் 12 பிரதிகள் மறுபெயரிடப்படும்: லோகோ, மெனு பொத்தான் 1, மெனு பொத்தான் 2, தேடல் பட்டி, மேல் பொத்தான் 1, மேல் பொத்தான் 2, மேல் பொத்தான் 3 மற்றும் மேல் பொத்தான் 4. மீதமுள்ள நான்கு மறுபெயரிடப்படும்: படம் 1, படம் 2, படம் 3 மற்றும் படம் 4.
• இது முடிந்ததும் லோகோ பெயருடன் கோப்பைத் திறப்போம்.
• நாங்கள் எங்கள் லேயர் தட்டுக்குச் சென்று எங்கள் லோகோவைக் கொண்ட லேயரைக் கண்டுபிடிப்போம். பின்னர் அழுத்துவோம் Ctrl / Cmd சொன்ன அடுக்கின் சிறுபடத்தில் கிளிக் செய்யும் போது. இந்த வழியில் லோகோ தானாகவே தேர்ந்தெடுக்கப்பட்டிருக்கும்.
• அடுத்த கட்டமாக ஃபோட்டோஷாப்பிடம் அந்த லோகோவை ஒரு துல்லியமான வழியில் வெட்ட வேண்டும் என்று நாங்கள் விரும்புகிறோம். இதற்காக நாம் விசை அல்லது கட்டளையிலிருந்து பயிர் கருவிக்கு மட்டுமே அழைப்பு விடுக்க வேண்டும் C.
• இதைச் செய்தவுடன், வெட்டை உறுதிப்படுத்த எங்கள் Enter பொத்தானைக் கிளிக் செய்வோம்.
• இப்போது எப்படி சேமிக்க என்பதைக் கிளிக் செய்ய மேல் கோப்பு மெனுவுக்குச் செல்வோம். பெயரைத் தேர்ந்தெடுப்போம், இந்த விஷயத்தில் «லோகோ be ஆக இருக்கும், மேலும் ஒரு வடிவமைப்பை ஒதுக்குவோம் , PNG, வலையில் மிக உயர்ந்த தரத்தை வழங்கும் கோப்பாக இருப்பதற்காக.
• அனைத்து பிரதிகள் மற்றும் உருப்படிகளுக்கான செயல்முறையை நாங்கள் மீண்டும் செய்வோம். நீங்கள் ஒழுங்கமைத்தவுடன், எங்கள் தட்டில் உள்ள மீதமுள்ள அடுக்குகள் இருப்பதை உறுதிப்படுத்தவும் கண்ணுக்கு தெரியாத அல்லது நீக்கப்பட்டது. இந்த வழியில் நாம் ஒவ்வொரு உறுப்பையும் வெளிப்படையான பின்னணியுடன் சேமிக்க முடியும்.

இந்த வழக்கில் அடுக்குகளின் தட்டிலிருந்து எங்கள் மெனு பொத்தான் 2 ஐத் தேர்ந்தெடுக்கிறோம். எங்கள் பொத்தானின் வரம்புகள் தானாக எவ்வாறு தேர்ந்தெடுக்கப்பட்டன என்பதை நீங்கள் ஸ்கிரீன்ஷாட்டில் பார்க்கலாம்.

சி விசையிலிருந்து பயிர் கருவியைத் தேர்ந்தெடுத்ததும், எங்கள் கேன்வாஸ் எங்கள் பொத்தானின் பரிமாணங்களுக்கு மட்டுமே குறைக்கப்படுகிறது.

எங்கள் வலைத்தளத்தின் ஒரு பகுதியாக இருக்கும் அனைத்து கூறுகளையும் ஒவ்வொன்றாக சேமித்து அவற்றை படங்கள் கோப்புறையில் சேர்க்க வேண்டிய நேரம் இது, பின்னர் நாங்கள் பயன்படுத்துவோம். நாங்கள் எங்கள் குறியீட்டிலிருந்து அழைப்புகளைச் செய்து எங்கள் தளவமைப்பைத் தொடருவோம், ஆனால் இனிமேல் எங்கள் குறியீடு எடிட்டரிலிருந்து.

ஒரு வலைப்பக்கத்தை அமைப்பதற்கு பல கருவிகள் மற்றும் மாற்று வழிகள் இருந்தாலும், அந்த செயல்முறையை முற்றிலும் உள்ளுணர்வுடையதாக ஆக்குகின்றன என்றாலும், அதைச் செய்ய நாம் கற்றுக்கொள்வது மிகவும் முக்கியம் கையேடு. இந்த வழியில் ஒரு வலைப்பக்கத்தை வடிவமைப்பதன் பின்னணியில் உள்ள அடிப்படைகள் என்ன என்பதைக் கற்றுக்கொள்வோம்.

சுருக்கம்:

1. வடிவமைக்க அமைப்பு நீங்கள் அனுப்ப விரும்பும் உள்ளடக்கம் மற்றும் உங்கள் வலைத்தளத்தில் நீங்கள் உருவாக்க வேண்டிய பிரிவுகளுக்கு சிறப்பு கவனம் செலுத்தும் வலைத்தளத்தின்.
2. உங்கள் எலும்புக்கூட்டில் வேலை செய்யுங்கள் wireframe அடோப் ஃபோட்டோஷாப்பில் இருந்து உள்ளடக்கங்கள் எந்த பகுதிகளில் தோன்றும் மற்றும் அவற்றின் வடிவத்தைக் குறிக்கும்.
3. நீங்கள் முன்பு உருவாக்கிய நடவடிக்கைகள் மற்றும் பிராண்டுகளை நம்பி, தொடங்கவும் வடிவமைப்பு வலையின் மேற்பரப்பு. அனைத்து கூறுகளையும் உள்ளடக்கியது (மிதக்கும் மற்றும் நிலையான). தொடர்புடைய பொத்தான்கள், லோகோ மற்றும் படங்களை சேர்க்க மறக்காதீர்கள்.
4. திட்டத்தின் ஒரு பகுதியாக இருக்கும் அனைத்து கூறுகளையும் ஒவ்வொன்றாக வெட்டுங்கள். அவர்களிடம் சரியான நடவடிக்கைகள் இருப்பதையும் பின்னர் அவை உங்களுக்கு சிக்கல்களை ஏற்படுத்தாது என்பதையும் உறுதிப்படுத்திக் கொள்ளுங்கள்.
5. எல்லா உறுப்புகளையும் வடிவமைப்பில் சேமிக்கவும் , PNG திட்ட கோப்புறையில் உள்ள படங்கள் கோப்புறையில் HTML ஐ.
6. இந்த திட்டம் வலை சாளரத்திற்கு ஒரு வெளியீட்டைக் கொண்டிருக்கும் என்பதை நினைவில் கொள்ளுங்கள், எனவே நீங்கள் வண்ண பயன்முறையை கணக்கில் எடுத்துக்கொண்டு விண்ணப்பிப்பது மிகவும் முக்கியம் ஆர்ஜிபி.
7. நீங்கள் வேலைக்குச் செல்வதற்கு முன்பு நீங்கள் போற்றும் பிற வலைப்பக்கங்களால் ஈர்க்கப்படுங்கள், உங்கள் குழு உறுப்பினர்களுடன் இதைப் பற்றி விவாதிக்க மறக்காதீர்கள். இது ஒரு வாடிக்கையாளருக்கான திட்டமாக இருந்தால், ஒட்டிக்கொள்ள முயற்சிக்கவும் விளக்கக் முடிந்தவரை.