blog - みきまるしぇ

雑記

Photoshop Elementsを使ったロゴ作成方法

 自動でロゴを作ってくれるサイトもたくさんありますが、自分で工夫してロゴが作れたら、それがいちばんよいかと思います。わたしはMac版のPhotoshop Elementsを使っていますが(数年前のバージョン)、それでもし参考になればと、手順を書いてみます。

 作業手順を画面キャプチャしてみました。18枚あります。
(のちほど、1画面ずつ意味を説明する文章を書きますので、適宜ストップボタンを押しながらご覧ください)

 動画がうまく埋めこまれているかどうかの実験で、いったん公開しますが、説明の文章は25日夜に、書き足します。

(以下、書き足しました 2018.10.25 夜) 

 まず最初に…わたしの環境はMac OSで、使用しているPhotoshop Elementsは数年前のモデルです。また、モードをエキスパートにしているので、かならずしも同じ画面で作業している人ばかりでは、ないと思います。何らかのご参考になれば。

 画面上部のタイムスタンプを故意に削除せずにおきましたので「なるほど、15分もあればできるものなんだ」と、気楽にお考えください。
(途中で画面を離れるなどしたのでロスがありましたが、だいたい15分もあればできます)

今回のようなロゴ作成で、用意するもの

  1.  フォント(パソコンにもともとインストールされているものや、ご自身で購入、または権利問題なしと確認できているもの)
  2.  レイヤー処理ができる画像ソフト(多くのソフトで対応しています)

手順としましては

  •  文字部分を作る。大きさや傾け方などの工夫の際にレイヤーを使用して、のちほど統合すると便利。
  •  レイヤーを用意して、模様をつける。
  •  最後に周囲の余白を切りとって、基礎部分の完成。

…という流れです。基礎部分ができましたら、それに色をつけたり加工をしたり、あるいは縮めてリンクボタンにしたりと、さまざまな工夫ができるようになります。

では、個々の画面の解説です。

画面1

  • まず適当なサイズの無地画面を作り、テキスト入力メニューから、ロゴの一部を書きます。
  • 当サイトの作成例として、Mikimarcheの M を書きました。
  • 好きなフォントやサイズは、文字を選択した状態でフォントメニュー(画面下部)から選べます。

画面2

  • レイヤーを作成するメニューから、新規に1枚を作成し、テキスト入力メニューでロゴ後半を入力します。
  • 当サイトの作成例は Mikimarche の ikimarche 部分です。
  • フォントは前半部分と同じ種類のものを選んでおけば無難でしょう。

画面3
第1のレイヤーで、前半部分を回転させたり、ひろげたり、好きなように動かします。(周囲をつまめば好きな形に変えられます)

画面4
第2のレイヤーで、後半部分を好きな位置に移動させます。

画面5
だいたいよいかなと思ったら、レイヤーをまとめます。

  • もしここを何回かやり直すかもしれないと思ったら、画面4の段階で、レイヤーごと保存できる形式で保存してください。
  • フォトショップ系であれば.psdという形式がそれにあたります。ほかのソフトでもレイヤーが保存できる形式があります。

画面6
効果のメニューから、文字をどう加工するかを選びます。ここはお好みで。

画面7
効果のメニューで選んだものを、設定画面から微調整できます。

画面8
微調整を確認しつつ、よいと思ったところでOKを押します。

画面9
次の作業のため、レイヤーを追加します。レイヤー追加は上のメニューバーから選べます。

画面10
新しいレイヤーを、いったんグラデーションで塗りつぶす準備です。
グラデーションのメニューを選び、流し入れる色合いを自分で設定します。お好きな色で。

画面11
色合いが決まったら、適当にぐりっと、画面上をカーソルでドラッグしてください。
わたしの場合は左斜め下から右上方向に、適当にやってみました。

画面12
グラデーションを模様で切り抜きします。
切り抜きメニューの中に、たくさん画像がはいっていますので(フォトショップでなくてもこういったものは、はいっていると思います)、選びます。

画像13
画面11とよく似ていますが、左下に、選んだ画像がご覧いただけると思います。
この状態で、適当な場所に(何度でも移動できますので、気にせずどこにでも)ぐりぐりっとカーソルをあて、ドラッグします。

画面14
洋梨の絵が出ました。場所が気に入らなければ、あるいは形がいまひとつなら、何度でもドラッグしなおしできます。

画面15
ここでまた、レイヤーをまとめます。
(やり直しがしたくなるかもと思ったら、レイヤーごと保存できる形式で、保存してください)

画面16

  • そろそろ作業も終盤ですので、適当な大きさに切りましょう。
  • このあたりかなと思う場所を長方形で選択します。
  • 選択しながら画面に確認の数字が出ますので、好みのサイズが決まっている人はその数字を参考にしながら範囲選択

画面17
周囲を切り抜きます。

画面18
数字をきっかり好みに合わせておきたい人は、ここで合わせましょう。

作業はいったん、ここで終了です。

このままファイル保存することもできますし、その後、これを部品としてさらなる加工をしていくこともできます。

もし保存する場合、.jpg(ジェイペグ)形式ですと作業をしていた背景色(この場合は白)で背景が確定します。
.png(ピング)ですと、背景色を指定、あるいは背景を透明にして保存することもできます。

駆け足でしたが、今日のところは、以上です。
ご覧いただきありがとうございました。

 

 

≫ 続きを読む

雑記   2018/10/24   mikimarche

PHPの本

 まだ前回のBootstrap4の本も完全には読み終えていないのですが、この1週間くらいは、平行してこちらも読んでいます。

 PHPは以前にバージョン3と4について書かれた本を読んだことがあり、その数年後にPHP5について書かれた本を読みましたが、時代はもはやPHP7です。本日現在わたしの体感としては世の中でもっとも多く使われているPHP5.6は、正式には今年で、サポートが終了することになっています。

 PHP7とMySQLについて書かれている本を、またもや電子書籍で購入して、読んでいるのですが…
(画像はAmazonから)

詳細!PHP 7+MySQL 入門ノート

…自分としては納得の上で購入したつもりのKindle版でしたが、やはり、これは紙の本がおすすめです。あとで買い直ししたほうがよいかもしれないと考えています。

 解説は簡潔で明瞭、事例はネットでダウンロードしてこられるので、読むだけでも勉強になるにはなるのですが、こういう本の常として「しょっちゅう見直しをしたい」ものです。ですがこの本は電子化にあたり文字として処理をしておらず(内容を画像として掲載している状態)、当然のこと文字で内容を検索はできませんので、ふたたび読みたい項目を探すのがたいへんになります。さらに、頼みの綱である目次は細分化されておらず、「制御構造」、「関数」、「文字列」などの簡単な言葉で名称が書かれているのみ。現在は初回の読み流しではありますが、再読や、今後の参照を想像しただけで、困難が待ち受けている気がします。

≫ 続きを読む

雑記   2018/09/22   mikimarche

個人ブログ用の新ドメイン設定(覚え書き)

 10年利用しているWordPressのブログで、URLを縮めてSSL対応するため独自ドメインを取得したので、その設定について。

 昨日、個人ブログのほうで新ドメインを取得しました。思いついて1日で、すべての作業はあっという間に終わりました。(詳細はこちら → https://mikimarulog.me/?p=20250 )

 簡単に書いてしまうと、わたしの場合はこのmikimarche.comのはいっている場所と同じ場所で、そのブログを10年書いています。同じ家の別々の部屋にあるものを、部屋の名前で分けて呼び出しているということです。mikimarcheが呼ばれたらmikimarcheの看板がついている部屋のドアが開き、mikimarulogと呼ばれたら、別のドアが開くという仕組みです。

 内容そのものを引っ越したのではなく、部屋のドアにつける看板を用意して、呼ばれたら自動でドアが開くようにしたのが、今回の手順でした。それで早く終わったというわけですが、ほんとうに中身を引越(別のビルに移動)などの場合は、もう少し作業が繁雑になります。

 今回は、ロリポップの系列会社「ムームードメイン」で、ドメインを取得しました。

≫ 続きを読む

雑記   2018/09/08   mikimarche

Bootstrap 4の本

 先日こちらでご紹介したHTMLとCSSの本はすぐに読み終わり、現在はBootstrap 4の本を読んでいます。

 前回の本がとても波長に合ったので、今回もできるだけ似たような雰囲気で学べる電子書籍はないかと思っておりましたところ、Bootstrap 4の本が技術評論社から発売されたばかりということで、渡りに船とばかりに、そちらを読みはじめました。

(AmazonのKindle本を購入しましたが、活字でも値段は同じ3,542円です)

 Bootstrapというのは、もともとはTwitter社が開発したレスポンシブウェブデザインのアプリケーションです。こう書くと自分でもカタカナが多くてわかりにくいと思いますが、レスポンシブというのは、パソコンでもスマホでもタブレットでも、見る人の環境(使っている画面の大きさなど)を判断してそれに適した画面を表示できる状態を指します。もともとTwitterのようにスマホなど小さな画面で見る利用者のほうが多かったであろうウェブサービスにとっては、とても重要な技術だったのですね。

 これはこのサービスを使いたい人がウェブサイト上に最低限のファイルを置いておき、ウェブページ上からBootstrapを呼び出すことでレスポンシブなデザインを可能にする仕組みです。多くのウェブサイトでバージョン3が使われていますが、わたしのようにこれから開始する人間は4がよいだろうと、勉強をはじめました。

 また読み終わったら、次の本をご紹介します。

 なお、コンピュータの本も含めてわたしの書評は、Biblio Mikimaru というブログ → biblio-mikimaru.sblo.jp に掲載されていますので、よろしければご覧ください。

≫ 続きを読む

雑記   2018/08/31   mikimarche

HTMLとCSSの本

 今日は用語解説の話題を少しお休みして、本のご紹介です。

 せっかくこうしたサイトを開始したわけですので、うろ覚えが多かった知識を整理すべく、何冊か本を読んでみることにしました。本日はこの本です。

 AmazonでKindle版を購入しましたので、パソコンの画面にこの本を開いたまま、横目でちらちら見てはエディタで練習します。ちなみに紙の本とKindleと値段は一緒で2,462円でした。



 いままでテキストエディタはさまざまなものを使ってきましたが、この本に紹介されていたBracketsというエディタが、ほんとうにもう「こういう作業にぴったり」なもので、驚きました。無料で利用できるエディタですので、安心してダウンロード可能です。

 ほんとうに簡単なところから書いてあるので、まるきり初めての人でも、とっつきやすいかもしれません。わたしのように、頭の整理として読んでも、なかなか優れものです。

 これが読み終えたら、また次の本をご紹介します。

≫ 続きを読む

雑記   2018/08/17   mikimarche

2018.08.01 オープンです

 mikimarche.com オープンいたしました。

オープンいたしました。よろしくお願いします。

 なお、このシステムはbaserCMSというオープンソースの国産ソフトです。
 このソフトでやってみようと決意してから2日でパソコン内部で仮運営が完了、その後ロリポップ上に移動して動作確認が1日、そしてこのmikimarche.comのドメインを使うようになるまで、うっかりミスで1日悩んでしまいましたが、コミュニティの方にヒントをいただき、実現しました。

(人様から教えていただかないと気づかなかった凡ミスで、ほんとうにお恥ずかしいですが、無事に公開できました)

 

 なお、お友達のみなさま、エラーが出るか出ないか、何かお気付きの点がありましたら、この欄のコメントなどにご参加いただけないでしょうか。どきどきしながらお待ちしています。

≫ 続きを読む

雑記   2018/08/01   mikimarche