nicepaper @ ウィキ

nicepaper @ ウィキ内検索 / 「Photoshopで文字デザイン3～光る、光彩（外側）編～」で検索した結果

• Photoshopで文字デザイン4～光る、光彩（内側）編～
  前回記事Photoshopで文字デザイン3～光る、光彩（外側）編～に引き続き、今度は文字の内側の光彩です。6月16日記事 イメージ 目次 背景のキャンバス作成 Photoshopを開き、新規作成 長方形ツールを選び、色を選択する。 図形を描いていく 文字記入方法 新規レイヤー作成 文字記入 移動ツールで調整 光彩を選択する ウインドウを開き調整する 光彩（内側）の詳細設定 完成 まとめ 背景のキャンバス作成 Photoshopを開き、新規作成 [ファイル]→[新規]を選び、適当にサイズを決定する。 長方形ツールを選び、色を選択する。 長方形ツ...
• Photoshopで文字デザイン3～光る、光彩（外側）編～
  前回記事Photoshopで文字デザイン2～影、シャドー編～に引き続き、今度は文字の外側の光彩です。文字を光っているように見せることができます。6月15日記事 イメージ 目次 背景のキャンパス作成 Photoshopを開き、新規作成 長方形作成 色選択 図形を描く 文字記入方法 新規レイヤー作成 横書き文字ツール 文字の記入 文字を微調整する 光彩のつけかた 光彩を選択する。 光をつける 光彩（外側）の詳細設定 完成 まとめ 背景のキャンパス作成 今度は、光が目立つよう暗めの色の背景にしていきたいと思います。 Photoshopを開き、新規作成 適当にサイズを決...
• 画像処理
  ...ャドー編～ Photoshopで文字デザイン3～光る、光彩（外側）編～ Photoshopで文字デザイン4～光る、光彩（内側）編～ Photoshopで文字デザイン5～立体、ベベルとエンボス編～ Photoshopで文字デザイン6～テカテカ、サテン編～ Photoshopで文字デザイン7～文字にグラデーション編～ Photoshopで文字デザイン8～文字の縁に縁取り編～ Photoshopで文字を様々な形に変形 Photoshopのtips集 Photoshopで花柄などのマーク（ブラシ）を登録する方法 illustrator 他カテゴリと混在のもの WEBの画像をラスターデータからベクターデータにする
• Photoshopで文字デザイン5～立体、ベベルとエンボス編～
  前回記事Photoshopで文字デザイン4～光る、光彩（内側）編～です。今度は、文字を立体的にみせるPhotoshopの文字デザインについて書いていきたいと思います。6月17日記事 イメージ 目次 ベベルとエンボスとは Photoshopを開き、新規作成 長方形ツールを選び、色を選択する。 図形を描いていく 文字記入方法 新規レイヤー作成 文字記入 移動ツールで調整 ベベルとエンボスを選択する ウインドウを開き調整する ベベルとエンボスの詳細設定 完成 まとめ ベベルとエンボスとは 文字や図形などのオブジェクトに立体表現ができる機能です。ベベル（外側）とベベル（内側）とエンボスの3通り...
• Photoshopで文字デザイン7～文字にグラデーション編～
  前回記事Photoshopで文字デザイン6～テカテカ、サテン編～の続きで、今度は、文字にグラデーションをかけていく方法を書いていきたいと思います。9月24日記事 イメージ(枠つけたバージョン)※枠をつけるとより引き立ちます。こちらはPhotoshopで文字デザイン8～文字の縁に縁取り編～で記述していきます。 目次 背景のキャンバス作成 Photoshopを開き、新規作成 文字記入 横書き文字ツール 移動ツールで調整 グラデーションの設定 グラデーションの色を選択 左下の三角マークで開始色を変更 右下の三角マークで終了色を決定 グラデーションの変化位置を調整 完成 背景のキャンバス作成 Photoshopを開き、新...
• Photoshopで文字デザイン8～文字の縁に縁取り編～
  前回記事Photoshopで文字デザイン7～文字にグラデーション編～の続きで、今度は、文字に枠をつけていく方法を書いていきたいと思います。9月26日記事 イメージ 目次 背景のキャンバス作成 Photoshopを開き、新規作成 文字記入 横書き文字ツール 境界線の設定 境界線の詳細設定 完成 背景のキャンバス作成 Photoshopを開き、新規作成 [ファイル]→[新規]を選び大きさと背景色を適当に選んでいきます。別に背景色は透明でもいいです。 文字記入 横書き文字ツール 文字を記入するために「横書き文字ツール」を選び、1,2,3,4と選んでいきます。 文字の色は明度の高い色を...
• Photoshopで文字デザイン2～影、シャドー編～
  前回記事Photoshopで文字デザイン1～影、ドロップシャドー編～の続きです。前回記事は文字の外側の影の内容でした。今日は二回目として、今度は文字の内側の影のデザインです。6月14日記事 イメージ 内側に影がある文字です。 目次 背景のキャンパス作成 Photoshopを起動し、新規作成 描きたい図形を長方形ツールの中から選ぶ 色を選択する 図形を描く さらに描いた図形の色を微調整する。 文字記入方法 新規レイヤー作成 文字の設定をする 色をダイアログボックスから選択します。 文字を記入していきます。 文字を微調整します。 影つけ 影の詳細設定 完成 背景のキャンパス作成 ...
• Photoshopで文字デザイン6～テカテカ、サテン編～
  前回記事Photoshopで文字デザイン5～立体、ベベルとエンボス編～の続きで、今度は文字をテカテカさせるサテンについて書いていきたいと思います。木工用ボンド？で文字を書いて、乾かせたような質感（こんな説明でいいのか・・・？）を表現することができます。ただ、注意すべき点は サテンのみを使ってもあまり効果はなく、ドロップシャドーやベベルとエンボスとの組み合わせによって非常にデザインがよくなります。 6月18日記事 イメージ 目次 背景キャンバス作成 Photoshopを開き新規作成 長方形ツールを選び、色を選択する。 図形を描いていく。 雲形模様を追加し、拝啓にアナログ感を出す 背景を少し雲模様にする。 文字記入方法 新規レイヤー作成 横書き文字ツール１から2,3,4とフォント、サイズ...
• Photoshopで文字デザイン1～影、ドロップシャドー編～
  Photoshopでの文字デザインを数回にわたり執筆していきたいと思います。今日は第一回目として、文字に影を付けるという方法を行っていきたいと思います。細かいプロパティのところも解説できたらと思っております。6月13日記事 こんな感じのもの 目次 背景のキャンパス作成 Photoshopを起動し、新規作成 描きたい図形を長方形ツールの中から選ぶ 色を選択する 図形を描く さらに描いた図形の色を微調整する。 文字記入方法 新規レイヤー作成 文字の設定をする 色をダイアログボックスから選択します。 文字を記入していきます。 文字を微調整します。 影つけ 影の詳細設定 ドロップシャドーの使い道 ...
• Photoshopで文字を様々な形に変形
  Photoshopで文字を様々な形に変形する方法について執筆していきます。9月28日記事 イメージ 目次 背景キャンバス作成 Photoshopを開き新規作成 文字を記入 変形 レイヤーパレットの「T」を選択 ワープテキストを作成 ワープテキストの形を選択 ゆがみ具合を調節する。 調整 最後に移動ツールを使って文字を調整します。 完成 背景キャンバス作成 Photoshopを開き新規作成 [ファイル]→[新規]を選び、サイズや背景色を選んでいきます。 文字を記入 「横書き文字ツール」を選びフォントや色を選んでいきます。 記入後がこちら ...
• photpshopでシミのあるボロボロの紙を作る
  photoshopで海賊がもっているような宝探しの地図のような紙を作っていきたいと思います。 こんな感じのものです。 目次 新規作成 塗りと線を選び長方形を描く レイヤー1の操作 レイヤー1を少し汚したデザインにする。 ノイズを加え、ざらつき感があるものにする。 まわりを茶色に変色させ、日焼けた感じを出す。 レイヤーマスク追加 レイヤー1のレイヤーマスクの編集 完成 新規作成 塗りと線を選び長方形を描く 塗りと線を選択し（下側の丸）長方形を描く（上の丸） 描いた後が以下 レイヤー1の操作 カラーパレットの中から描画色と背景色を選ぶ の中から描画色はrgb（255,235,198） 背景色はr...
• Photoshopで画像の縁をぼかす
  WEBに載っている料理の画像は、画像の縁をぼかしていたり、額縁に画像をいれたりと普通の画像を編集して、載せています。今日は画像の縁をぼかす方法について記載していきたいと思います。7月5日記事 イメージ 目次 キャンバス作成 画像載せる 画像位置を調整 長方形選択ツールで選択 レイヤーマスクを作成 完成 キャンバス作成 [ファイル]→[新規]を選び、適当に幅や高さを指定します。 画像載せる エクスプローラなどをひらき、画像を領域にドラッグさせます。 ドラッグ後 画像位置を調整 Shiftキーを押しながら拡大縮小すると縦横比を維持できます。 配置後が以下。料理の写真をとる...
• Photoshopで特定の文字を別の色にする方法
  Photoshopの画像化されている文字を別の色の文字にする方法を考えていきます。10月31日記事 イメージ 変更前変更後 目次 画像を読み込む キャンバス内にある別の色と同色に変更する。 クイック選択ツール（または自動選択ツール）で選択する ブラシツールを選んで大きさを適当に決める。 選択する 他の文字の色を吸い取る 塗る 選択を解除してあげる。 完成 新たな文字の色に変更する。 クイック選択ツール（または自動選択ツール）で選択する ブラシツールを選び、大きさを適当に選び、色を変更する。 あとは塗るだけ 選択を解除してあげる。 完成 まとめ 画像を読み込む [ファイル]→[配置]を...
• illustratorで文字の外側に光彩がある画像リンクを作る
  以下のような画像を作っていきたいと思います。 リンクにカーソルを合わせた時に文字の外側が多少光ってみせるような画像です。 目次 ドキュメント設定 見やすくするために、塗りを適当に設定する。 長方形を選択し、描く レイヤーを新規に追加 白い文字を描く フォントやサイズを変更する。 一つ目完成 次に光彩の文字を作る。 再び「効果」→「スタライズ」→「光彩（外側）」を選択 プレビューにチェックをし、OKボタンを押します。 完成 ドキュメント設定 「名前」とサイズの「幅」と「高さ」をそれぞれ設定し、最後にカラーモードを「RGB」に設定します。 見やすくするために、塗りを適当に設定する。 今回、黒い背景に白い文字で作りたいと思うので...
• Photoshopで額縁の作り方
  Photoshopで額縁を作っていきたいと思います。ちなみに写真は近くの緑地でとった写真です。アジサイは雨が降っている時のほうが綺麗に撮れるそうです。6月22日記事 イメージ 目次 中に入る画像のサイズを作成する ファイルを配置する 写真の配置を合わせる 画像を全選択し、マスクを作成する 新規レイヤーを作成後背景にもってくる 背景レイヤーを適当に塗りつぶす 次にキャンバスを広げる設定をする 新規レイヤーを作成する 画像があるレイヤーの画像部分のみを選択する 次に反転させ、枠を選択できるようにします。 その部分について白で塗りつぶす レイヤースタイルから額縁のデザイン決定 完成 中に入る画像のサイズを作成する ...
• Photoshopで花柄などのマーク（ブラシ）を登録する方法
  Photoshopの画像編集をみていると、枠や角に花柄や冠等のシルエットがある場合があります。これはブラシと呼ばれるもので、スタンプのようにポンポンおしていけば、そのマークを使うことができます。 しかし、Photoshopでは規定のブラシの数は少なく、インターネット上にブラシが公開されているものがあります。今日はそのインストール方法です。6月12日記事 こんなものをブラシという。 今回はこちら様から拝借致しました。 目次 ブラシを見つけてくる。 ダウンロードする。 インストールする。 Photoshop起動 ブラシツールの起動 ブラシプリセットピッカーの起動 ブラシファイルの読み込み 参考サイト ブラシを見つけてくる。 http //alwaheed2007.devia...
• Photoshopでテクスチャデザインをパターンファイルとして登録する方法
  Photoshopで図形の背景や文字の背景などに既定に用意されているもの以外のテクスチャを利用したい場合があります。Photoshopではブラシ同様、フリー素材として公開されているものがあり、それをダウンロードして読み込めば利用可能になります。10月18日記事 イメージ 目次 素材の.patファイルを取得してくる。 適当に図形を描き登録する。 適当に長方形ツールから適当に図形を描く パターンオーバーレイを呼び出す 読み込み ファイルを選択 パターンを選択 完成 素材の.patファイルを取得してくる。 http //blog.starsunflowerstudio.com/2011/06/new-free-paper-patterns-for-photosh...
• PhotoshopでアニメーションGIFを作る1
  PhotoshopでアニメーションGIFを作る方法を考えていきます。 色々な方法がありますが、まずは開始と終了のレイヤーを決めてその間は自動で変化させるという方法で行っていきます。11月19日記事 イメージ 目次 新規作成 文字を書く 新規レイヤー作成 アニメーションの準備 レイヤーからフレームを作成 開始と終了を逆にする。 アニメーションの間のフレームを作る あとは書き出し 完成 新規作成 [ファイル]→[新規]を選び適当に大きさを決めます。今回何もないところからフェードインのように表示させるため、背景は透過を選択します。 文字を書く 横書き文字ツールを選び、フォントや大きさ色を選んでいきます。 記述後、移動ツールを使って調整しま...
• photoshopで一部分の色だけ変更する
  Photoshopで画像の一部分だけ色を変えたいという方法についてまとめていきます。 明るさ（明度）を変えたり彩度、色相を変えたりすることができます。 写真はhttp //www.photo-ac.com/からお借りしています。 作成のイメージ 元画像 変更後画像 ※クイック選択ツールの大事さを強調するためにあえて、選択を雑にしています。 1.画像のサイズを把握し、Photoshopに配置します。 2.クイック選択ツールを利用し、ベンチを選択していきます。 ※この作業がかなり肝心です。 （より繊細に選択していく場合）選択の大きさを変更し、直径を変えていきます。（場合によっては、その下の「硬さ」や「間隔」なども変更していきます。） ※選択の仕方：何も押さなければ選択ができ、altキーを押しながら選択していくと、選択してい...
• photoshopで特定の色を抜いたり消したりする
  photoshopで画像から特定の色を抜いたり消したりしたい。 Before これから After こんな感じにする。 文字の回りに灰色っぽいものがついてるけどいいの？というお話。 目次 文字等が書かれている画像を拡大してみよう アンチエイリアスとは アンチエイリアス処理の文字を確認する。 アンチエイリアス処理なし アンチエイリアス処理（シャープ） アンチエイリアス処理（鮮明） アンチエイリアス処理（滑らかに） アンチエイリアス処理（強く） 作成方法 画像を読み込む 色域指定をする 色を抜く 選択した状態を反転させる 境界線を調整（アンチエイリアス） 不要なカラーを除去し、マスクを追加 完成 ...
• Photoshopで画像の色を変更していく～基本編～
  とった写真が暗かったり、青みがかっていたりと時に撮影は失敗するときがあります。そんな中、Photoshopで再編集できれば失敗した画像もよい画像に復活できます。今日はそんな中でPhotoshopで画像の色を変更していきたいと思います。7月6日記事 イメージ(before) 編集後(after) 目次 キャンバス作成 画像配置 画像をドラッグする。 画像を拡大縮小して配置する。 色の調整 明るさ・コントラスト トーンカーブ 露光量 色彩・彩度 まとめ キャンバス作成 適当にキャンバスを作成する。 画像配置 画像をドラッグする。 画像をドラッグしていきます。 ...
• WEBの画像をラスターデータからベクターデータにする
  レスポンシブデザインにおいて、大きいウインドウや小さいウインドウに対応できるように、 ビットマップ画像を用意するとなると、サイズが大きい場合、ファイルサイズが大きすぎたりし、表示の時間が遅くなる。 そんな中で最近見直されてきたベクターデータのsvg形式の画像を表示させる方法について考えていきたいと思います。9月29日記事 目次 ラスターデータの限界 illustratorでベクターデータの作成 illustratorとphotoshpでキャンバスの大きさを16px×16px、フォントサイズ2ptなどの（極小サイズ）で文字を描いてみる まずはPhotoshop 次にillustrator コード 拡大縮小 まとめ ラスターデータの限界 ラスターデータと...
• Photoshopで光源の設定およびあたり具合（照明）を設定する
  画像や写真を綺麗に魅せるコツは照明です。照明機材は数万円とするので、プロやハイアマチュアしか買えませんが、Photoshopなら照明効果をつかえばあたかも照明があたったかのように写真を加工することができます。 もちろんこれは、疑似的な光なので立体感のある光はあてられません。立体感のある光をあてたい方はやはり照明器具を使って写真をとるようにしましょう。7月7日記事 イメージ(before) イメージ(after) 目次 注意事項 キャンバス作成 画像の配置 照明効果の設定 詳細設定 完成 まとめ 注意事項 Photoshopのwin版では32bitバージョンのPhotoshopでないと照明効果が使えないので、32bitのPhotoshop...
• Photoshopで図形に枠線を描く
  Photoshopで編集した画像に枠線を描いていきたいと思います。パワーポイントのように図形を書いたら、図形の塗りつぶし「赤」、枠線「緑」というようなやり方は装備されていません。作成イメージとしては、枠線を引きたい領域を選択し、それ以外との境界線を描くことで、枠線が書けます。6月25日記事 イメージ 目次 キャンバスを適当に作成し、背景色を塗りつぶす 図形を描く 新規レイヤー作成 適当に多角形ツールから図形を選択し、描いていく レイヤーを選択し、境界線を描く まとめ キャンバスを適当に作成し、背景色を塗りつぶす [ファイル]→[新規]を選び適当にキャンバスサイズを選択する。 背景色の塗りつぶしはレイヤーに図形を書いてもよいですが、レイヤーパレットの...
• Photoshopで特定の文字を背景色と一緒にする方法1（長方形選択ツールを利用）
  前回記事Photoshopで特定の文字を別の色にする方法に続き、Photoshopで特定の文字を消したいという場合について考えていきます。11月1日記事 イメージ 変更前変更後（最後のrを消しています。） 目次 色を変更することと消去することの違い 画像を読み込む 長方形選択ツールで選択する。 ブラシツールでブラシツールを選び、大きさを適当に選択する。 背景の色を吸い取る 塗る 選択範囲を解除 完成 まとめ 色を変更することと消去することの違い 色の変更は文字と背景色との境界部分（アンチエイリアス）を考えなくていいですが、消去の場合はアンチエイリアスの部分の消去も考えていかなければなりません。 画像を読み込む [ファイル]→[配置]...
• Photoshopでキャンバスの作成と四角形で塗りつぶし
  Photoshopを操作する上での最初の基礎事項です。今回はキャンパスの作成と四角形で塗りつぶしを行っていきたいと思います。6月13日記事 こんなもの 目次 Photoshopを起動し、新規作成 描きたい図形を長方形ツールの中から選ぶ 色を選択する 図形を描く さらに描いた図形の色を微調整する。 Photoshopを起動し、新規作成 [ファイル]→[新規]を選び、キャンバスの大きさを適当に決める 描きたい図形を長方形ツールの中から選ぶ 色を選択する 図形を描く 図形を描いてきます。 描いた後がこちら さらに描いた図形の色を微調整する。 レイヤ...
• photoshopで古風でくしゃくしゃの紙を作る
  photoshopでくしゃくしゃの紙を作っていきたいと思います。 こんな感じのもの 目次 ファイル新規作成 紙の色作成 レイヤー追加 しわ作成 しわの強さ変更 描画モード変更 色をさらに変更したい場合 完成 ファイル新規作成 [ファイル]→[新規]を選ぶ 今回は1600×1200を作るとする。 紙の色作成 塗りの色を選び、[長方形ツール]から[長方形]を選び、キャンバスに大きく覆いかぶさるように長方形を描く。 こんな感じになる。 レイヤー追加 しわを作るためのレイヤー追加 [レイヤー]→[新規]→[レイヤー]を選ぶ レイヤーを追加し確認する。 しわ作成 レイヤー...
• Photoshp左右に丸いグラデーションをかける
  Photoshopで左右に丸いグラデーションをかける方法について執筆していきます。画像はhttp //www.photo-ac.com/から拝借しました。9月30日記事 イメージ 目次 Photoshopでキャンバス新規作成 画像配置 Shiftキーを押しながら画像を枠に調整 長方形選択ツールから楕円形選択ツールを選ぶ 「ctrl」+ 「-」で縮小し、全体にかかるように選択 レイヤーパレットのレイヤーマスクの作成ボタンを押す 完成 Photoshopでキャンバス新規作成 [ファイル]→[新規]を選び、適当にサイズを選んで、背景を透明にしていきます。 画像配置 [ファイル]→[配置]を選び、画像を選択していきます。 Shiftキーを押...
• Photoshopで特定の文字を背景色と一緒にする方法2（自動選択ツールを利用）
  前回記事Photoshopで特定の文字を背景色と一緒にする方法1（長方形選択ツールを利用）の別の方法を紹介します。Photoshopで特定の文字を消したいという場合について考えていきます。11月2日記事 イメージ 変更前変更後 目次 色を変更することと消去することの違い 画像を読み込む 自動選択ツールを選択し、文字を選択する。 選択範囲を変更する。 ブラシツールでブラシツールを選び、大きさを適当に選択する。 背景の色を吸い取る 塗る 選択範囲を解除 完成 まとめ 色を変更することと消去することの違い 色の変更は文字と背景色との境界部分（アンチエイリアス）を考えなくていいですが、消去の場合はアンチエイリアスの部分の消去も考えていかなければなりません...
• Photoshopでフレアやゴーストの逆光効果を作り出す
  カメラで逆光撮影すると、レンズ群の跡が画像内に残るフレアやゴーストがでることがあります。これをPhotoshopで意図的に作り出す方法について執筆していきたいと思います。本来フレアやゴーストはやっかいものとして扱われます。そのため、花形レンズフードや筒状のレンズフードというレンズの先にワッカのようなものを付けて、それを防止します。しかし、逆光で撮り、フレアやゴーストを意図的に出した方が神秘的に写真がとれるというよさもあります。7月8日記事 イメージ(before) イメージ(after) 目次 キャンバス作成 画像配置 逆光 逆光の詳細設定 完成 キャンバス作成 [ファイル]→[新規]を選びキャンバスサイズを設定する。 画...
• Photoshopでパターン（テクスチャ）に疑似的な光をあてて立体的にする光の作り方や描き方
  Photoshopで２D的なパターンの画像に対して光をあてて立体的に見せる方法を考えていきます。色々と方法はありますが、 私は以下の方法があとで微調整やカスタマイズがきくので、これが好きです。10月29日記事 イメージ ^ 目次 概要 キャンバスを作る パターンで塗りつぶす 新規レイヤーで光用のレイヤーを作り、図形を描き、塗りを0%に変更する。 図形に対して光用のグラデーションをかける。 完成 概要 2D的な画像に対して、上からあるいは左や右から光をあててるような画像が作れれば立体的になります。 今回は光のグラデーションレイヤーを作ってそれをテクスチャの上にのせていくという方法をとっていきたいと思います。 キャンバスを作る [ファイル]→[新規]を選び、適当に...
• CSSでフォントをちょっとした工夫をして見やすくするver1
  文字を綺麗に魅せるコツとしては文字の回りのギザギザ感をみせないことが重要です。 アンチエイリアスがかかっていない状態だと、あまりきれいには見えません。アンチエイリアスを知りたい方はphotoshopで特定の色を抜いたり消したりするを参照。 webkit系の中にはアンチエイリアスがかかるCSSもありますが、今回は別の方法で行っていきたいと思います。7月29日記事 イメージ（下側がアンチエイリアスかかっています。） 目次 文字を若干回転させるだけで綺麗になる？ コード 表示 まとめ その他リンク 参考 文字を若干回転させるだけで綺麗になる？ CSSのtransformプロパティを用いて文字を若干回転させることで文字に疑似アンチエイリアスがかかり、見やすくなってきます。...
• PHPで文字を大文字小文字変換一覧
  PHPで変数に入った文字を小文字や大文字にする方法についてまとめていきます。8月31日記事 目次 strtolowerとstrtoupper関数 コード 結果 strtolowerとstrtoupper関数 大文字や小文字にする関数。string　to lower かstring to upperと覚えると覚えやすいかと。 コード !DOCTYPE HTML html head meta charset="utf-8" title 大文字小文字変換 /title /head body ?php $low = "nicepaper note"; $up = " NICEPAPER NOTE"; ...
• 2つの画像のうち画像の片一方を透過させ、もう一つの画像の上に載せる
  このような画像を作ります。画像はhttp //www.photo-ac.com/からお借りしております。 ※こんな格好して蚊に刺されそうというツッコミは許してください。 流れ 1.透過したい方の画像を読み込む Photoshopで透過したい方の画像を読み込みます。 2.一つの画像を切り取る。 画像を切り取ります。切り取りたい部分を選択し、クイック選択ツールから切り取りたい場所を選択していきます。 大きさは、以下のところから変更することができます。 選択していきます。 ※選択範囲が広くなり余計に選択してしまった時はWindowsの場合、「alt」キーを使って選択範囲を直していきます。 ※Windowsの場合「ctrl」+「+」や　「ctrl」+「-」を押すことで画面の拡大や縮小ができるので、編集しやすいサイズにして編集しましょう。 ...
• 画像と長方形を二つ並べてグラデーションをかける
  このようなものを作っていきたいと思います。画像はhttp //www.photo-ac.com/から拝借しました。 目次 1.新規作成 2.長方形を選び、カラーを選択し、長方形を作る。 3.もう一つの画像を挿入し、微調整する。 4.消しゴムツールを使う 5.完成 1.新規作成 新規作成します。 「ファイル」から「新規」を選び、キャンバスの大きさを適当に決めます。 2.長方形を選び、カラーを選択し、長方形を作る。 「長方形ツール」から「長方形」を選びます。 長方形のカラーを選択します。 他の色を選択したい場合はここから選んでください。ここでは「黒」にします。 キャンパスを大きく外れるように描いていき、配置します。 3.もう一つの画像を挿入し、微調整する。 Windowsの場合、ファイルの閲覧ソフト...
• CSSで見出しデザイン1
  CSSで見出しデザインをまとめていきます。2015年5月28日記事 目次 見出しの基本構成 見出しを色々作ってみる コード 解説 見出しの基本構成 paddingやpadding-left font-family background borderやborder-left,border-bottom border-radius box-shadow といったものを使えば色々とできます。 見出しを色々作ってみる 見出しデザインを作りました。 色々なクラスの使い方を知ってもらうために、h1セレクターの基本プロパティをまず作り、5通りのスタイルの形と1グラデーションのクラスを作りました。それらを組み...
• CSSで見出しデザイン2
  前回記事CSSで見出しデザイン1の続き記事です。 今回は疑似要素before,afterを使った見出しの制作方法をご紹介します。 こんなもの 目次 疑似要素before,afterをなぜ使う？ 疑似要素がある場合とない場合で作ってみる。 作り方 コード 作り方まとめ 疑似要素before,afterをなぜ使う？ 一般的な見出しはCSSでよく使われるプロパティ名を組み合わせただけです。例えばborder、border-left、border-bottom、border-radius、padding、padding-left、padding-bottom・・・。それらを組み合わせたり色を変えたりして作られています。しかし、その方法では、 簡単な丸を作ったり、三角形を作ったり、四角...
• PHP
  PHPの関数や使い方やコードの説明をしていきます。 目次 PHPマニュアル、レファレンスの読み方(1) 文字列関係 PDOの利用 phpでMySQLへフォームを使って挿入 クロスサイトスクリプティング PHPでfilter_input関数を使い比べてみる。 phpのconfigファイル UTF-8の文字コードファイルだが、MySQLデータをEUC-jp(ujis)で保存する。 PHPでendifやendforを使った書き方 PHPでMySQLへ大量のデータ挿入 PHPでformでデータを多次元配列にして送信後、受け取る。 ループをしても意味ないレイアウトへMySQLからフィールド一覧を取り出して並べる方法 PHPで複数フィールドの一括アップデート方法 PHPで改行コー...
• PHPで画像のサムネイル表示1
  PHPで画像のサムネイルを作成していきたいと思います。9月7日記事。 目次 画像を小さく表示させることとの違い。 header情報を画像に変更 コード まとめ 画像を小さく表示させることとの違い。 画像を小さくすることはimgタグのなかでwidth等を変えて小さくすることができます。しかし、その場合画像は一つのままです。サムネイル画像をPHPで作ることができれば、より画像表示の幅も広くなってきます。（データベースにサムネイル画像を別に登録したりとか。）今回はその方法についてまとめていきます。 header情報を画像に変更 PHPでプログラムを書く場合、ほとんどが、テキストの情報です。header("Content-Type text/html; charset=U...
• 黄金比でフォントサイズをデザインする
  フォントサイズで色々と迷うところはあると思います。そんな中で比率でフォントサイズをデザインをしていきたいと思います。 隣接するフォントサイズを1 1.618にするとデザイン性が向上します。 今日はそのような記事を執筆していきます。8月2日記事 イメージ 目次 フォントサイズ コード まとめ フォントサイズ reset.cssを読み込んでいる場合はfont-size 100%になっていると思います。それを基準とし倍率を指定していきます。 読み込んでいない場合はユニバーサルセレクタを用いてfont-size 100%にします。 *{font-size 100%} コード フォントサイズと余白を1.618倍していきます。 HTML !DOC...
• jQueryを学ぶ1
  Photoshopの記事を書こうとしたのですが、編集後の画像があまりかっこよくなかったので少し後回しにし、jQueryについて執筆していきたいと思います。前回記事jQueryの読み込みからさらに進めていきたいと思います。読む人の対象は HTML+CSSがある程度わかっており、WEB上にあるjQueryのサンプルコードをいじって設定してみたものの、もう少し深く知りたいや、自分で実装してみたいという方向け です。7月11日記事 目次 jQueryを学ぶ手順 jQueryでCSS記述をしてみる jQueryを実行させる環境を整備する。 jQueryを呼び出す基本構文を作成する jQueryでCSSのなにか記述をしてみる。 pを赤字 #mainの中のpを赤字 まとめ jQuer...
• レスポンシブデザインとスマホで確認した時の落とし穴
  このページではレスポンシブデザインについて様々な方法を説明していきます。 レスポンシブデザインとは 一つのHTMLに対して画面のサイズ(正確には横の画素数)によってCSS３により別々のレイアウトに変える設計のなされたサイト を言います。 また、レスポンシブデザインをスマホで確認する時に陥りがちな落とし穴についても解説していきます。 OSを搭載した携帯電話であるスマートフォンの登場により、今後増々、様々なデバイスによって閲覧されるWebサイト作りは重要性を増していくと思われます。そんな状況に対応すべく登場したのがHTML5やCSS3と言っても過言ではないくらいでしょう。そしてより素早く全てのデバイスに対応したwebページを作るためには「より良いレスポンシブデザイン」の作成技術は必須は言えるでしょう。 そこでこのページでは、レスポンシブデザインを作成するための３つの方法と、メリット、デメリッ...
• jQueryとCSSで上へ戻るボタンを作る
  jQueryやスマートフォンが流行るようになってきてからスクロールしたあとに「上へ戻る」ボタンが作られるようになってきました。今回はそれを作っていきたいと思います。7月19日記事 イメージ 全体はこんな感じ 最初はボタンがあらわれないが 下の方にいくとあらわれる 目次 まずは全体の枠組み作り ボタン作り ボタン配置のHTML+CSS+jQuery まとめ まずは全体の枠組み作り HTML部 !DOCTYPE HTML html lang="ja" head meta charset="utf-8" link rel="stylesheet" type="text/css&qu...
• radio buttonのCSSデザイン
  radioボタンを今風にするデザインに変えていきたいと思います。11月24日記事 イメージ 目次 コード まとめ コード HTML !DOCTYPE HTML html head meta charset="utf-8" link rel="stylesheet" type="text/css" href="style.css" title ラジオボタンデザイン /title /head body div class="sportschk" input name="sports" id="select1" value=&qu...
• リスト横並びデザイン1
  横並びデザインを作るのが色々とめんどくさくなってきたので、テンプレート作りします。8月4日記事 横並びリストイメージ 目次 読み込むもの コード タイトルなしリスト タイトルありリストver1 タイトルありリストver2 まとめ 読み込むもの reset.cssどこからかとってきてください。当ページのCSSのリセットでもいいです。 あとは以下のコードが書いてあるスタイルシート コード タイトルなしリスト HTML部 div id="wrapper1" p タイトルなしリスト /p br nav id="menulist" 　 ul class="...
• UTF-8の文字コードとフォームから文字受け取りと文字（化け）表示
  文字コードについて執筆していきたいと思います。8月18日記事 目次 文字コード 文字化けテスト コード 結果とまとめ 文字コード それぞれ文字には文字コードというものが割り当てられています。その文字コードは表になっており、様々な文字が表の中である番号で割り当てられています。 文字化けテスト PHPで文字コードを変換する関数はmb_convert_encoding関数というものを利用します。使い方は mb_convert_encoding($str,"変換後の文字コード","変換前の文字コード") になります。データベースとPHPの文字コードが異なっていた場合によく使用します。 コード フォーム ...
• マスクの種類～クリッピングマスクとレイヤーマスク～
  photoshopのマスクの種類について学んでいきます。 これとこれの違い ほぼかわらないですね。 変わらないですが作り方が違います。 目次 マスクとは クリッピングマスク 新規ファイル作成 切り取りたい図形を描く レイヤーを新規追加 新しく作ったレイヤーが選択されていることを確認し、画像を載せる 新しく作ったレイヤーで右クリックし、クリッピングマスクを作成を押す 出来上がり レイヤーマスク 新規ファイル作成 画像を配置する。 楕円形選択ツールを選択し、ぼかしを適宜調整する。 レイヤーパレットの「レイヤーマスクを追加」のボタンを押す。 出来上がったものと微調整 マスクとは ある画像を...
• レスポンシブデザインviewpointの意味
  スマートフォン向けの記事を書いていきます。レスポンシブデザインにおいて、viewpointを書かないと、iPhone6の場合、横幅が1080なので、1080で記述すると、PCサイトのように表示され文字が小さくなってしまう。 viewpointを指定することで、それが拡大されて見やすくなる。これがviewpointの設定です。今回はこのことについて記述していきたいと思います。11月30日記事 目次 HTML5リファレンス 色々と調べてみる 結論 コード HTML5リファレンス HTML5リファレンスには meta name="viewport" content="width=device-width, initial-scale=1, minimum-scal...
• PHPでオブジェクト指向入門4～コンストラクタ～
  前回記事PHPでオブジェクト指向入門3～メソッド～では、オブジェクト指向における関数の扱い方について記述していきました。 今度はインスタンス化したときの最後のカッコに引数を記述して実行する方法をまとめていきます。9月18日記事 目次 インスタンスを初期化するためのメソッド（コンストラクタ） コード まとめ PDOの最初の接続に使われている。 利点 次回 インスタンスを初期化するためのメソッド（コンストラクタ） インスタンス化には「new クラス名()」でした。この空白のカッコを少し考えてきます。 インスタンス化した時点で、一気ににメソッドを実行できないか？という疑問が湧いてくると思います。 これができるのがコンストラクタです。 コード Calc...
• レスポンシブWEBデザインテンプレート（スタイルシートで複数記述編）
  一番メンドクサイデバイス対応ですが、テンプレートを作っていきたいと思います。HTMLタグで分ける方法もありますが、CSSで分けていきます。10月9日記事 目次 HTML CSS スマホ（縦横共通）,iPad（縦横共通）,iPhone（高密度デバイス）,普通PC,高解像度PC スマホ（縦横別）,,iPad（縦横別）,iPhone（高密度デバイス）普通PC,高解像度PC まとめ HTML !DOCTYPE HTML html head meta charset="utf-8" link rel="stylesheet" type="text/css" href="style.css" ...
• @wiki全体から「Photoshopで文字デザイン3～光る、光彩（外側）編～」で調べる

更新順にページ一覧表示 | 作成順にページ一覧表示 | ページ名順にページ一覧表示 | wiki内検索