基金訓練(Webデザイン・プログラミング科)の73日目に行ってまいりました。
73日目は、PhotoShopの実習です。
72日目がなかなかまとまらないので、とりあえず飛ばして73日間に行きます。
73日目の内容は下記のとおりです。
通販ページの商品写真のようなミラー影の作成
-
完成はこんな感じです。
-
1.カンバスサイズを影の方向に広げます。
-
2.背景レイヤーを複製し、作業するレイヤーを作ります。
-
3.背景部分を選択範囲にして、Deleteキーを押して透明にします。
-
4.編集メニュー→自由変形をクリックして、バウンディングボックスを表示します。
-
5.バウンディングボックス上端をもって、影の大きさが適当になる位置までドラッグし、Enterキーで確定します。
-
6.「レイヤーマスクを追加」をクリックします。
-
7.レイヤーパネルのレイヤーマスクのサムネイルが選択されている状態で、グラデーションツールを使い、黒→白で線形のグラデーションを下から上へShiftキーを押しながらドラッグして作成します。
-
8.レイヤーパネルでレイヤーの不透明度を下げて、影らしく見せて完成です。
基金訓練(Webデザイン・プログラミング科)の71日目に行ってまいりました。
71日目は、PHPプログラミングとWordPressの実習です。
WordPressをカスタマイズする過程の中でPHPを学習するようです。
71日目の内容は下記のとおりです。
1.PHPの特徴
- HTML埋め込み型のプログラミング言語
- HTML文書の中に部分的に埋め込んで記述します。
- サーバーサイドスクリプト言語
- Webサーバが動いているコンピュータで実行され、書いたコードをそのまま実行できます。
- オープンソース
- ソースが公開されています。
- 多くの機能が用意されています。
- DB操作、メール送受信等の機能があります。
2.PHPを使う為に準備するもの
- テキストエディタ
- Peggy Pad、Terapad等、UTF8-Nで保存できるもの。
- FTPクライアント
- FileZilla Client、FFFTP等。
- Webブラウザ
- IE、fireFox等。
- PHP
-
- Webサーバ
- Apache等。
- データベースサーバ
- MySQL等。
※XAMPP Liteをインストールすれば、PHP、Webサーバ、データベースサーバをまとめてインストールできます。
3.XAMMP Liteの導入
- apache friends – xampp for windows
からXAMPP LiteのZIPファイルをダウンロードします。
- ZIPファイルを解凍し、xamppliteフォルダを任意の場所にコピーします。
(日本語名のフォルダはだめなので、Cドライブのルートにコピーすればいいと思います。)
- 初期設定の為、フォルダ内のsetup_xampp.batを実行します。
(ドライブのルートにxamppliteフォルダをコピーした時は、この設定は必要ありません。)
- コマンドプロンプトが立ち上がるので、(y/n)の問い合わせ(3回)にすべてyキー+Enterキーを押した後、Enterキーを2回押し、(1-5/x)の選択でxキー+Enterキーで終了します。
- フォルダ内のxampp-control.exeを実行すると、XAMPP Liteのウインドウが開きます。
- Apache、MySQLそれぞれの横にあるStartボタンを押します。
- Apache、MySQLそれぞれの横にあるAdminボタンを押し、ブラウザが起動してページが表示されれば正しく設定されています。
4.WordPressの導入
- WordPressのホームページ
からWordPressのZIPファイルをダウンロードします。
- ZIPファイルを解凍し、¥xampplite¥htdocsフォルダにwordpressフォルダをコピーします。
- ブラウザで http://localhost/wordpress/ に接続すると、WordPressのエラー画面が表示されます。
- 「wp-config.phpファイルを作成する」ボタンを押します。
- wp-config.phpファイルを作成する為のウィザード開始されるので、「次に進みましょう!」ボタンを押します。
- 各項目を次のように記入します。
データベース名 test (MySQLにデフォルトである空のデータベース)
データベースのユーザー名 root (MySQLにデフォルトであるユーザー名)
データベースのパスワード 空欄(何も記入しない)
他はデフォルトのまま
- 「作成する」ボタンを押し、次の画面で、「インストールを実行しましょう!」ボタンを押すとブログの設定画面になります。
- ブログタイトルとメールアドレスを適当に入れ、「WordPressをインストール」ボタンを押します。
- 「成功しました!」という画面が出れば設定完了です。「ログイン」ボタンを押してログインしてください。
備考
Movable Typeの場合は、XANPP Liteではだめで、XAMPPを使用する必要があるようです。
基金訓練(Webデザイン・プログラミング科)の70日目に行ってまいりました。
70日目は、Adobe Illusutoratorの実習です。
70日目の内容は下記のとおりです。
イラストレーターを使って既存のロゴをトレース
ネット上にあるGIFなんかのロゴを取り込んで、そのロゴをイラストレーターでトレースしました。
これはロゴを印刷してある名刺を渡されて、そのロゴをHPに入れてほしいという依頼がよくあるそうで、その練習だそうです。
やり方は、イラストレーターで72dpiで白紙のドキュメントを新規作成し、そこに、コピペで元になるロゴを貼り付けます。
次に、そのレイヤーはロックして、新規レイヤーを作成し、そこでトレースしていきます。
複雑な曲線はペンツールで、単純な図形はその形のツールで描きます。(曲線を描く時は、塗りなし、線なしで描いて後で色をつけたほうがやりやすいです。)
描く順番は、一番背面になる図形からです。そうすると後でレイヤーパネルで前背面を入れ替えていく手間が省けます。
後は、描いた図形の表示非表示を切り替えつつ、原図と見比べながら完成させていきます。
ポイント
ペンツールを使っての曲線の描き方ですが、アンカーポイントの位置が重要です。
元図の曲線の変位点を見極めて、そこにアンカーポイントを打っていきます。
変位点とは、R止まり点、折れ点、R同士をつないでいる点です。
まず、変位点を直線でつないでから、アンカーポイントの切り替えツールで調整していけば、最小のアンカーポイントできれいな曲線が描けます。
変位点がわかりにくい時は、多少多めにアンカーポイントを打っておいて、切り替えツールで調整しつつ、アンカーポイントを間引いていけば、いいと思います。
sei2が、気になる家電、WEBデザイン、WEBプログラミング、基金訓練や日常の出来事を書いたブログです。